14 Flutter UI AutomaticKeepAliveClientMixin 保持页面状态

该文章介绍了如何在Flutter应用中实现Tab底部页面切换时保持页面状态。通过创建PageController初始化页面,使用PageView展示子页面,并在BottomNavigationBar的onTap事件中更新页面。此外,为了保持页面状态,文章提到了在子页面类中继承AutomaticKeepAliveClientMixin并重写wantKeepAlive方法。

一 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;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值