将包装在Flexible中的TextField放在Flutter的Column小部件中的Row小部件中居中

问题描述 投票:0回答:1

我正在尝试将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个回答
0
投票

行(

[crossAxisAlignment:CrossAxisAlignment.center,

          children: <Widget>[
            Text("Email:"),
            Flexible(
                child: TextField(
              textAlign: TextAlign.justify,
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: "Enter Email",
              ),)),
          ],
        ),
      ],
    ),
© www.soinside.com 2019 - 2024. All rights reserved.