如何在Flutter中的Stack Widget中添加Multiple Floating按钮

Question

使用Stack Widget在另一个视图中查看一个视图.它工作正常.现在我需要在屏幕底部左右两侧添加两个浮动按钮.我在右侧添加了一个按钮,但我不知道如何在左侧添加浮动按钮.简单如下图.

任何帮助都会很明显

Answer 1

您可以使用Align小工具来定位你FloatingActionButton的在Stack.

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

一个按钮分别Alignment.bottomLeft对其alignment属性和另一个按钮使用常量Alignment.bottomRight.

Answer 2

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

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

Answer 3

  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),
        ),
      ],
    ),
  ),

Answer 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),),
        ),
      ],
    )

Answer 5

您也可以将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),
                )
              ],
            ),
          )

Answer 6

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 12),
    child: Row(
      children: [
        FloatingActionButton(
          onPressed: () {},
          backgroundColor: Colors.red,
          child: Icon(Icons.remove),
        ),
        Spacer(),
        FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ],
    ),
  ),
);