flutter中行(Row)子控件设置间距和左右对齐

设置子控件间距

1. 使用SizedBox保持固定间距

Row(
  children: <Widget>[
    Text("1"),
    SizedBox(width: 50), // 50宽度
    Text("2"),
  ],
)

image.png

2. 使用Spacer填充尽可能大的空间

Row(
  children: <Widget>[
    Text("1"),
    Spacer(), // use Spacer
    Text("2"),
  ],
)

image.png

3. 使用mainAxisAlignment对齐方式控制彼此间距

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly, //元素与空白互相间隔
  children: <Widget>[
    Text("1"),
    Text("2"),
  ],
)

image.png

4. 如果不用行的话，还可以使用Wrap并指定spacing

Wrap(
  spacing: 100, // set spacing here
  children: <Widget>[
    Text("1"),
    Text("2"),
  ],
)

image.png

5. 同样是使用Wrap，设置spaceAround

Wrap(
  alignment: WrapAlignment.spaceAround, // 空白包围住元素
  children: <Widget>[
    Text("1"),
    Text("2"),
  ],
)

image.png

设置子控件分别左对齐和右对齐

1. 使用spaceBetween对齐方式

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Text("left"),
    new Text("right")
  ]
);

2. 中间使用Expanded自动扩展

Row(
  children: <Widget>[
    FlutterLogo(),//左对齐
    Expanded(child: SizedBox()),//自动扩展挤压
    FlutterLogo(),//右对齐
  ],
);

3. 使用Spacer自动填充

Row(
  children: <Widget>[
    FlutterLogo(),
    Spacer(),
    FlutterLogo(),
  ],
);

4. 使用Flexible

Row(
  children: <Widget>[
    FlutterLogo(),
    Flexible(fit: FlexFit.tight, child: SizedBox()),
    FlutterLogo(),
  ],
);

image.png

原文参考1原文参考2