如何禁用 CupertinoTabView 中的特定选项卡才能单击？

Question

我希望当用户未登录时，除了“Mon Compte”和“Annonces”选项卡将被激活之外，选项卡将被禁用。 有没有办法关闭 CupertinoTabView 中的特定选项卡？这样除非用户登录，否则无法单击它？或者如果用户未连接，我如何更改索引 欢迎任何帮助，谢谢！

class BottomMenu extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _BottomMenuState();
  }
}

class _BottomMenuState extends State<BottomMenu> {
   static int currentTab = 3; // to keep track of active tab index


 @override
  Widget build(BuildContext context) {


    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarBrightness: Brightness.light,
        systemNavigationBarColor: Colors.transparent,
        systemNavigationBarIconBrightness: Brightness.light,
      ),
    );

    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        currentIndex:  currentTab ,
        activeColor: Theme.of(context).primaryColor,
        backgroundColor: Theme.of(context).backgroundColor,
        inactiveColor: Theme.of(context).disabledColor,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text(
                "Matching"
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.dashboard),
            title:
            Text(
                "Annonces"
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(MenuIcon.favorite__1_),
            title:
            Text("Favoris"),
          ),
          BottomNavigationBarItem(
            icon: Icon(MenuIcon.user__1_),
            title: Text(
                "Mon Compte"
            ),
          ),
        ],
      ),
      tabBuilder: (context, index) {
        switch (index) {

          case 0:
            return CupertinoTabView(builder: (context) {


                return CupertinoPageScaffold(
                  child: Matching(),
                );

            }

            );
          case 1:
            return CupertinoTabView(builder: (context) {

              return CupertinoPageScaffold(
                child: Offers(),
              );
            });
          case 2:
            return CupertinoTabView(builder: (context) {

              return CupertinoPageScaffold(
                child: Favorites(),
              );
            });
          default: return CupertinoTabView(

              builder: (context) {

            return CupertinoPageScaffold(
              child: Login(),
            );
          });
        }
      },
    );

  }
}

Answer 1

我知道这个问题已经很老了，但我最近遇到了同样的问题，并注意到还没有解决方案。我是这样解决的：

您可以使用 CupertinoTabController 来控制 CupertinoTabBar 中的选项卡选择。通过侦听控制器中的更改，您可以阻止用户选择受限选项卡并将其保留在允许的选项卡上。

@override
void initState() {
  _tabController = CupertinoTabController(initialIndex: widget.initialIndex)
    ..addListener(() {
      setState(() {
        // `enabledIndexes` contains the list of allowed tab indexes
        if (!widget.enabledIndexes.contains(_tabController.index)) {
          // Redirect the user back to the initial allowed tab
          _tabController.index = widget.initialIndex;
        }
      });
    });
  super.initState();
}

说明：

• 当用户点击选项卡时，CupertinoTabController 会发出更改。
• 如果所选选项卡索引不在enabledIndexes列表中，选项卡控制器会将用户重定向回初始选项卡（widget.initialIndex）。
• 此重定向发生得很顺利，没有明显的 UI 跳转。

您还可以自定义此逻辑，通过将当前索引保存在状态中并将其用作后备选项卡，将用户重定向到先前选择的选项卡。

希望这对其他人有帮助！