如何在 Flutter 中将列和行项居中？
Posted
技术标签:
【中文标题】如何在 Flutter 中将列和行项居中？【英文标题】：How to center column and row item in Flutter? 【发布时间】：2018-11-25 00:44:36 【问题描述】：我有一张小货币表。我没有使用网格。我使用了列和行。问题是行中的项目没有显示在中心，如下面的 Excel 示例所示。 我必须使用什么小部件来使项目居中？
示例代码：
return new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Padding(
padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
child: new Icon(
Icons.crop_rotate,
color: Colors.white,
),
),
new Padding(
padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
child: new Text("STG", style: mainHeadTextStyle),
),
new Padding(
padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
child: new Text("EUR", style: mainHeadTextStyle),
),
new Padding(
padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
child: new Text("USD", style: mainHeadTextStyle),
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
....
....
....
【问题讨论】：
【参考方案1】：这样使用
在列中
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [...
.
]
在行中
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [...
.
]
【讨论】：
【参考方案2】：如果您希望整个表为 Centered，请使用 Column 的 mainAxisAlignment 属性。
列
mainAxisAlignment: MainAxisAlignment.center //Center Column contents vertically,
crossAxisAlignment: CrossAxisAlignment.center //Center Column contents horizontally,
行
mainAxisAlignment: MainAxisAlignment.center //Center Row contents horizontally,
crossAxisAlignment: CrossAxisAlignment.center //Center Row contents vertically,
【讨论】：
【参考方案3】：如果您想要精细控制，可以使用Spacer。
Column(
children: <Widget>[
Spacer(), // 1st spacer
Widget1(),
Widget2(),
Spacer(), // 2nd spacer
],
)
您也可以使用Spacer(flex:2) 更改flex
【讨论】：
【参考方案4】：如果你希望它像图片中一样，请使用
mainAxisAlignment: MainAxisAlignment.spaceEvenly
【讨论】：
以上是关于如何在 Flutter 中将列和行项居中？的主要内容，如果未能解决你的问题，请参考以下文章