前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter组件——Tabbar

Flutter组件——Tabbar

作者头像
莫空9081
发布2023-10-16 10:11:08
3060
发布2023-10-16 10:11:08
举报
文章被收录于专栏:iOS 备忘录iOS 备忘录

[Flutter组件——Tabbar]

使用

Tabar使用,设置indicator的样式,长短,设置tab选中和未选中的样式,根据数组创建Tabbar。

代码如下:

代码语言:javascript
复制

import 'package:flutter/material.dart';

class TabbarDemo extends StatefulWidget {
  TabbarDemo({Key? key}) : super(key: key);

  _TabbarDemoState createState() => _TabbarDemoState();
}

class _TabbarDemoState extends State<TabbarDemo>
    with SingleTickerProviderStateMixin {
  var tabTextList = <String>[];
  var categoryTabs = <Tab>[
    Tab(
      text: "Home",
    ),
  ];

  var tempCategoryTabs = <Tab>[];

  @override
  void initState() {
    super.initState();
    tabTextList = ["Home", "New", "Hottest"];
    tabTextList.forEach((text) {
      tempCategoryTabs.add(
        Tab(
          text: text,
        ),
      );
    });
    setState(() {
      categoryTabs = tempCategoryTabs;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,
      length: categoryTabs.length,
      child: Scaffold(
        appBar: AppBar(title: Text("Tabbar")),
        body: Column(
          children: [
            TabBar(
              tabs: categoryTabs,
              isScrollable: true,
              labelStyle: TextStyle(
                fontSize: 24.0,
              ),
              labelColor: Colors.blueAccent,
              unselectedLabelStyle: TextStyle(fontSize: 16.0),
              unselectedLabelColor: Colors.grey,
              indicator: UnderlineTabIndicator(
                borderSide: BorderSide(color: Colors.orangeAccent, width: 3.0),
                insets: EdgeInsets.fromLTRB(20, 0, 20, 0),
              ),
            ),
            Expanded(
              child: TabBarView(
                children:
                    tabTextList.map((e) => Center(child: Text(e))).toList(),
              ),
            )
          ],
        ),
      ),
    );
  }
}

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-09-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • [Flutter组件——Tabbar]
    • 使用
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档