Flutter 基础控件顶部导航栏 TabBar

最新推荐文章于 2024-05-04 17:17:54 发布

路和远方

最新推荐文章于 2024-05-04 17:17:54 发布

阅读量679

点赞数

分类专栏： Flutter 文章标签：顶部导航栏 TabBar

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

版权

Flutter 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

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("第三页")
          ]
      ),
    );
  }
}