[Flutter组件——Tabbar]

使用

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

代码如下：

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(),
              ),
            )
          ],
        ),
      ),
    );
  }
}

参考

赏

谢谢，一起进步

支付宝

微信