Flutter 基础控件 顶部导航栏 TabBar

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/shuzhuchengfu/article/details/102370154

Flutter 基础控件 顶部导航栏 TabBar

/// 顶部导航栏 demo
class TabBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TabBarDemoState();
  }
}


/// 混入 SingleTickerProviderStateMixin 供 TabController 使用
class _TabBarDemoState extends State<TabBarDemo>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  // 初始化方法
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  // 销毁方法
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("保持页面状态"),
        // 顶部导航栏
        bottom: TabBar(
            controller: _tabController,
            tabs: [
              Tab(icon: Icon(Icons.home)),
              Tab(icon: Icon(Icons.description)),
              Tab(icon: Icon(Icons.menu))
            ]
        ),
      ),
      body: TabBarView(
          controller: _tabController,
          children: [
            Text("第一页"),
            Text("第二页"),
            Text("第三页")
          ]
      ),
    );
  }
}

效果