Flutter之TabBar+TabBarView及保存页面状态

Flutter之TabBar+TabBarView及保存页面状态

// 主页面
class TabBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TabBarDemoState();
  }
}

class _TabBarDemoState extends State<TabBarDemo>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  List<String> titles = <String>["首页", "我的"];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: titles.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        // PreferredSize 设置appbar 的高度
        preferredSize: Size.fromHeight(48),
        child: AppBar(
          titleSpacing: 0.0, // AppBar边距
          title: TabBar(
            // 设置两个按钮
            tabs: <Tab>[
              Tab(
                text: titles[0],
              ),
              Tab(
                text: titles[1],
              ),
            ],
            isScrollable: false,
            // 是否可以滚动
//            indicator: BoxDecoration( // 自定义指示器
//              color: Colors.red,
//            ),
            indicatorPadding: EdgeInsets.zero,
            labelPadding: EdgeInsets.zero,
            // 文字的内边距
            labelColor: Colors.red,
            // 选中文字的颜色
            unselectedLabelColor: Colors.black,
            // 未选中文字的颜色
            controller: _tabController,
            // 指示器控制器
            indicatorColor: Colors.white,
            // 指示器的颜色
            indicatorSize: TabBarIndicatorSize.tab,
            //指示器样式
            indicatorWeight: 10.0, // 指示器的高度
          ),
        ),
      ),
      body: TabBarView(
        children: <Widget>[Text(titles[0]), ListDemo()],
        controller: _tabController,
      ),
    );
  }
}

class ListDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ListDemoState();
  }
}

class ListDemoState extends State<ListDemo> with AutomaticKeepAliveClientMixin{
  // AutomaticKeepAliveClientMixin 保存页面状态
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListView.builder(itemBuilder: (context, index) => Text("内容$index"),itemCount: 100,);
  }

  @override
  bool get wantKeepAlive => true;
}

效果图

保存页面状态
AutomaticKeepAliveClientMixin