Flutter Dart：底部对齐行小部件答案

【问题标题】：Flutter Dart: Allign Row Widgets at bottomFlutter Dart：底部对齐行小部件
【发布时间】：2021-08-26 05:43:31
【问题描述】：

我是 Flutter 的新手，我试图在底部连续显示两个按钮，我已经尝试了所有可能的解决方案，包括对齐、扩展等，但它没有工作.. 请如果有人可以提供帮助，因为我的按钮不在屏幕底部这是我的代码：

return Scaffold(
      body: SingleChildScrollView(
        child: Column(children: [
          Container(
           //code
          ),
          Container(
            //code
          ),
          Row(
            children: [
              ConstrainedBox(
                constraints: BoxConstraints.tightFor(width: 100, height: 80),
                child: ElevatedButton(
                  child: Text(
                    'Register',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 15.0,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                    primary: Colors.blue.shade900,
                  ),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => Intro()),
                    );
                  },
                ),
              ),
              ConstrainedBox(
                constraints: BoxConstraints.tightFor(width: 100, height: 80),
                child: ElevatedButton(
                  child: Text(
                    'Register',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 15.0,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                    primary: Colors.blue.shade900,
                  ),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => Intro()),
                    );
                  },
                ),
              ),
            ],
          ),
        ]),
      ),
    );

【问题讨论】：

你能提供一个你想要的布局示例吗？
请附上父小部件的代码。
@Hemal Done 请检查！
@BLKKKBVSIK 我希望我的两个按钮显示在我的屏幕底部，或者从底部往上一点

标签： flutter dart flutter-layout flutter-test

【解决方案1】：

这是您的更新代码，请检查

Scaffold(
          body: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                      //code
                      ),
                  Container(
                      //code
                      ),
                ],
              ),
            ),
            Row(
              children: [
                ConstrainedBox(
                  constraints: BoxConstraints.tightFor(width: 100, height: 80),
                  child: ElevatedButton(
                    child: Text(
                      'Register',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 15.0,
                      ),
                    ),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.blue.shade900,
                    ),
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => Intro()),
                      );
                    },
                  ),
                ),
                ConstrainedBox(
                  constraints: BoxConstraints.tightFor(width: 100, height: 80),
                  child: ElevatedButton(
                    child: Text(
                      'Register',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 15.0,
                      ),
                    ),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.blue.shade900,
                    ),
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => Intro()),
                      );
                    },
                  ),
                ),
              ],
            ),
          ]),
        ),

或

可以使用bottomSheet脚手架方法

Scaffold(
          bottomSheet: Padding(
        padding: const EdgeInsets.only(bottom: 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ConstrainedBox(
              constraints: BoxConstraints.tightFor(width: 100, height: 80),
              child: ElevatedButton(
                child: Text(
                  'Register',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 15.0,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue.shade900,
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Intro()),
                  );
                },
              ),
            ),
            SizedBox(width: 50),
            ConstrainedBox(
              constraints: BoxConstraints.tightFor(width: 100, height: 80),
              child: ElevatedButton(
                child: Text(
                  'Register',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 15.0,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue.shade900,
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Intro()),
                  );
                },
              ),
            ),
          ],
        ),
      ),
          body: SingleChildScrollView(
            child: Column(children: [
              Column(
                children: [
                  Container(
                      //code
                      ),
                  Container(
                      //code
                      ),
                ],
              ),
            ]),
          ),
        ),

【讨论】：

如果你想让这两个按钮持久化，那么我认为你必须使用脚手架的bottomSheet 小部件。
您已经在 MainAxisAlignment.SpaceBetween 的顶部添加了一个 Column，它如何将行推到底部？
我已经编辑了我的答案，请检查。两者都会工作。

【解决方案2】：

这是一个涉及Scaffold 小部件的bottomNavigationBar 属性的解决方案，您可以在其中放置任何Widget?（这里，我们使用您的Row）：

您可以使用提供的代码on this dartpad.

结果如下：

return Scaffold(
      bottomNavigationBar: Padding(
        padding: EdgeInsets.all(20),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ConstrainedBox(
              constraints: BoxConstraints.tightFor(width: 100, height: 80),
              child: ElevatedButton(
                child: Text(
                  'Register',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 15.0,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue.shade900,
                ),
                onPressed: () {},
              ),
            ),
            ConstrainedBox(
              constraints: BoxConstraints.tightFor(width: 100, height: 80),
              child: ElevatedButton(
                child: Text(
                  'Register',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 15.0,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue.shade900,
                ),
                onPressed: () {},
              ),
            ),
          ],
        ),
      ),
      body: SingleChildScrollView(
        child: Column(children: [
          Container(
              //code
              ),
          Container(
              //code
              ),
        ]),
      ),
    );

【讨论】：

【解决方案3】：

该行将匹配其子级的高度，因此由于所有按钮的高度相同，因此您的最后一行的高度为 80 (px)，因此对齐按钮的位置无关紧要。您可以将您的行包装在一个带有颜色的容器中以查看它。

正确的解决方案是通过将行高包装在不同的小部件（如列）中并将其拉伸到可用空间来给出行高。然后在行内你只需要CrossAxisAlignment.end。但这取决于您的布局。

例如：

Column(
  mainAxisSize: MainAxisSize.max,
  children: [
    Expanded(
      row: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
         /* Buttons here **/
      ]),
    )

  ]
)

您也可以参考the flutter layout guide 和CSS Flexbox，因为它几乎可以将 1-1 转换为颤振和

【讨论】：

它不起作用，请在我添加父小部件时检查我的代码