From 3d37e7874565439dd17e7ae74266510ca0bf8a31 Mon Sep 17 00:00:00 2001 From: Hixie Date: Mon, 24 Aug 2015 17:50:37 -0700 Subject: [PATCH] Add `Row` and `Column` widgets so you don't have to use Flex. I updated everything in widgets/, but didn't update any examples. --- packages/flutter/lib/widgets/README.md | 30 +++++++------- packages/flutter/lib/widgets/basic.dart | 18 +++++++++ packages/flutter/lib/widgets/dialog.dart | 2 +- .../flutter/lib/widgets/drawer_header.dart | 5 +-- packages/flutter/lib/widgets/drawer_item.dart | 2 +- packages/flutter/lib/widgets/snack_bar.dart | 2 +- packages/flutter/lib/widgets/tabs.dart | 9 ++--- packages/flutter/lib/widgets/tool_bar.dart | 5 +-- packages/flutter/lib/widgets/widgets.md | 39 ++++++++++++------- 9 files changed, 67 insertions(+), 45 deletions(-) diff --git a/packages/flutter/lib/widgets/README.md b/packages/flutter/lib/widgets/README.md index 88681eea83..52e18c6daf 100644 --- a/packages/flutter/lib/widgets/README.md +++ b/packages/flutter/lib/widgets/README.md @@ -46,10 +46,9 @@ very commonly used: * `Text`: The `Text` widget lets you create a run of styled text within your application. - * `Flex`: The `Flex` widget lets you create flexible layouts in both the - horizontal and vertical direction. Its design is based on the web's flexbox - layout model. You can also use the simpler `Block` widget to create vertical - layouts of inflexible items. + * `Row`, `Column`: These flex widgets let you create flexible layouts + in both the horizontal (`Row`) and vertical (`Column`) directions. + Its design is based on the web's flexbox layout model. * `Container`: The `Container` widget lets you create rectangular visual element. A container can be decorated with a `BoxDecoration`, such as a @@ -75,7 +74,7 @@ class MyToolBar extends Component { ), height: 56.0, padding: const EdgeDims.symmetric(horizontal: 8.0), - child: new Flex([ + child: new Row([ new NetworkImage(src: 'menu.png', width: 25.0, height: 25.0), new Flexible(child: new Text('My awesome toolbar')), new NetworkImage(src: 'search.png', width: 25.0, height: 25.0), @@ -85,14 +84,15 @@ class MyToolBar extends Component { } ``` -The `MyToolBar` component creates a cyan `Container` with a height of 56 -device-independent pixels with an internal padding of 8 pixels, both on the -left and the right. Inside the container, `MyToolBar` uses a `Flex` layout -in the (default) horizontal direction. The middle child, the `Text` widget, is -marked as `Flexible`, which means it expands to fill any remaining available -space that hasn't been consumed by the inflexible children. You can have -multiple `Flexible` children and determine the ratio in which they consume the -available space using the `flex` argument to `Flexible`. +The `MyToolBar` component creates a cyan `Container` with a height of +56 device-independent pixels with an internal padding of 8 pixels, +both on the left and the right. Inside the container, `MyToolBar` uses +a `Row` layout. The middle child, the `Text` widget, is marked as +`Flexible`, which means it expands to fill any remaining available +space that hasn't been consumed by the inflexible children. You can +have multiple `Flexible` children and determine the ratio in which +they consume the available space using the `flex` argument to +`Flexible`. To use this component, we simply create an instance of `MyToolBar` in a `build` function: @@ -207,7 +207,7 @@ button: Widget build() { return new MyButton( child: new ShrinkWrapWidth( - child: new Flex([ + child: new Row([ new NetworkImage(src: 'thumbs-up.png', width: 25.0, height: 25.0), new Container( padding: const EdgeDims.only(left: 10.0), @@ -272,7 +272,7 @@ class MyDialog extends StatefulComponent { } Widget build() { - return new Flex([ + return new Row([ new MyCheckbox( value: _checkboxValue, onChanged: _handleCheckboxValueChanged diff --git a/packages/flutter/lib/widgets/basic.dart b/packages/flutter/lib/widgets/basic.dart index 645411e2f0..544a6e15d9 100644 --- a/packages/flutter/lib/widgets/basic.dart +++ b/packages/flutter/lib/widgets/basic.dart @@ -476,6 +476,24 @@ class Flex extends MultiChildRenderObjectWrapper { } +class Row extends Flex { + Row(List children, { + Key key, + justifyContent: FlexJustifyContent.start, + alignItems: FlexAlignItems.center, + textBaseline + }) : super(children, key: key, direction: FlexDirection.horizontal, justifyContent: justifyContent, alignItems: alignItems); +} + +class Column extends Flex { + Column(List children, { + Key key, + justifyContent: FlexJustifyContent.start, + alignItems: FlexAlignItems.center, + textBaseline + }) : super(children, key: key, direction: FlexDirection.vertical, justifyContent: justifyContent, alignItems: alignItems); +} + class Flexible extends ParentDataNode { Flexible({ Key key, int flex: 1, Widget child }) : super(child, new FlexBoxParentData()..flex = flex, key: key); diff --git a/packages/flutter/lib/widgets/dialog.dart b/packages/flutter/lib/widgets/dialog.dart index a42f9fe6ca..2b9c8e9b22 100644 --- a/packages/flutter/lib/widgets/dialog.dart +++ b/packages/flutter/lib/widgets/dialog.dart @@ -80,7 +80,7 @@ class Dialog extends Component { if (actions != null) dialogBody.add(new Container( - child: new Flex(actions, + child: new Row(actions, justifyContent: FlexJustifyContent.end ) )); diff --git a/packages/flutter/lib/widgets/drawer_header.dart b/packages/flutter/lib/widgets/drawer_header.dart index 06079a489a..292271fcd9 100644 --- a/packages/flutter/lib/widgets/drawer_header.dart +++ b/packages/flutter/lib/widgets/drawer_header.dart @@ -30,7 +30,7 @@ class DrawerHeader extends Component { ), padding: const EdgeDims.only(bottom: 7.0), margin: const EdgeDims.only(bottom: 8.0), - child: new Flex([ + child: new Column([ new Flexible(child: new Container()), new Container( padding: const EdgeDims.symmetric(horizontal: 16.0), @@ -38,8 +38,7 @@ class DrawerHeader extends Component { style: Theme.of(this).text.body2, child: child ) - )], - direction: FlexDirection.vertical + )] ) ); } diff --git a/packages/flutter/lib/widgets/drawer_item.dart b/packages/flutter/lib/widgets/drawer_item.dart index d4b80b7ff4..919073977f 100644 --- a/packages/flutter/lib/widgets/drawer_item.dart +++ b/packages/flutter/lib/widgets/drawer_item.dart @@ -91,7 +91,7 @@ class DrawerItem extends ButtonBase { height: 48.0, decoration: new BoxDecoration(backgroundColor: _getBackgroundColor(themeData)), child: new InkWell( - child: new Flex(flexChildren) + child: new Row(flexChildren) ) ) ); diff --git a/packages/flutter/lib/widgets/snack_bar.dart b/packages/flutter/lib/widgets/snack_bar.dart index dc5b0e2480..d17f55233d 100644 --- a/packages/flutter/lib/widgets/snack_bar.dart +++ b/packages/flutter/lib/widgets/snack_bar.dart @@ -94,7 +94,7 @@ class SnackBar extends Component { margin: const EdgeDims.symmetric(horizontal: 24.0), child: new DefaultTextStyle( style: new TextStyle(color: Theme.of(this).accentColor), - child: new Flex(children) + child: new Row(children) ) ) ) diff --git a/packages/flutter/lib/widgets/tabs.dart b/packages/flutter/lib/widgets/tabs.dart index eb79e563f0..93ff72b6c5 100644 --- a/packages/flutter/lib/widgets/tabs.dart +++ b/packages/flutter/lib/widgets/tabs.dart @@ -346,7 +346,7 @@ class Tab extends Component { } else if (label.text == null) { labelContent = _buildLabelIcon(); } else { - labelContent = new Flex( + labelContent = new Column( [ new Container( child: _buildLabelIcon(), @@ -355,8 +355,7 @@ class Tab extends Component { _buildLabelText() ], justifyContent: FlexJustifyContent.center, - alignItems: FlexAlignItems.center, - direction: FlexDirection.vertical + alignItems: FlexAlignItems.center ); } @@ -609,8 +608,6 @@ class TabNavigator extends Component { ); Widget content = views[selectedIndex].buildContent(); - return new Flex([tabBar, new Flexible(child: content)], - direction: FlexDirection.vertical - ); + return new Column([tabBar, new Flexible(child: content)]); } } diff --git a/packages/flutter/lib/widgets/tool_bar.dart b/packages/flutter/lib/widgets/tool_bar.dart index 57ac48b11b..c14fca7beb 100644 --- a/packages/flutter/lib/widgets/tool_bar.dart +++ b/packages/flutter/lib/widgets/tool_bar.dart @@ -68,13 +68,12 @@ class ToolBar extends Component { Widget content = new Container( child: new DefaultTextStyle( style: sideStyle, - child: new Flex([ + child: new Column([ new Container( - child: new Flex(children), + child: new Row(children), height: kToolBarHeight ), ], - direction: FlexDirection.vertical, justifyContent: FlexJustifyContent.end ) ), diff --git a/packages/flutter/lib/widgets/widgets.md b/packages/flutter/lib/widgets/widgets.md index f32afa2215..872c8f700c 100644 --- a/packages/flutter/lib/widgets/widgets.md +++ b/packages/flutter/lib/widgets/widgets.md @@ -26,31 +26,40 @@ order to make them easier to use. Layout models ------------- - - `Flex` Layout a list of child widgets in either the horizontal or vertical - `direction`. The direction along which the widgets are laid out is called the - *main* direction and the other axis is called the *cross* direction. A `Flex` - widget sizes itself to the maximum size permitted by its parent. +There are two _flex_ layout models: - Each child of a `Flex` widget is either *flexible* or *inflexible*. The flex - first lays out its inflexible children and subtracts their total length along - the main direction to determine how much free space is available. The flex - then divides this free space among the flexible children in a ratio - determined by their `flex` properties. + - `Row`: Layout a list of child widgets in the horizontal direction. - The `alignItems` property determines how children are positioned in the cross - direction. The `justifyContent` property determines how the remaining free - space (if any) in the main direction is allocated. + - `Column': Layout a list of child widgets in the vertical direction. - - `Flexible` Mark this child as being flexible with the given `flex` ratio. +The direction along which the widgets are laid out is called the +*main* direction and the other axis is called the *cross* direction. +These flex widgets size themselves to the maximum size permitted by +its parent, unless that would be infinite size, in which case they +shrink-wrap their children. For details, see [flex.md](flex.md). - - `Stack` Layout a list of child widgets on top of each other from back to +Each child of a flex widget is either *flexible* or *inflexible*. +The flex first lays out its inflexible children and subtracts their +total length along the main direction to determine how much free space +is available. The flex then divides this free space among the flexible +children in a ratio determined by their `flex` properties. + +The `alignItems` property determines how children are positioned in +the cross direction. The `justifyContent` property determines how the +remaining free space (if any) in the main direction is allocated. + + - `Flexible`: Mark this child as being flexible with the given `flex` ratio. + +There is also a stacking layout model: + + - `Stack`: Layout a list of child widgets on top of each other from back to front. Each child of a `Stack` widget is either *positioned* or *non-positioned*. The stack sizes itself to the contain all the non-positioned children, which are located at the top-left corner of the stack. The *positioned* children are then located relative to the stack according to their `top`, `right`, `bottom`, and `left` properties. - - `Positioned` Mark this child as *positioned*. If the `top` property is + - `Positioned`: Mark this child as *positioned*. If the `top` property is non-null, the top edge of this child will be positioned `top` layout units from the top of the stack widget. The `right`, `bottom`, and `right` properties work analogously. Note that if the both the `top` and `bottom`