Flutter TabBar

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

llayjun

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

阅读量105

点赞数

分类专栏： flutter

本文链接：https://blog.csdn.net/llayjun/article/details/109773251

版权

flutter 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Flutter TabBar

TabBar

class FirstTabBarDemo extends StatefulWidget {
  @override
  _FirstTabBarDemoState createState() => _FirstTabBarDemoState();
}

class _FirstTabBarDemoState extends State<FirstTabBarDemo> with SingleTickerProviderStateMixin{

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    // 长度要和展示部分的Tab数一致
    _tabController = TabController(vsync: this, length: 7);
  }

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 500,
      child: Scaffold(
        appBar: AppBar(title: Text('选项卡'), leading: Icon(Icons.arrow_back_ios), backgroundColor: Colors.green,
            bottom: TabBar(
              // 是否可以滚动
              isScrollable: true,
              controller: _tabController,
              tabs: [
                Tab(text: '科技', icon: Icon(Icons.camera),),
                Tab(text: '房产', icon: Icon(Icons.camera),),
                Tab(text: '体育', icon: Icon(Icons.camera),),
                Tab(text: '教育', icon: Icon(Icons.camera),),
                Tab(text: '娱乐', icon: Icon(Icons.camera),),
                Tab(text: '电影', icon: Icon(Icons.camera),),
                Tab(text: '生活', icon: Icon(Icons.camera),),
              ],
            ),),
        body: TabBarView(
            controller: _tabController,
            children: <Widget> [
              Text('选项卡1'),
              Text('选项卡2'),
              Text('选项卡3'),
              Text('选项卡4'),
              Text('选项卡5'),
              Text('选项卡6'),
              Text('选项卡7'),
            ]
        ),
      ),
    );
  }
}