如何使用占据整行并放置在 view/screen 底部的 2 个按钮创建一行

Question

如何创建一排 w/2 按钮，这些按钮一起占据 parent（该行）的 space？我有时想将此行放在底部导航栏的正上方，有时我希望它取代底部导航栏。我可以只使用 Row 吗？我试过 persistentFooterButtons 和 Row 的 child 和 FractionallySizedBox 的 children 但它导致溢出错误并且按钮不占用persistentFooterButtons 的高度。必须有更好、更 straight-forward 的方法。刚学 Flutter

这是我想要放置在屏幕底部的粗略示例（按钮应具有相同的高度），其中底部导航栏将位于... and/or 正上方。 [![horizontallyAlignedButtonsWithWidthOfRow][1]][1]

下面的许多（不成功的尝试）中的一些： Wrap Buttons in Expand Attempt:

return Row(
      children: <Widget>[
        Expanded(
            child: ElevatedButton(
                onPressed: () {},
                style: TextButton.styleFrom(backgroundColor: Colors.blue),
                child: Text(
                  "Some Text #1",
                  style: TextStyle(color: Colors.white),
                ))),
        Expanded(
          child: ElevatedButton(
            onPressed: () {},
            style: TextButton.styleFrom(backgroundColor: Colors.green),
            child: Text("Some Text #2"),
          ),
        ),
      ],

Wrap Buttons in Expand Attempt Result: [![结果][2]][2] 可以看到，有不该有的白色space，按钮均匀spaced。我还尝试使用 ColoredBoxes 而不是按钮，因为我读到按钮的边距无法更改？

UPDATE 终于在@lava 解决方案的帮助下弄明白了。只是对其进行了一些调整以去除白色 space，等等

    return Container(
      padding: EdgeInsets.all(0.0),
      height: 50,
      child: Row(
        children: [
          Container(
            height: 50,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.blue, // background
                onPrimary: Colors.white,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
              ),
              onPressed: () {},
              child: Text("Button1"),
            ),
          ),
          Expanded(
            child: Container(
              height: 100,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                    primary: Colors.green, // background
                    onPrimary: Colors.white,
                    shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.zero)),
                onPressed: () {},
                child: Text("Button2"),
              ),
            ),
          )
        ],
      ),
    );
  }
}```

  [1]: https://i.stack.imgur.com/CydR4.png
  [2]: https://i.stack.imgur.com/1JifM.png

Answer 1

用 Expanded 包裹您的两个按钮，使它们具有相同的宽度并填充行。

Answer 2

您可以将 persistentFooterButtons 添加到 Scaffold 中，例如

Scaffold(
   persistentFooterButtons: [
      TextButton(),
      TextButton()
   ]
)

或在视图中：

Column(
   children: [
      Expanded(child: yourContent), // To use max height space 
      Row(
         children: [
            Expanded(child: TextButton()), 
            Expanded(child: TextButton()),,
         ] 
      ),
   ]
),

要提供不同的宽度，您可以将 flex 添加到 Expanded 或使用 Flexible 并添加 flex

Answer 3

 Container(
              padding: EdgeInsets.all(8.0),
              height: 100,
              child: Row(
                children: [
                  Expanded(
                      child: Container(
                    height: 100,
                    child: ElevatedButton(
                      onPressed: () {},
                      child: Text("Button1"),
                    ),
                  )),
                  Container(
                      padding: EdgeInsets.only(left: 8.0),
                      height: 100,
                      child:
                          ElevatedButton(onPressed: () {}, child: Text("Button2")))
                ],
              ),
            )

Container(
          padding: EdgeInsets.all(8.0),
          height: 100,
          child: Row(
            children: [
              Expanded(
                child: Container(
                  height: 100,
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("Button1"),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  padding: EdgeInsets.only(left: 8.0),
                  height: 100,
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("Button2"),
                  ),
                ),
              )
            ],
          ),
        )

完整代码

    import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MaterialApp(home: Mainwidget()));
}

class Mainwidget extends StatefulWidget {
  const Mainwidget({Key? key}) : super(key: key);

  @override
  _MainwidgetState createState() => _MainwidgetState();
}

class _MainwidgetState extends State<Mainwidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(8.0),
          height: 100,
          child: Row(
            children: [
              Expanded(
                child: Container(
                  height: 100,
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("Button1"),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  padding: EdgeInsets.only(left: 8.0),
                  height: 100,
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("Button2"),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  List<Widget> children() {
    return [
            Expanded(
                child: Container(
              height: 100,
              child: ElevatedButton(
                onPressed: () {},
                child: Text("Button1"),
              ),
            )),
            Container(
                padding: EdgeInsets.only(left: 8.0),
                height: 100,
                child:
                    ElevatedButton(onPressed: () {}, child: Text("Button2")))
          ];
  }
}

如何使用占据整行并放置在 view/screen 底部的 2 个按钮创建一行

How to create a row with 2 buttons that take up the entire row & placed at the bottom of the view/screen

dart

flutter

flutter-layout