android - 在位于 Flutter 的 Column 小部件中的 Row 小部件中将 TextField 包裹在 Flexible 中居中

Question

我试图将位于 Colum 小部件中的 Row 小部件中的两个元素居中。此代码中的最后一行很有趣。我注意到，当我从该行中删除“Flexible(...)”小部件时，文本会水平居中。否则，两个元素都会粘在屏幕的左侧。我希望这两个元素都位于中心。我尝试将 Flexible 小部件包装到一个容器中，然后将该容器与中间对齐，Flutter 不喜欢这样。

我正在寻找最后一行中的两个小部件水平居中

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Example 1"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  child: Center(
                    child: ButtonBar(
                      children: <Widget>[
                        RaisedButton(
                          child: Text("Button"),
                        ),
                        RaisedButton(
                          child: Text("Button"),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Container(
                  child: Center(
                    child: ButtonBar(
                      children: <Widget>[
                        RaisedButton(
                          child: Text("Button"),
                        ),
                        RaisedButton(
                          child: Text("Button"),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("Email:"),
                Flexible(
                    child: TextField(
                  textAlign: TextAlign.justify,
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: "Enter Email",
                  ),)),
              ],
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          child: Text("clock"),
        ),
      ),
    ));

Answer 1

Row Widget 将尝试使用尽可能多的空间 (https://api.flutter.dev/flutter/widgets/Row-class.html)如果将子元素包裹在 Flex 中并使主轴居中，您将看到子元素居中

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Flexible(
      flex: 1,
      child: Text("Email:"),
    ),
    Flexible(
      flex: 1,
      child: TextField(
        textAlign: TextAlign.justify,
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: "Enter Email",
        ),
      ),
    ),
  ],
),