Flutter-如何在一行中的特定位置对齐按钮？

Question

我在屏幕底部的一行中有两个按钮。我想将第一个按钮保留在中间，第二个按钮保留在末尾。我怎样才能做到这一点？

这是我的代码

 new Container
                (
                  child:Row(
                    children:<Widget>[




                    new RaisedButton(
                      color: Colors.red,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      onPressed: takescrshot,
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          'Next',
                          style:
                          TextStyle(fontSize: 23, color: Colors.white),
                        ),
                      ),
                    ),

                     new FloatingActionButton.extended(
                        onPressed: () {
                          // Add your onPressed code here!
                        },
                        label: Text('options'),
                        icon: Icon(Icons.menu),
                        backgroundColor: Colors.pink,
                      ),
              ])
        )

有人可以指导我吗？

Answer 1

您需要了解如何Column定位Row其子项，以及如何正确使用Flexible小部件以使每个子项处于您想要的位置。

你有一个Row有两个按钮作为子按钮（一个RaisedButton和一个FloatingActionButton），但它们不被限制在任何位置，所以它们都放在Row左侧对齐的开始处。

1. 首先，让我们使其适合所有可用的水平空间。为此，您需要用Expanded.

2. 现在，您可能有两个拉伸按钮，占用了 50/50 的空间，但看起来很丑。如果是这样，您可能需要用 包裹每个按钮，Center以便它们在每个 的空间内居中Expanded。如果没有，请跳过此步骤。现在看起来好多了，对吧？

3. 现在，我们有 2 个按钮均匀地居中在屏幕上，并且有所有可用空间，但我们希望确保一个按钮居中，另一个按钮位于右侧，无论屏幕大小如何。为此，我们将 a 添加const Spacer()为第一个子级，Row因此它实际上与所有其他 2 个兄弟级共享“不可见”空间；

现在，您应该已经拥有了您想要的东西，并且可以完美地适应所有屏幕尺寸。

长话短说：

Container(
        child: Row(
      children: <Widget>[
        const Spacer(),
        Expanded(
          child: Center(
            child: RaisedButton(
              color: Colors.red,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
              onPressed: takescrshot,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'Next',
                  style: TextStyle(fontSize: 23, color: Colors.white),
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Center(
            child: FloatingActionButton.extended(
              onPressed: () {
                // Add your onPressed code here!
              },
              label: Text('options'),
              icon: Icon(Icons.menu),
              backgroundColor: Colors.pink,
            ),
          ),
        ),
      ],
    ));