14 Flutter UI AutomaticKeepAliveClientMixin 保持页面状态

一 Tab 底部页面切换的时候 保持页面状态

Step1 在Tab 页面创建页面控制器,

//创建页面控制器
 var _pageController; 
@override void initState(){
 //页面控制器初始化 
_pageController = new PageController(initialPage : _currentIndex);
 super.initState();
 }

Step 2 加载PageView

 body: PageView(
        controller: this._pageController,
        children: [HomePage(), CategoryPage(), CartPage(), UserPage()],
      ),

Step3 tabbar底部按钮切换的时候

bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIdx,
        // 切换按钮
        onTap: (idx) {
          setState(() {
            _selectedIdx = idx;
            this._pageController!.jumpToPage(idx);
          });
        },

Step4 在其他类继承AutomaticKeepAliveClientMixin

@override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

你可能感兴趣的:(Flutter,UI,flutter)