設(shè)置子控件間距
- 使用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對(duì)齊方式控制彼此間距
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盏檐，設(shè)置spaceAround
Wrap(
alignment: WrapAlignment.spaceAround, // 空白包圍住元素
children: <Widget>[
Text("1"),
Text("2"),
],
)
image.png
設(shè)置子控件分別左對(duì)齊和右對(duì)齊
- 使用spaceBetween對(duì)齊方式
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
new Text("left"),
new Text("right")
]
);
- 中間使用Expanded自動(dòng)擴(kuò)展
Row(
children: <Widget>[
FlutterLogo(),//左對(duì)齊
Expanded(child: SizedBox()),//自動(dòng)擴(kuò)展擠壓
FlutterLogo(),//右對(duì)齊
],
);
- 使用Spacer自動(dòng)填充
Row(
children: <Widget>[
FlutterLogo(),
Spacer(),
FlutterLogo(),
],
);
- 使用Flexible
Row(
children: <Widget>[
FlutterLogo(),
Flexible(fit: FlexFit.tight, child: SizedBox()),
FlutterLogo(),
],
);
image.png
