Flutter - 使用 PersistentTabView 时，appBar 也变得持久化

Question

我正在使用Persistent Bottom Navigation Bar package，但我遇到了问题。我有一个主页，其中包含 4 个选项卡（个人资料、收藏夹、搜索、流派）和所有这些选项卡的主应用栏。当我从这些选项卡之一（例如favorites_page）导航到内部页面（movie_details_page）时，它有自己的应用栏，标题为电影名称，来自home_page的应用栏也导航到movie_details_page。有没有办法避免这种情况？

这是我的主页脚手架：

Scaffold(
      appBar: AppBar(
        title: Text("MOVIEW"),
        elevation: 0,
      ),
      body: PersistentTabView(
        context,
        confineInSafeArea: true,
        screens: [
          GenresPage(),
          SearchPage(),
          ProfilePage(
            email: moview.email,
            password: moview.password,
            username: moview.username,
          ),
          FavoritesPage(),
        ],
        controller: _controller,
        items: [
          PersistentBottomNavBarItem(
            icon: Icon(Icons.grid_view),
            activeColorPrimary: Theme.of(context).accentColor,
            activeColorSecondary: Colors.white,
            inactiveColorPrimary: Colors.grey,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(Icons.search_rounded),
            activeColorPrimary: Theme.of(context).accentColor,
            activeColorSecondary: Colors.white,
            inactiveColorPrimary: Colors.grey,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(Icons.person),
            activeColorPrimary: Theme.of(context).accentColor,
            activeColorSecondary: Colors.white,
            inactiveColorPrimary: Colors.grey,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(Icons.favorite_border_rounded),
            activeColorPrimary: Theme.of(context).accentColor,
            activeColorSecondary: Colors.white,
            inactiveColorPrimary: Colors.grey,
          ),
        ],
        popActionScreens: PopActionScreensType.all,
        itemAnimationProperties: ItemAnimationProperties(
          duration: Duration(milliseconds: 450),
          curve: Curves.easeInOutQuart,
        ),
        screenTransitionAnimation: ScreenTransitionAnimation(
          animateTabTransition: true,
          duration: Duration(milliseconds: 450),
          curve: Curves.easeInOutQuart,
        ),
        backgroundColor: Theme.of(context).primaryColor,
        hideNavigationBarWhenKeyboardShows: true,
        navBarStyle: NavBarStyle.style3,
      ),
    );

这是主页中我最喜欢的页面标签：

这是movie_details_page：

PS：请不要评判我的 UI :)

这只是为了测试。

Answer 1

我从未使用过 Persistent Bottom Navigation Bar，但通常在控制器中存在一些类似selectedIndex 的概率来获取页面索引

class CustomWidgetExample extends StatefulWidget {
  final BuildContext menuScreenContext;
  CustomWidgetExample({Key key, this.menuScreenContext}) : super(key: key);

  @override
  _CustomWidgetExampleState createState() => _CustomWidgetExampleState();
}

class _CustomWidgetExampleState extends State<CustomWidgetExample> {
  PersistentTabController _controller;
  bool _hideNavBar;

  @override
  void initState() {
    super.initState();
    _controller = PersistentTabController(initialIndex: 0);
    _hideNavBar = false;
  }

  List<Widget> _buildScreens() {
    return [
      MainScreen(
        menuScreenContext: widget.menuScreenContext,
        hideStatus: _hideNavBar,
        onScreenHideButtonPressed: () {
          setState(() {
            _hideNavBar = !_hideNavBar;
          });
        },
      ),
      MainScreen(
        menuScreenContext: widget.menuScreenContext,
        hideStatus: _hideNavBar,
        onScreenHideButtonPressed: () {
          setState(() {
            _hideNavBar = !_hideNavBar;
          });
        },
      ),
      MainScreen(
        menuScreenContext: widget.menuScreenContext,
        hideStatus: _hideNavBar,
        onScreenHideButtonPressed: () {
          setState(() {
            _hideNavBar = !_hideNavBar;
          });
        },
      ),
      MainScreen(
        menuScreenContext: widget.menuScreenContext,
        hideStatus: _hideNavBar,
        onScreenHideButtonPressed: () {
          setState(() {
            _hideNavBar = !_hideNavBar;
          });
        },
      ),
      MainScreen(
        menuScreenContext: widget.menuScreenContext,
        hideStatus: _hideNavBar,
        onScreenHideButtonPressed: () {
          setState(() {
            _hideNavBar = !_hideNavBar;
          });
        },
      ),
    ];
  }

  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
        icon: Icon(Icons.home),
        title: "Home",
        activeColorPrimary: Colors.blue,
        inactiveColorPrimary: Colors.grey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.search),
        title: ("Search"),
        activeColorPrimary: Colors.teal,
        inactiveColorPrimary: Colors.grey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.add),
        title: ("Add"),
        activeColorPrimary: Colors.deepOrange,
        inactiveColorPrimary: Colors.grey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.settings),
        title: ("Settings"),
        activeColorPrimary: Colors.indigo,
        inactiveColorPrimary: Colors.grey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.settings),
        title: ("Settings"),
        activeColorPrimary: Colors.indigo,
        inactiveColorPrimary: Colors.grey,
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Navigation Bar Demo')),
      drawer: Drawer(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text('This is the Drawer'),
            ],
          ),
        ),
      ),
      body: PersistentTabView.custom(
        context,
        controller: _controller,
        screens: _buildScreens(),
        confineInSafeArea: true,
        itemCount: 5,
        handleAndroidBackButtonPress: true,
        stateManagement: true,
        hideNavigationBar: _hideNavBar,
        screenTransitionAnimation: ScreenTransitionAnimation(
          animateTabTransition: true,
          curve: Curves.ease,
          duration: Duration(milliseconds: 200),
        ),
        customWidget: CustomNavBarWidget(
          items: _navBarsItems(),
          onItemSelected: (index) {
            setState(() {
              _controller.index = index; // THIS IS CRITICAL!! Don't miss it!
// you can use here to change appbar title or rebuild widget
            });
          },
          selectedIndex: _controller.index,
        ),
      ),
    );
  }
}