flutter 自定义TabBar 【top 0 级别】

在Flutter中，可以通过TabBar和TabBarView控件来实现自定义的顶部选项卡。以下是一个简单的自定义TabBar的示例代码：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Custom TabBar Example'),
            bottom: TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
              indicatorColor: Colors.blue,
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Tab 1 Content')),
              Center(child: Text('Tab 2 Content')),
              Center(child: Text('Tab 3 Content')),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们使用了DefaultTabController来管理选项卡的状态，TabBar定义了顶部的选项卡，TabBarView则是与TabBar关联的页面内容。通过indicatorColor属性，我们可以自定义指示器（即选中标签的下划线）的颜色。

如果你想要更进一步自定义TabBar的样式，可以使用TabBar的labelColor、unselectedLabelColor、labelStyle和unselectedLabelStyle等属性。此外，可以通过indicator属性完全自定义指示器的外观和行为。