flutter 自定义tab组件

在Flutter中，可以通过自定义Widget来创建一个自定义的Tab组件。首先，我们可以创建一个自定义的Tab类，继承自StatefulWidget，并实现它的build方法。

class CustomTab extends StatefulWidget {
  final String title;
  final bool isSelected;
  final Function onTap;

  CustomTab({required this.title, required this.isSelected, required this.onTap});

  @override
  _CustomTabState createState() => _CustomTabState();
}

class _CustomTabState extends State<CustomTab> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTap,
      child: Container(
        color: widget.isSelected ? Colors.blue : Colors.transparent,
        child: Text(
          widget.title,
          style: TextStyle(
            fontSize: 16,
            color: widget.isSelected ? Colors.white : Colors.black,
          ),
        ),
      ),
    );
  }
}

在这个自定义Tab类中，我们需要传入三个参数：title（标签的标题），isSelected（标签是否被选中），onTap（点击标签的回调方法）。

接下来，我们可以在TabBar中使用这个自定义Tab组件。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Tab'),
      ),
      body: Column(
        children: [
          TabBar(
            controller: _tabController,
            tabs: [
              CustomTab(
                title: 'Tab 1',
                isSelected: _tabController.index == 0,
                onTap: () {
                  _tabController.animateTo(0);
                },
              ),
              CustomTab(
                title: 'Tab 2',
                isSelected: _tabController.index == 1,
                onTap: () {
                  _tabController.animateTo(1);
                },
              ),
              CustomTab(
                title: 'Tab 3',
                isSelected: _tabController.index == 2,
                onTap: () {
                  _tabController.animateTo(2);
                },
              ),
            ],
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: [
                Center(child: Text('Content 1')),
                Center(child: Text('Content 2')),
                Center(child: Text('Content 3')),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

在这个例子中，我们使用TabBar和TabBarView来显示标签和对应的内容。自定义的Tab组件被作为TabBar的child组件传入。TabBar接收一个TabController来管理标签的切换。每个自定义Tab组件通过传入isSelected参数来判断自身是否被选中，并通过onTap回调方法来触发点击事件并切换标签。