在 Flutter 中的 Column 小部件中驻留的 Row 小部件中以 Flexible 包装的 TextField 居中答案

【问题标题】：Centering a TextField wrapped in Flexible in a Row widget that resides in a Column widget in Flutter在 Flutter 中的 Column 小部件中驻留的 Row 小部件中以 Flexible 包装的 TextField 居中
【发布时间】：2020-03-08 16:09:15
【问题描述】：

我正在尝试将位于 Colum 小部件中的 Row 小部件中的两个元素居中。此代码中的最后一行很有趣。我注意到，当我从该行中删除“Flexible(...)”小部件时，文本水平居中。否则，两个元素都会粘在屏幕的左侧。我希望这两个元素都保持在中心。我尝试将 Flexible 小部件包装到一个 Container 中，然后将该容器对齐到中间，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"),
        ),
      ),
    ));

【问题讨论】：

标签： android flutter

【解决方案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",
        ),
      ),
    ),
  ],
),

【讨论】：

谢谢！这实际上将棋子移向了中心，虽然不是完全居中，但已经足够了。