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

设置子控件间距

使用SizedBox保持固定间距

Row(

children: [

Text("1"),

SizedBox(width: 50), // 50宽度

Text("2"),

],

)

image.png

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

Row(

children: [

Text("1"),

Spacer(), // use Spacer

Text("2"),

],

)

image.png

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

Row(

mainAxisAlignment: MainAxisAlignment.spaceEvenly, //元素与空白互相间隔

children: [

Text("1"),

Text("2"),

],

)

image.png

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

Wrap(

spacing: 100, // set spacing here

children: [

Text("1"),

Text("2"),

],

)

image.png

同样是使用Wrap，设置spaceAround

Wrap(

alignment: WrapAlignment.spaceAround, // 空白包围住元素

children: [

Text("1"),

Text("2"),

],

)

image.png

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

使用spaceBetween对齐方式

new Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: [

new Text("left"),

new Text("right")

]

);

中间使用Expanded自动扩展

Row(

children: [

FlutterLogo(),//左对齐

Expanded(child: SizedBox()),//自动扩展挤压

FlutterLogo(),//右对齐

],

);

使用Spacer自动填充

Row(

children: [

FlutterLogo(),

Spacer(),

FlutterLogo(),

],

);

使用Flexible

Row(

children: [

FlutterLogo(),

Flexible(fit: FlexFit.tight, child: SizedBox()),

FlutterLogo(),

],

);

效果:

image.png