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标签，以避免在从该页面移入或移出该页面时出错。

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个浮动操作按钮固定在某些特定位置？

2 个答案: