For reprint, please indicate the source: Flutter study notes (23) - Widget layout of multiple sub-elements (Rwo, Column, Stack, IndexedStack , Table, Wrap)
Previous combed Widget has a single child element layout, Widget today to sort out what has more sub-element layouts.
-
Row
Row common component properties are as follows:
mainAxisAlignment: spindle arrangement
crossAxisAlignment: minor axis arrangement
mainAxisSize: Spindle should occupy much space, max is the maximum value, min is the minimum
children: child elements, its essence is a list of List
For Row, a horizontal spindle, the vertical direction is the minor axis.
First look at the property values are what mainAxisAlignment
enum MainAxisAlignment { Start, // the child controls on the spindle start position End, // the child controls on the end of the spindle position Center, // the child controls in the middle of the spindle position spaceBetween, // the spindle position blank equally split, the sub-elements are arranged end to end without voids spaceAround, // the spindle average blank areas, each intermediate sub-equal spacing control, pitch control and last half of the sub-sub-control intermediate spacing spaceEvenly, // spindle blank areas were points, equidistant from the respective subspace }
Demo sample:
import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Children Demo', home: new Scaffold( appBar: AppBar( title: new Text('Children Demo'), ), body: new Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ new Text('11111111111'), new Text('22222222222'), new Text('33333333333') ], ), ), ); } }
-
Column
Column components common attributes are as follows:
mainAxisAlignment: spindle arrangement
crossAxisAlignment: minor axis arrangement
mainAxisSize: Spindle should occupy much space, max is the maximum value, min is the minimum
children: child elements, its essence is a list of List
Column for, the vertical direction of the spindle, the horizontal axis is time, and the use of similar Row
Demo sample:
import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Children Demo', home: new Scaffold( appBar: AppBar( title: new Text('Children Demo'), ), body: new Column( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ new Text('11111111111'), new Text('22222222222'), new Text('33333333333') ], ), ), ); } }
-
Stack
Stack/alignment：
Each sub-assembly is positioned either Stack components, or not positioning, positioning subassembly is wrapped Positioned assembly, Stack components itself contains all subcomponents are not positioned, positioning subassembly according alignment property (the default is the upper left corner). The subassembly is then positioned top, right, bottom, left properties place them on the Stack components.
Stack since it is allowed to stack child elements, then positioning the stacked position of the property value, what does?
alignment属性值：bottomCenter 底部中间位置、bottomLeft 底部左侧位置、bottomRight 底部右侧位置、center 正中间位置、centerLeft 中间居左位置、centerRight 中间居右位置、topCenter 上部居中位置、topLeft 上部居左位置、topRight 上部居右位置
Demo示例：
import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Children Demo', home: new Scaffold( appBar: AppBar( title: new Text('Children Demo'), ), body: new Center( child: new Stack( alignment: Alignment.centerLeft, children: <Widget>[ new Container( width: 200.0, height: 200.0, color: Colors.blue, ), new Text('这是一段文本') ], ), ), ), ); } }
Stack/Positioned：
上面的示例是通过系统提供的定位来给子元素进行堆叠，但是实际工作中，上面的几类属性值往往不能满足我们UI的需求，UI可能会要求子元素放在任何你想不到的位置，那么这时候就需要用到我们Positioned来进行定位了。
Positioned属性值：top 子元素相对顶部边界距离，left 子元素相对左侧边界距离，right 子元素相对右侧边界距离，bottom 子元素相对底部边界距离。
Demo示例：
import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Children Demo', home: new Scaffold( appBar: AppBar( title: new Text('Children Demo'), ), body: new Center( child: new Stack( children: <Widget>[ new Container( width: 200.0, height: 200.0, color: Colors.blue, ), new Positioned( top: 20.0, left: 50.0, child: new Text('这是一段文本') ) ], ), ), ), ); } }
-
IndexedStack
IndexedStack继承自Stack，它的作用是显示第index个child，其他的child都是不可见的，所以IndexedStack的尺寸永远是和最大的子节点尺寸一致。由于IndexedStack是继承自Stack，所以它只比Stack多了一个index属性，即对应child的索引。
Demo示例：
import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Children Demo', home: new Scaffold( appBar: AppBar( title: new Text('Children Demo'), ), body: new Center( child: new IndexedStack( index: 1, children: <Widget>[ new Container( width: 200.0, height: 200.0, color: Colors.blue, ), new Positioned( top: 20.0, left: 50.0, child: new Text('这是一段文本') ) ], ), ), ), ); } }
-
Table
Table表格布局，每一行的高度由其内容决定，每一列的宽度由columnWidths属性单独控制。
Table组件常见属性如下：
columnWidths：设置每一列的宽度。
defaultColumnWidth：默认的每一列宽度，默认情况下均分。
textDirection：文字方向。
border：表格边框。
defaultVerticalAlignment：默认垂直方向的对齐方式，top 放置在顶部、middle 垂直居中、bottom 放置在底部、baseline 文本baseline对齐、fill 充满整个cell
import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Children Demo', home: new Scaffold( appBar: AppBar( title: new Text('Children Demo'), ), body: new Table( defaultVerticalAlignment: TableCellVerticalAlignment.bottom, // 设置表格有多少列，并且指定列宽 columnWidths:const <int,TableColumnWidth> { 0:FixedColumnWidth(40.0), 1:FixedColumnWidth(40.0), 2:FixedColumnWidth(60.0), 3:FixedColumnWidth(60.0), 4:FixedColumnWidth(130.0), }, // 设置表格边框样式 border: TableBorder.all( color: Colors.blue, width: 2.0, style: BorderStyle.solid ), children: const <TableRow>[ // 添加第一行数据 TableRow( children: <Widget>[ SizedBox( child: Text('姓名'), height: 30, ), Text('性别'), Text('年龄'), Text('身高'), Text('备注'), ], ), // 添加第二行数据 TableRow( children: <Widget>[ Text('张三'), Text('男'), Text('20'), Text('186'), Text('学渣'), ], ), // 添加第三行数据 TableRow( children: <Widget>[ Text('李四'), Text('男'), Text('20'), Text('188'), Text('学酥'), ], ), // 添加第四行数据 TableRow( children: <Widget>[ Text('王五'), Text('男'), Text('21'), Text('177'), Text('学霸'), ], ), // 添加第五行数据 TableRow( children: <Widget>[ Text('小梅'), Text('女'), Text('22'), Text('170'), Text('学神，需要重点培养'), ], ), ], ), ), ); } }
-
Wrap
import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Children Demo', home: new Scaffold( appBar: AppBar( title: new Text('Children Demo'), ), body: new Wrap( spacing: 3.0, runSpacing: 20.0,//纵轴方向的间距 alignment: WrapAlignment.end,//纵轴方向的对其方式 children: <Widget>[ new Chip( avatar: CircleAvatar( backgroundColor: Colors.blue, child: new Text('A'), ), label: new Text('文本一'), ), new Chip( avatar: CircleAvatar( backgroundColor: Colors.blue, child: new Text('B'), ), label: new Text('文本二'), ), new Chip( avatar: CircleAvatar( backgroundColor: Colors.blue, child: new Text('C'), ), label: new Text('文本三'), ), new Chip( avatar: CircleAvatar( backgroundColor: Colors.blue, child: new Text('D'), ), label: new Text('文本四'), ), new Chip( avatar: CircleAvatar( backgroundColor: Colors.blue, child: new Text('E'), ), label: new Text('文本五'), ), ], ), ), ); } }
