如何在颤动中将子视图定位在多个位置？答案

【问题标题】：How to position the child views in multiple positions in flutter?如何在颤动中将子视图定位在多个位置？
【发布时间】：2019-11-19 14:28:56
【问题描述】：

我有一个登录页面，其中包含三个字段和一个位于页面中心的按钮。在同一页面的底部，我需要垂直显示三个按钮。我如何在 Flutter 中做到这一点？任何建议都会非常有帮助。在此先感谢。

【问题讨论】：

请贴出你试过的代码。

标签： flutter dart flutter-layout

【解决方案1】：

你的问题不清楚，我认为你需要在一个列的底部放置3个按钮。

return Scaffold(
      appBar: AppBar(),
      body: Container(
        padding:
            EdgeInsets.only(left: 20.0, right: 20.0, top: 25.0, bottom: 25.0),
        child: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(hintText: 'Text Field 1'),
            ),
            TextField(
              decoration: InputDecoration(hintText: 'Text Field 2'),
            ),
            TextField(
              decoration: InputDecoration(hintText: 'Text Field 3'),
            ),
            SizedBox(
              height: 25.0,
            ),
            MaterialButton(
              onPressed: () {},
              child: Text('Button'),
              color: Colors.blue,
              minWidth: double.infinity,
            ),
            Expanded(
              child: SizedBox(),
            ),
            MaterialButton(
              onPressed: () {},
              child: Text('Button 1'),
              color: Colors.blue,
              minWidth: double.infinity,
            ),
            MaterialButton(
              onPressed: () {},
              child: Text('Button 2'),
              color: Colors.blue,
              minWidth: double.infinity,
            ),
            MaterialButton(
              onPressed: () {},
              child: Text('Button 3'),
              color: Colors.blue,
              minWidth: double.infinity,
            ),
          ],
        ),
      ),
    );

Expanded 将填补空白

结果会像，

如果你的问题不同，请给我更多细节

【讨论】：

感谢您的回复。我想在页面中心显示前三个字段和一个按钮，并在页面底部显示一个带有三个按钮的列。我该怎么做？如果我对底部的一组按钮使用扩展，我的中心对齐字段将移动到页面的开头。
@Arvind 我已经添加了另一个答案尝试一下

【解决方案2】：

你必须使用Stack和Positioned来实现你想要的，查看下面的例子

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        padding:
            EdgeInsets.only(left: 20.0, right: 20.0, top: 25.0, bottom: 25.0),
        child: Stack(
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(hintText: 'Text Field 1'),
                ),
                TextField(
                  decoration: InputDecoration(hintText: 'Text Field 2'),
                ),
                TextField(
                  decoration: InputDecoration(hintText: 'Text Field 3'),
                ),
                SizedBox(
                  height: 25.0,
                ),
                MaterialButton(
                  onPressed: () {},
                  child: Text('Button'),
                  color: Colors.blue,
                  minWidth: double.infinity,
                ),
              ],
            ),
            Positioned(
              bottom: 0.0,
              left: 0.0,
              right: 0.0,
              child: Column(
                children: <Widget>[
                  MaterialButton(
                    onPressed: () {},
                    child: Text('Button 1'),
                    color: Colors.blue,
                    minWidth: double.infinity,
                  ),
                  MaterialButton(
                    onPressed: () {},
                    child: Text('Button 2'),
                    color: Colors.blue,
                    minWidth: double.infinity,
                  ),
                  MaterialButton(
                    onPressed: () {},
                    child: Text('Button 3'),
                    color: Colors.blue,
                    minWidth: double.infinity,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

【讨论】：

谢谢。它有助于。你拯救了我的一天。到目前为止，我一直在尝试这个没有定位的小部件。
对不起，我的声望不够。因此，即使我接受它，答案也不会显示为已接受。
@Arvind 没关系，伙计