Question

我有一个登录页面，该页面具有三个字段和一个位于页面中心的按钮。在同一页面的底部，我需要垂直显示三个按钮。如何在Flutter中做到这一点？任何建议都将真正有用。谢谢。

Answer 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将填充空白

结果将是这样，

如果您的问题不同，请给我更多详细信息

Answer 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,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

如何在子视图中的多个位置放置子视图？

2 个答案: