Flutter 如何在persistentFooterButtons中居中放置FloatingActionButton_Flutter_Flutter Layout

Flutter 如何在persistentFooterButtons中居中放置FloatingActionButton

flutter

Flutter 如何在persistentFooterButtons中居中放置FloatingActionButton,flutter,flutter-layout,Flutter,Flutter Layout,有人能告诉我如何将FloatingAction按钮居中放置在PersistentFooter按钮中吗。我错过了一些东西 List _footer() { return <Widget>[ new ButtonBar( children: <Widget>[ new Container( child: new Row( mainAxisAlignment: MainAxisAlignment.center,

有人能告诉我如何将FloatingAction按钮居中放置在PersistentFooter按钮中吗。我错过了一些东西

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

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

新容器装饰：新盒子装饰边界：新边界顶部：Divider.createBorderSidecontext，宽度：1.0， , , 儿童：新安全区孩子：新的纽扣儿童：新安全区上图：错，孩子：新纽扣吧子项：widget.persistentFooterButtons , , , , 你可以在这里看到，你的纽扣被纽扣杆包裹着。现在让我们看看下面的ButtonBar代码，默认对齐方式是MainAxisAlignment.end。我想这是遵循材料指南的

纽顿巴常数{ 关键点， this.alignment:MainAxisAlignment.end， this.mainAxisSize:mainAxisSize.max， this.children:const[]， }：超级键：键；颤振框架正在更新，但直到今天2018年6月8日，您不能使用persistentFooterButtons将按钮放在中间

解决方案：我建议你按照我的答案，把你的按钮放在屏幕的中间和底部

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

解决方案：我建议你按照我的答案，把你的按钮放在屏幕的中间和底部

可以通过使用floatingActionButtonLocation属性来对齐或定位floatingActionButton，但是它对于放置在persistentFooterButtons中的按钮没有用处

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

Flatter团队本可以提供persistentFooterButtonsAlignment属性，但如果没有它，可以使用下面的bottomNavigationBar hack实现类似的布局，前提是它还没有被用于其他东西

底部导航栏：列 mainAxisSize:mainAxisSize.min，儿童：[ 分隔器高度:0,， , 衬料填充：const EdgeInsets.all8.0，孩子：扁平按钮子：文本“按钮”，颜色：Theme.ofcontext.primaryColor， MaterialTargetSize:MaterialTargetSize.shrinkWrap，填充：EdgeInsets.Symmetricholizontal:16.0，vertical:12.0， textColor:Theme.ofcontext.colorScheme.background，按下：{}， , , ], , 可以使用floatingActionButtonLocation属性来对齐或定位floatingActionButton，但是它对于放置在persistentFooterButtons中的按钮没有用处

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

我也有同样的问题。我通过以下方法达到了预期的效果：

persistentFooterButtons: [ Container( width: MediaQuery.of(context).copyWith().size.width, child: Row( children: [ Expanded( child: FlatButton( child: Text('Your centered button'), onPressed: (){}, ), ) ], ), ) ] 我使用了一个flatbutton作为示例，但它也适用于floatinActionButtons

希望能有所帮助我也有同样的问题。我通过以下方法达到了预期的效果：

persistentFooterButtons: [ Container( width: MediaQuery.of(context).copyWith().size.width, child: Row( children: [ Expanded( child: FlatButton( child: Text('Your centered button'), onPressed: (){}, ), ) ], ), ) ] 我用了一个扁平按钮作为例子，但它是有效的 ks以及浮动不活动按钮

希望对您有所帮助

我发现一个简单的解决方案是将floatingAction按钮包装在一个与屏幕宽度相同的大小框中

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

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

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

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

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

找到了另一个解决方案。MaterialTheme_data.dart具有buttonBarTheme属性。您可以按如下方式对其进行修改：

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

并在MaterialApp小部件中指定：

MaterialApp(theme: myTheme)

找到了另一个解决方案。MaterialTheme_data.dart具有buttonBarTheme属性。您可以按如下方式对其进行修改：

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

并在MaterialApp小部件中指定：

MaterialApp(theme: myTheme)

对于任何尝试类似操作的人，您可以使用如下方式将其居中，而不是一个浮动操作按钮，一组，比方说两个提升按钮：

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

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

对于尝试类似操作的人，您可以像这样将其居中放置，而不是一个浮动操作按钮，一组，比方说两个提升按钮：

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

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

你能分享你想要实现的形象吗？你能分享你想要实现的形象吗？