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

Question

我有小货币表.我没有使用网格.我使用列和行.问题是行中的项目没有显示在中心,如下面的excel示例所示.我必须使用什么小部件才能使项目居中？有什么帮助吗？

The Example codes:
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>[
....
....
....

Answer 1

如果你想要整个表Centered,使用的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,

Answer 2

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

mainAxisAlignment: MainAxisAlignment.spaceEvenly

Answer 3

Spacer如果你想要细粒度控制，你可以使用。

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

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