如何使用 Flutter 将 2 个浮动操作按钮固定在某些特定位置？

Question

我正在用 Flutter 开发一个应用程序，我想在主屏幕上有 2 个 FAB。我已经完成的 BottomAppBar 中的一个。

Scaffold(
    appBard: AppBar(title: Text("My App")),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: ()=>{}
    ),
    bottomNavigationBar: BottomAppBar(
        color: Style.darkPrimaryColor,
        shape: CircularNotchedRectangle(),
        child: Container( 
            height: 50,
            child: Row(
                 children: <Widget>[]
            ),
        ),
    ),
)

我想将第二个 FAB 定位并固定在屏幕的右下角，加上居中的 FAB，如下图所示：

有什么办法可以实现吗？

Answer 1

试试这个：

  Scaffold(
    appBar: AppBar(title: Text("My App")),
    body: Stack(
        children: [
          Positioned(
            bottom: 16,
            right: 16,
            child: FloatingActionButton(
                heroTag: null,
                child: Icon(Icons.add),
                onPressed: ()=>{}
            ),
          ),
        ],
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: ()=>{}
    ),
    bottomNavigationBar: BottomAppBar(
        color: Colors.black54,
        shape: CircularNotchedRectangle(),
        child: Container( 
            height: 50,
            child: Row(
                 children: <Widget>[

                 ]
               ),
            ),
        ),
    )

Answer 2

我认为脚手架没有任何内置的方法可以做到这一点，但是使用堆栈作为脚手架主体应该很容易，因为您可以在任何地方添加浮动操作按钮。但是，如果您有两个，则需要更改其中一个上的 hero 标签以避免在移动 to/from 该页面时出错。

Scaffold(
  appBar: AppBar(title: Text("My App")),
  floatingActionButtonLocation: 
    FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: ()=>{}
  ),
  bottomNavigationBar: BottomAppBar(
    color: Style.darkPrimaryColor,
    shape: CircularNotchedRectangle(),
    child: Container( 
      height: 50,
      child: Row(
        children: <Widget>[]
      ),
    ),
  ),
  body: Stack(
    alignment: Alignment.bottomRight,
      children: [
        Container(
          child: //Use this as if it were the body
        ),
        //Setup the position however you like
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: FloatingActionButton(
            heroTag: null, //Must be null to avoid hero animation errors
            child: Icon(Icons.add),
            onPressed: () => {},
          ),
        ),
      ],
    ),
 )

如何使用 Flutter 将 2 个浮动操作按钮固定在某些特定位置？

How to have 2 Floating Action Buttons fixed in some specific positions with Flutter?

dart

floating-action-button

flutter