我可以在 CupertinoTabBar 中停靠浮动操作按钮吗？

Question

我想知道是否有办法在 CupertinoTabBar 中停靠浮动操作按钮。我想得到如下图所示的结果

我的屏幕组织如下

• CupertinoTab 脚手架
  • 库比蒂诺标签视图
    • 库比蒂诺页脚手架
      • 库比蒂诺导航栏
      • 脚手架
  • 库比蒂诺标签栏

我尝试将以下代码添加到我的Scaffold 中，但结果不是我想要的。我理解问题是 TabBar 不在脚手架内，因此它没有停靠但是我想知道是否有办法将浮动按钮放在其他地方以获得我想要的结果

这是代码

child: Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton.extended(
          backgroundColor: kColorAccent,
          onPressed: () {},
          label: Text('To my Favorites!'),
          icon: Icon(Icons.favorite),
        ),

这是我得到的结果......

Answer 1

对于某些正在寻找代码片段的人，我将为您提供一个可行的示例。

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomeState();
  }
}

class HomeState extends State<Home> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          Navigator.of(context).push(
              // this can also be `MaterialPageRoute`
              CupertinoPageRoute(
                fullscreenDialog: true,
                // typical full screen dialog behavior
                builder: (_) => ModalPage(),
              )
          );
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: CupertinoTabBar(
        currentIndex: _index,
        onTap: (newIndex) {
          setState(() {
            _index = newIndex;
          });
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.today),
            title: Text("today"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.timeline),
            title: Text("stats"),
          ),
        ],
      ),
      /**
       * You can use switch here,
       * for the sake of brevity, I only used two tabs
       */
      body: _index == 0 ? Page1() : Page2(),
    );
  }
}

要点是

1. 使用scaffold。如果您使用CupertinoTabScaffold，那么您将无法使用FloatingActionbutton。

2. 您可以FAB使用 移动到任何位置floatingActionButtonLocation。

3. 您需要StatefulWidget或类似的东西来处理index变化。