如何在 Flutter 中将列和行项居中？答案

【问题标题】：How to center column and row item in Flutter?如何在 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>[
....
....
....

【问题讨论】：

标签： grid flutter-layout

【解决方案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

【讨论】：