Row、Column的介绍
Row:水平布局,在水平方向上排列子widget的列表。
Column:垂直布局,在垂直方向上排列子widget的列表。
说明:Row和Column是多子节点空间,他们不带滚动属性,如果超出了一行,在debug下面则会显示溢出的提示。
属性
-
mainAxisAlignment:主轴对齐方式,可以选择start、end、center、spaceBetween、spaceAround、spaceEvenly;
-
mainAxisSize:主轴大小,可以选择min、max;
-
crossAxisAlignment:横轴对齐方式;
-
textDirection:文字方向;
-
verticalDirection:垂直方向;
-
children:子控件。
Expanded
这个是Row/Column的内的小控件,可以用来实现权重的布局,这个很有用。它必须是Row、Column或Flex的后代,并且从Expanded到其封闭行、列或Flex的路径必须仅包含StatelessWidget或StatefulWidget(而不是其他类型的小部件,如RenderObjectWidget)。
实例
Container(
color: Colors.grey,
padding: EdgeInsets.only(top: 10, bottom: 10),
margin: EdgeInsets.only(top: 10),
child: Row(
children: [
Expanded(
child: Text(
'Deliver features faster',
textAlign: TextAlign.center,
),
flex: 1,
),
Expanded(
flex: 1,
child: Text(
'Craft beautiful UIs',
textAlign: TextAlign.center,
),
),
Expanded(
child: FlutterLogo(),
flex: 1,
),
Expanded(child: FlutterLogo(),
flex: 1,
),
FlutterLogo(),
Expanded(
child:FittedBox(
fit: BoxFit.contain,
child: FlutterLogo(),
)
),
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: FlutterLogo(),
),
)
],
),
),
这里举了一个Row的例子,Column的使用类似。
效果如图