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

【问题标题】：Flutter- How to align buttons at particular positions in a row?Flutter-如何在一行中的特定位置对齐按钮？
【发布时间】：2020-11-09 17:21:23
【问题描述】：

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

这是我的代码

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

谁能指导我？

【问题讨论】：

标签： flutter button dart flutter-layout

【解决方案1】：

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

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

首先，让我们让它都适合水平的所有可用空间。为此，您需要用Expanded 包裹每个按钮。
现在，您可能有两个拉伸按钮，占用了 50/50 的空间，但看起来很难看。如果是这样，您可能希望用Center 包裹每个按钮，以便它们在每个Expanded 的空间内居中。如果没有，请跳过此步骤。现在看起来好多了，对吧？
现在，我们有 2 个按钮在屏幕上均匀居中，并提供所有可用空间，但无论屏幕大小如何，我们都希望确保一个居中而另一个在右侧。为此，我们将const Spacer() 添加为Row 的第一个孩子，因此它实际上与所有其他2 个兄弟姐妹共享“不可见”空间；

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

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

【讨论】：

【解决方案2】：

像这样使用 Spacer 小部件：

 new Container
                (
                  child:Row(
                    children:<Widget>[ 
                    Spacer(),
                    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),
                        ),
                      ),
                    ),
                    Spacer(),
                     new FloatingActionButton.extended(
                        onPressed: () {
                          // Add your onPressed code here!
                        },
                        label: Text('options'),
                        icon: Icon(Icons.menu),
                        backgroundColor: Colors.pink,
                      ),
              ])
        )

【讨论】：

【解决方案3】：

您可以通过在行开始处伪装同一个子元素（如选项按钮）并使其不可见来实现此目的。还需要像这样将Row的maninAxisAlignment设置为spaceBetween..

Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          new Opacity(
            opacity: 0,
            child: FloatingActionButton.extended(
              onPressed: null,
              label: Text('options'),
              icon: Icon(Icons.menu),
              backgroundColor: Colors.pink,
            ),
          ),
          new RaisedButton(
            color: Colors.red,
            shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            onPressed: () {},
            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,
          ),
        ],
      ),
    )

【讨论】：