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努力定位它的 child 以及如何正确使用Flexible小部件使每个子位置都随心所欲。
您有一个 Row那里有两个按钮作为子项(一个 RaisedButton 和一个 FloatingActionButton )，但它们不限于任何位置，因此它们都放在 Row 的开头在左侧对齐。

首先，让我们让它都适合水平的所有可用空间。为此，您需要用 Expanded 包裹每个按钮。 .

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

现在，我们有 2 个按钮在屏幕上均匀居中，并提供所有可用空间，但无论屏幕大小如何，我们都希望确保一个居中，另一个在右侧。为此，我们添加了 const Spacer()作为 Row 的第一个 child 所以它实际上与所有其他 2 个 sibling 共享“不可见”空间；

现在，您应该拥有您正在寻找的东西，并且可以在所有屏幕尺寸下完美运行。
TL;DR:

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