Flutter 之页面状态保持

一般情况下,我们使用tab切换的时候希望操作完毕之后,能够记住上个页面的状态,

但是使用Flutter的BottomNavigationBar的

时候默认是不记录页面状态的,即切换页面会导致重新加载。

这对我们来说很痛苦,而且非常的浪费资源

如果要想我们的页面在切换完毕之后记录之前的状态。需要一下几个步骤:

1、在包含BottomNavigationBar的页面中,body应该返回IndexedStack或者Pageview


@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: mainBgColor,
    appBar: AppBar(
      elevation: 0.0,
      title: Text('Hello Flutter'),
    ),
    body: IndexedStack(
      index: _currentIndex,
      children: _tabBodies,
    ),
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _currentIndex,
      type: BottomNavigationBarType.fixed,
      backgroundColor: Colors.white,
      selectedItemColor: bottomTabSelectColor,
      items: _bottomTabs,
      onTap: setTabSelect,
    ),
  );
}

 

 

 

2、想要保持状态的页面必须是StatefullWidget,并且在相应的页面的state中混入AutomaticKeepAliveClientMixin类

重写wantKeepAlive方法并返回true

 

class MemberPage extends StatefulWidget {
  @override
  _MemberPageState createState() => _MemberPageState();
}
class _MemberPageState extends State with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    print('初始化${this.widget.toStringShort()}');
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('个人中心'),
      ),
    );
  }
  @override
  bool get wantKeepAlive => true;
}
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注