autolayout.dart 2.83 KB
Newer Older
1
// Copyright 2016 The Chromium Authors. All rights reserved.
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5 6
// This example shows how to use the Cassowary autolayout system directly in the
// underlying render tree.
7

8
import 'package:flutter/cassowary.dart' as al;
9
import 'package:flutter/rendering.dart';
10

11
class _MyAutoLayoutDelegate extends AutoLayoutDelegate {
12 13 14 15
  AutoLayoutRect p1 = new AutoLayoutRect();
  AutoLayoutRect p2 = new AutoLayoutRect();
  AutoLayoutRect p3 = new AutoLayoutRect();
  AutoLayoutRect p4 = new AutoLayoutRect();
16

17
  @override
18
  List<al.Constraint> getConstraints(AutoLayoutRect parent) {
19 20
    return <al.Constraint>[
      // Sum of widths of each box must be equal to that of the container
21
      parent.width.equals(p1.width + p2.width + p3.width),
22 23

      // The boxes must be stacked left to right
24 25
      p1.right <= p2.left,
      p2.right <= p3.left,
26 27

      // The widths of the first and the third boxes should be equal
28
      p1.width.equals(p3.width),
29

30
      // The width of the first box should be twice as much as that of the second
31
      p1.width.equals(p2.width * al.cm(2.0)),
32 33

      // The height of the three boxes should be equal to that of the container
34 35 36
      p1.height.equals(p2.height),
      p2.height.equals(p3.height),
      p3.height.equals(parent.height),
37 38 39

      // The fourth box should be half as wide as the second and must be attached
      // to the right edge of the same (by its center)
40 41 42 43
      p4.width.equals(p2.width / al.cm(2.0)),
      p4.height.equals(al.cm(50.0)),
      p4.horizontalCenter.equals(p2.right),
      p4.verticalCenter.equals(p2.height / al.cm(2.0)),
44 45 46
    ];
  }

47
  @override
48 49 50
  bool shouldUpdateConstraints(AutoLayoutDelegate oldDelegate) => true;
}

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
void main() {
  RenderDecoratedBox c1 = new RenderDecoratedBox(
    decoration: new BoxDecoration(backgroundColor: const Color(0xFFFF0000))
  );

  RenderDecoratedBox c2 = new RenderDecoratedBox(
    decoration: new BoxDecoration(backgroundColor: const Color(0xFF00FF00))
  );

  RenderDecoratedBox c3 = new RenderDecoratedBox(
    decoration: new BoxDecoration(backgroundColor: const Color(0xFF0000FF))
  );

  RenderDecoratedBox c4 = new RenderDecoratedBox(
    decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF))
  );

68
  _MyAutoLayoutDelegate delegate = new _MyAutoLayoutDelegate();
69

70 71 72 73
  RenderAutoLayout root = new RenderAutoLayout(
    delegate: delegate,
    children: <RenderBox>[c1, c2, c3, c4]
  );
74

75 76 77 78
  AutoLayoutParentData parentData1 = c1.parentData;
  AutoLayoutParentData parentData2 = c2.parentData;
  AutoLayoutParentData parentData3 = c3.parentData;
  AutoLayoutParentData parentData4 = c4.parentData;
79

80 81 82 83
  parentData1.rect = delegate.p1;
  parentData2.rect = delegate.p2;
  parentData3.rect = delegate.p3;
  parentData4.rect = delegate.p4;
84

Ian Hickson's avatar
Ian Hickson committed
85
  new RenderingFlutterBinding(root: root);
86
}