如何使 FloatingActionButton 在 persistentFooterButtons 中居中

Question

有人可以向我解释一下如何将 FloatingActionButton 置于 persistentFooterButtons 中。我在这里遗漏了一些东西。

  List _footer() {
return <Widget>[
  new ButtonBar(
    children: <Widget>[
      new Container(
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new FloatingActionButton(
              backgroundColor: Colors.redAccent,
              onPressed: () => {},
            ),
          ],
        ),
      )
    ],
  )
];}

===

 @override  Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: new Text("Question"),
  ),
  body: _body(),
  persistentFooterButtons: _footer(),
);  }

Answer 1

我看了下Scaffold的代码，下面是persistentFooterButtons是如何创建的：

new Container(
  decoration: new BoxDecoration(
    border: new Border(
      top: Divider.createBorderSide(context, width: 1.0),
    ),
  ),
  child: new SafeArea(
    child: new ButtonTheme.bar(
      child: new SafeArea(
        top: false,
        child: new ButtonBar(
          children: widget.persistentFooterButtons
        ),
      ),
    ),
  ),
)

你可以在这里看到，你的按钮被一个 ButtonBar 包裹着。现在让我们看看下面的 ButtonBar 代码，默认对齐方式是 MainAxisAlignment.end。我猜这符合 Material 指南。

const ButtonBar({
  Key key,
  this.alignment: MainAxisAlignment.end,
  this.mainAxisSize: MainAxisSize.max,
  this.children: const <Widget>[],
}) : super(key: key);

Flutter 框架正在更新中，但直到今天（2018 年6 月8 日），您无法使用persistentFooterButtons 将按钮置于中心。

解决方法：我建议你按照我的回答将你的按钮放在屏幕的中央底部。

Answer 2

floatingActionButton可以利用floatingActionButtonLocation属性来对齐或定位，但是对于放在persistentFooterButtons.

里面的按钮没有用

persistentFooterButtons 包裹在 ButtonBar 中，我们没有任何方法可以覆盖 persistentFooterButtons 的 MainAxisAlignment.end 默认对齐方式 ButtonBar。

Flutter 团队本可以提供 persistentFooterButtonsAlignment 属性，但如果没有它，可以使用以下 bottomNavigationBar hack 实现类似的布局，如果它尚未用于其他用途的话。

bottomNavigationBar: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
        Divider(
            height: 0,
        ),
        Padding(
            padding: const EdgeInsets.all(8.0),
            child: FlatButton(
                child: Text('Button'),
                color: Theme.of(context).primaryColor,
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
                textColor: Theme.of(context).colorScheme.background,
                onPressed: () {},
            ),
        ),
    ],
),

Answer 3

我也遇到了同样的问题。我用这个达到了预期的结果：

persistentFooterButtons: [
        Container(
          width: MediaQuery.of(context).copyWith().size.width,
          child: Row(
            children: [
              Expanded(
                child: FlatButton(
                  child: Text('Your centered button'),
                  onPressed: (){},
                ),
              )
            ],
          ),
        )
      ]

我使用了一个平面按钮作为示例，但它与 floatinActionButtons 一起工作得很好。

希望对您有所帮助

Answer 4

我发现一个简单的解决方案是将 FloatingActionButton 包裹在一个与屏幕宽度相同的框中。

      persistentFooterButtons: <Widget>[
        SizedBox(
          width: MediaQuery.of(context).size.width,
          child: FloatingActionButton(

            onPressed: () {
              print('Close pressed');
            },
            child: Text('Close'),
          )
        )
      ],

Answer 5

找到了另一个解决方案。 MaterialTheme (theme_data.dart) 具有 buttonBarTheme 属性。您可以像下面这样修改它：

var myTheme = ThemeData(
    buttonBarTheme: ButtonBarThemeData(
            alignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
    ),
)

并在您的 MaterialApp 小部件中指定它：

MaterialApp(theme: myTheme)

Answer 6

对于尝试类似操作但不是 FloatingActionButton 的任何人，一组，比方说两个 ElevatedButton，您可以像这样将它们居中：

...
persistentFooterButtons: [
  Center(
    child: Column(
      children: [
        ElevatedButton(), //Button 1
        SizedBox(),
        ElevatedButton(), //Button 2
      ],
    ),
  ),
],
...

希望以后有人会发现它有用。

如何使 FloatingActionButton 在 persistentFooterButtons 中居中

how to center FloatingActionButton inside the persistentFooterButtons

flutter

flutter-layout