development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-10-14 04:02:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP Flexbox Layout Manager for Sky framework.

Browse source 
This only handles really basic cases and doesn't understand
justification, wrapping, and so on. Submitting for code
review so I can get some early feedback before I invest
more time into making it correct.

R=ianh@google.com, abarth

Review URL: https://codereview.chromium.org/1151293002
This commit is contained in:
Collin Jackson 2015-05-22 18:47:29 -07:00
parent 51c670e62b
commit 87e8b162c7
1 changed files with 47 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
examples/raw/simple_render_tree.dart
View file

@ -7,19 +7,26 @@ import 'dart:sky';
import 'package:sky/framework/layout2.dart';
class RenderSolidColor extends RenderDecoratedBox {
final double desiredHeight;
final double desiredWidth;
final int backgroundColor;
RenderSolidColor(int backgroundColor)
: super(new BoxDecoration(backgroundColor: backgroundColor)),
backgroundColor = backgroundColor;
RenderSolidColor(int backgroundColor, { double desiredHeight: double.INFINITY,
double desiredWidth: double.INFINITY })
: desiredHeight = desiredHeight,
desiredWidth = desiredWidth,
backgroundColor = backgroundColor,
super(new BoxDecoration(backgroundColor: backgroundColor));
BoxDimensions getIntrinsicDimensions(BoxConstraints constraints) {
return new BoxDimensions.withConstraints(constraints, height: 200.0);
return new BoxDimensions.withConstraints(constraints,
height: desiredHeight,
width: desiredWidth);
}
void layout(BoxConstraints constraints, { RenderNode relayoutSubtreeRoot }) {
width = constraints.constrainWidth(constraints.maxWidth);
height = constraints.constrainHeight(200.0);
width = constraints.constrainWidth(desiredWidth);
height = constraints.constrainHeight(desiredHeight);
layoutDone();
}
@ -56,12 +63,42 @@ void main() {
view.setEventCallback(handleEvent);
view.setBeginFrameCallback(beginFrame);
var root = new RenderBlock(
decoration: new BoxDecoration(backgroundColor: 0xFF00FFFF),
var root = new RenderFlex(
direction: FlexDirection.Vertical,
decoration: new BoxDecoration(backgroundColor: 0xFF000000));
void addFlexChild(RenderFlex parent, int backgroundColor, { int flex: 0 }) {
RenderNode child = new RenderSolidColor(backgroundColor);
parent.add(child);
child.parentData.flex = flex;
}
// Yellow bar at top
addFlexChild(root, 0xFFFFFF00, flex: 1);
// Turquoise box
root.add(new RenderSolidColor(0x7700FFFF, desiredHeight: 100.0, desiredWidth: 100.0));
// Green and cyan render block with padding
var renderBlock = new RenderBlock(
decoration: new BoxDecoration(backgroundColor: 0xFFFFFFFF),
padding: const EdgeDims(10.0, 10.0, 10.0, 10.0));
root.add(new RenderSolidColor(0xFF00FF00));
root.add(new RenderSolidColor(0xFF0000FF));
renderBlock.add(new RenderSolidColor(0xFF00FF00, desiredHeight: 50.0, desiredWidth: 100.0));
renderBlock.add(new RenderSolidColor(0x7700FFFF, desiredHeight: 100.0, desiredWidth: 50.0));
root.add(renderBlock);
var row = new RenderFlex(
direction: FlexDirection.Horizontal,
decoration: new BoxDecoration(backgroundColor: 0xFF333333));
// Purple and blue cells
addFlexChild(row, 0x77FF00FF, flex: 1);
addFlexChild(row, 0xFF0000FF, flex: 2);
root.add(row);
row.parentData.flex = 3;
renderView = new RenderView(root: root);
renderView.layout(newWidth: view.width, newHeight: view.height);