AutomaticKeepAliveClientMixin无法与BottomNavigationBar页面一起使用

问题描述

我正在尝试仅保留一页，但是它不起作用.我有所有必需的东西.

I'm trying to keep only one page alive, but it doesn't work. I have all the required stuff.

• 添加了with AutomaticKeepAliveClientMixin<PageName>
• 在末尾添加了 @override bool get wantKeepAlive => true;
• 在内部版本中添加了super.build(context);

• added the with AutomaticKeepAliveClientMixin<PageName>
• added the @override bool get wantKeepAlive => true; at the end
• added the super.build(context); inside the build

这是带有AutomaticKeepAliveClientMixin的页面的代码:

Here's the code of the Page with the AutomaticKeepAliveClientMixin:

class MatchingPage extends StatefulWidget {
  //
  static final id = 'match';
  //
  @override
  _MatchingPageState createState() => _MatchingPageState();
}

class _MatchingPageState extends State<MatchingPage> with AutomaticKeepAliveClientMixin<MatchingPage> {

  @override
    void initState() {
      super.initState();
      print('MATCHING PAGE');
      print(User.uid);
    }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    setState(() {
      screenHeight = MediaQuery.of(context).size.height;
      screenWidth = MediaQuery.of(context).size.width;
    });
    return ModalProgressHUD(
      inAsyncCall: showSpinner,
      child: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle(
          statusBarColor: Colors.white.withOpacity(0.10),
          statusBarIconBrightness: Brightness.dark),
        child: Scaffold(
          backgroundColor: Colors.white,
          body: SafeArea(
            child: Text('MatchPage'),
          ),
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

这是具有BottomNavBar的Page的代码:

And here's the code of the Page that has the BottomNavBar:

List<Widget> _pages = [ProfilePage(), MatchingPage(), ChatsPage()];

class HomePage extends StatefulWidget {
  //
  static String id = 'home';
  //
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //
  int pageIndex = 1;
  //

  @override
  Widget build(BuildContext context) {
    return CustomScaffoldWithNavBar(
      statusBarColor: Colors.white,
      statusBarIconBrightness: Brightness.dark,
      backgroundColor: Colors.white,
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,
        currentIndex: pageIndex,
        selectedItemColor: Colors.balck,
        unselectedItemColor: _kAppIconGray,
        type: BottomNavigationBarType.fixed,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        items: [
          BottomNavigationBarItem(icon: Icon(...), title: Text('')),
          BottomNavigationBarItem(icon: Icon(...), title: Text('')),
          BottomNavigationBarItem(icon: Icon(...), title: Text('')),
        ],
        onTap: (int index) {
          setState(() => pageIndex = index);
        },
      ),
      child: _pages[pageIndex],
    );
  }
}

推荐答案

尝试使用 PageView . PageView 小部件使用PageStorage包装当前页面，并应保持页面状态

Try to use PageView. The PageView widget wraps the current pages with PageStorage, and should keep the page state

List<Widget> _pages = [ProfilePage(), MatchingPage(), ChatsPage()];

class HomePage extends StatefulWidget {
  //
  static String id = 'home';
  //
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //
  int pageIndex = 1;
  PageController _pageController;
  //
  @override
  void initState() {
    _pageController = PageController(initialPage: pageIndex, keepPage: true);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return CustomScaffoldWithNavBar(
      statusBarColor: Colors.white,
      statusBarIconBrightness: Brightness.dark,
      backgroundColor: Colors.white,
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,
        currentIndex: pageIndex,
        selectedItemColor: Colors.balck,
        unselectedItemColor: _kAppIconGray,
        type: BottomNavigationBarType.fixed,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        items: [
          BottomNavigationBarItem(icon: Icon(...), title: Text('')),
          BottomNavigationBarItem(icon: Icon(...), title: Text('')),
          BottomNavigationBarItem(icon: Icon(...), title: Text('')),
        ],
        onTap: (int index) {
          setState(() {
            pageIndex = index;
            _pageController.jumpToPage(index);
          } );
        },
      ),
      child: PageView(
                physics: NeverScrollableScrollPhysics(),
                controller: _pageController,
                children: _pages,
              ),
    );
  }
}

这篇关于AutomaticKeepAliveClientMixin无法与BottomNavigationBar页面一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！