如何在 Flutter 的 Stack Widget 中添加多个浮动按钮答案

【问题标题】：How to add Multiple Floating button in Stack Widget in Flutter如何在 Flutter 的 Stack Widget 中添加多个浮动按钮
【发布时间】：2018-11-23 03:45:46
【问题描述】：

使用Stack Widget 在另一个视图上颤动一个视图。它工作正常。现在我需要在屏幕底部的左侧和右侧添加两个浮动按钮。我在右侧添加了一个按钮，但我不知道如何在左侧添加浮动按钮。如下图所示。

任何帮助都会很明显

【问题讨论】：

标签： dart widget stack flutter

【解决方案1】：

您可以使用Align 小部件将您的FloatingActionButton's 定位在Stack 中。

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.bottomLeft,
      child: FloatingActionButton(...),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(...),
    ),
  ],
)

一个按钮使用常量Alignment.bottomLeft 作为其alignment 属性，另一个分别使用Alignment.bottomRight。

【讨论】：

但是我的左对齐超出了屏幕范围？
@KevinRED 此处相同
我必须确保为每个浮动操作按钮设置“heroTag: null”，根据这篇文章：medium.com/@kaendagger/test-cef30fcb5c54。否则会出现黑屏。

【解决方案2】：

您也可以使用类似这样的方法，将 location 用作 centerDocked，这样就不会出现奇怪的左对齐。

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Padding(
  padding: const EdgeInsets.all(8.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.navigate_before),
      ),
      FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.navigate_next),
      )
    ],
  ),
)

【讨论】：

这符合我的要求。我需要两个按钮都应该在中心。所以我改变了“mainAxisAlignment：MainAxisAlignment.center”。谢谢
目前还不清楚 floatActionButtonLocation 和 floatingActionButton 是什么，也不清楚它们在 OP 提到的 Stack 小部件中的位置。格式不应该表明什么。

【解决方案3】：

不要忘记为每个浮动操作按钮设置“heroTag: null”。否则会黑屏！

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.bottomLeft,
      child: FloatingActionButton(
                heroTag: null,
             ...),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(
                heroTag: null,
             ...),
    ),
  ],
)

【讨论】：

【解决方案4】：

floatingActionButton: Stack(
      children: <Widget>[
        Padding(padding: EdgeInsets.only(left:31),
        child: Align(
          alignment: Alignment.bottomLeft,
          child: FloatingActionButton(
            onPressed: picker,
            child: Icon(Icons.camera_alt),),
        ),),

        Align(
          alignment: Alignment.bottomRight,
          child: FloatingActionButton(
            onPressed: picker2,
          child: Icon(Icons.add_photo_alternate),),
        ),
      ],
    )

【讨论】：

这个答案的格式确实需要整理一下。还请考虑添加一些评论来描述您的答案，特别强调哪些部分解决了所描述的问题。

【解决方案5】：

  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  floatingActionButton: Container(
    padding: EdgeInsets.symmetric(vertical: 0, horizontal: 10.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        FloatingActionButton(
          onPressed: _someBackMethod,
          child: Icon(Icons.arrow_back),
        ),
        FloatingActionButton(
          onPressed: _someForwardMethod,
          child: Icon(Icons.arrow_forward),
        ),
      ],
    ),
  ),

【讨论】：

这是最好的答案！是否也可以在 BottomAppBar 中对按钮进行缺口处理？

【解决方案6】：

只需在 Scafold 中添加 row 作为 floatingActionButton 并设置位置 centerFloat

作为EX

Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      //store btn
      floatingActionButton: Container(
        child: Row(
          children: <Widget>[
            //add left Widget here with padding left
            Spacer(
              flex: 1,
            ),
            //add right Widget here with padding right
          ],
        ),
      ),
    );

【讨论】：

【解决方案7】：

如果这棵树发生子树中有多个英雄共享同一个标签。

floatingActionButton: Stack(
  children: <Widget>[
   Padding(
    padding: EdgeInsets.only(right: 70),
      child: Align(
        alignment: Alignment.bottomRight,
           child: FloatingActionButton.extended(
                  heroTag: "btn1",
                  // backgroundColor: Color(0XFF0D325E),
                  backgroundColor: Colors.red,
                  // child: Icon(Icons.refresh),
                  label: Text('Clear All Wifi'),
                  onPressed: () {
                    _sendMessage(all: 'Clear Wifi');
                  }),
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: FloatingActionButton(
                heroTag: "btn2",
                backgroundColor: Color(0XFF0D325E),
                child: Icon(Icons.refresh),
                onPressed: () {
                  _sendMessage(all: 'GETALLWIFI');
                }),
          ),
        ],
      ),

【讨论】：

【解决方案8】：

很聪明;)

Stack(
  children: [
    Container(...),
    Positioned(
      right: 15,
      bottom: 15,
      child: FloatingActionButton(
        heroTag: 'edit',
        onPressed: () {},
          child: Icon(Icons.edit),
      ),
      ),
      Positioned(
      left: 15,
      bottom: 15,
      child: FloatingActionButton(
        heroTag: 'delete',
        onPressed: () {},
          child: Icon(Icons.delete),
      ),
    ),
  ],
)

【讨论】：

请考虑在代码中添加描述，以便我们了解为什么它解决了操作的问题