如何在Flutter中居中列和行项？

Question

我有一个小的货币表格，没有使用网格，而是使用列和行。问题是行中的项目未像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>[
....
....
....

- user9239214

Answer 1

如果您希望整个表格居中，可以使用 Column 的 mainAxisAlignment 属性。 Column

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,

- Vinoth Kumar

Answer 2

如果您希望更精细地控制，请使用Spacer。

Column(
  children: <Widget>[
    Spacer(), // 1st spacer
    Widget1(),
    Widget2(),
    Spacer(), // 2nd spacer
  ],
)

你也可以使用 Spacer(flex:2) 来改变 flex。

- CopsOnRoad

Answer 3

如果您希望它像图片中那样，请使用

mainAxisAlignment: MainAxisAlignment.spaceEvenly

- Alexander Simonov