[Flutter]：只有一个底部标签的 FAB

Question

我有一个 BottomAppBar 有一个 FloatingActionButton。但是，我只希望在一个特定屏幕中看到此按钮。在最好的情况下，我只想在用户单击该特定屏幕时添加此按钮。

我发现您可以像这样添加 FAB：

return Scaffold(
      extendBodyBehindAppBar: true,
      extendBody: true,
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ...
        },
        child:  const Icon(
          Icons.add_sharp,
          color: Color(0xFFFFFFFF),
        ),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: buildBottomNavigationBar(),
    );

但是，如您所见，此 Scaffold 由 bottomNavigationBar 中可以选择的所有屏幕共享。如何仅为特定屏幕添加 FAB？

我希望将 FAB 嵌入到 bottomNavigationBar 中，因此我不想在该特定屏幕上添加普通按钮。谢谢。

Answer 1

在您的特定选项卡中使用 Stack 并在底部添加 FAB :

示例：

    Stack(
children[
    
    Container(height: double.infinity,
    width: double.infinity) // for full screen 
    
    Position(
    bottom : 10,
    left: 150,
    right : 150,
    child: FloatingActionButton(
            onPressed: () {
              ...
            },
            child:  const Icon(
              Icons.add_sharp,
              color: Color(0xFFFFFFFF),
            ),
          )
    )
    
    ])

Answer 2

再次用脚手架包裹特定屏幕，并仅在该屏幕上使用 fab。

Answer 3

事实证明，解决方案其实很简单，我想多了。我有一个变量可以跟踪当前打开的屏幕。所以我只是将这个小逻辑添加到托管 bottomNavigationBar:

的母屏幕

if (_selectedIndex==1){
  // Other screen that needs the FAB
  return Scaffold(
    ...,
    floatingActionButton: FloatingActionButton(
        ....
    ),
    bottomNavigationBar: buildBottomNavigationBar(),
  );
}

return Scaffold(
  ...,
  bottomNavigationBar: buildBottomNavigationBar(),
);

[Flutter]：只有一个底部标签的 FAB

[Flutter]: FAB for only one bottom tab

dart

flutter

flutter-layout

flutter-bottomnavigation