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代码，DEFAULT对齐是 MainAxisAlignment.end 。我想这符合材料指南。

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

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

解决方案：我建议您按照我的回答here将按钮放在屏幕的中下方。

Answer 2

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

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

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

Answer 3

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

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

希望将来有人会发现它有用。

Answer 4

var testObj = {"a":"aa", "b":"bb", "c":"cc"}; for (var keys in testObj) { app.alert(keys) } for each (var keys in testObj) { // not working mobile either }可以通过使用floatingActionButton属性来对齐或定位，但是对于放置在floatingActionButtonLocation内的按钮没有用。

persistentFooterButtons包装在persistentFooterButtons内，我们没有任何方法可以覆盖ButtonBar的{{1}}默认对齐方式ButtonBar。

Flutter团队本来可以提供MainAxisAlignment.end属性，但如果没有该属性，则可以使用以下persistentFooterButtons骇客来实现类似的布局，如果该属性尚未用于其他用途。

persistentFooterButtonsAlignment

Answer 5

我有同样的问题。我达到了预期的结果：

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

我仅以flatbutton为例，但它与floatinActionButtons一起使用也很好。

希望有帮助

Answer 6

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

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

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

MaterialApp(theme: myTheme)

如何在persistentFooterButtons中居中FloatingActionButton

6 个答案: