如何在 Flutter 中水平居中 FloatingActionButton？答案

【问题标题】：How to center FloatingActionButton horizontally in Flutter?如何在 Flutter 中水平居中 FloatingActionButton？
【发布时间】：2020-08-10 03:41:44
【问题描述】：

我想将FloatingActionButton 在屏幕上水平居中，但我似乎没有找到任何关于如何做到这一点的资源.. 这是我的颤振代码..

  void main() => runApp(MaterialApp(
  home: Home()
));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('My App'),
          centerTitle: true,
          backgroundColor: Colors.brown[700],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Add your onPressed code here!
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.brown[700],
        ),
        backgroundColor: Colors.white70
    );
  }
}

【问题讨论】：

请试试这个stackoverflow.com/questions/44713501/…

标签： android flutter dart

【解决方案1】：

将此添加到您的Scaffold：

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat

【讨论】：

@ZulfiqarAli 欢迎您...如果它对您有帮助，您也可以接受答案，以便其他人也可以使用它
这是正确的答案！

【解决方案2】：

试试这个：

floatingActionButton: Center(
          child: FloatingActionButton(
            onPressed: () {
              // Add your onPressed code here!
            },
            child: Icon(Icons.add),
            backgroundColor: Colors.brown[700],
          ),
        ),

结果

【讨论】：

我知道如何做到这一点，但这样FloatingActionButton 会在垂直和水平方向居中，我只是想将它水平向下居中，floatingActionButtonLocation 属性对我有用。

【解决方案3】：

这是 Scaffold 的 floatingActionButton 属性。您可以将他放入主体中，然后使用中心、列或行小部件将其居中。否则，只需使用 mainaxisalignment 将 FloatingActionButton 包装在一行中：MainaxisAlignment.center。您可以将许多小部件分配给脚手架的 floatingActionButton 属性，而不仅仅是 FloatingActionButtons。希望这会有所帮助。

编辑：它看起来像这样：

Scaffold(
    floatingActionButton: Row(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
             FloatingActionButton()
          ],
    ),
),

【讨论】：

谢谢，我也试试这个。