设置子控件间距
- 使用SizedBox保持固定间距
Row(
children: <Widget>[
Text("1"),
SizedBox(width: 50), // 50宽度
Text("2"),
],
)
image.png
- 使用Spacer填充尽可能大的空间
Row(
children: <Widget>[
Text("1"),
Spacer(), // use Spacer
Text("2"),
],
)
image.png
- 使用mainAxisAlignment对齐方式控制彼此间距
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //元素与空白互相间隔
children: <Widget>[
Text("1"),
Text("2"),
],
)
image.png
- 如果不用行的话，还可以使用Wrap并指定spacing
Wrap(
spacing: 100, // set spacing here
children: <Widget>[
Text("1"),
Text("2"),
],
)
image.png
- 同样是使用Wrap，设置spaceAround
Wrap(
alignment: WrapAlignment.spaceAround, // 空白包围住元素
children: <Widget>[
Text("1"),
Text("2"),
],
)
image.png
设置子控件分别左对齐和右对齐
- 使用spaceBetween对齐方式
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
new Text("left"),
new Text("right")
]
);
- 中间使用Expanded自动扩展
Row(
children: <Widget>[
FlutterLogo(),//左对齐
Expanded(child: SizedBox()),//自动扩展挤压
FlutterLogo(),//右对齐
],
);
- 使用Spacer自动填充
Row(
children: <Widget>[
FlutterLogo(),
Spacer(),
FlutterLogo(),
],
);
- 使用Flexible
Row(
children: <Widget>[
FlutterLogo(),
Flexible(fit: FlexFit.tight, child: SizedBox()),
FlutterLogo(),
],
);
image.png
