【Flutter 专题】126 图解自定义两侧对齐 ACETabBar 标签导航栏

import 'package:flutter/material.dart';
 
class ACETabBar extends StatefulWidget {
  const ACETabBar({Key? key}) : super(key: key);
 
  @override
  _ACETabBarState createState() => _ACETabBarState();
}
 
class _ACETabBarState extends State<ACETabBar> with SingleTickerProviderStateMixin {
  late TabController _tabController;
 
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }
 
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: TabBar(
        controller: _tabController,
        indicatorColor: Colors.transparent,
        labelColor: Colors.white,
        unselectedLabelColor: Colors.white70,
        isScrollable: true,
        tabs: [
          Tab(text: '标签一'),
          Tab(text: '标签二'),
        ],
      ),
    );
  }
}

这段代码定义了一个名为ACETabBar的StatefulWidget，它使用TabController来控制标签栏的选项卡。在initState方法中，我们初始化了TabController，并在dispose方法中清理了它。build方法中创建了一个TabBar，并设置了相关的属性，如指示器颜色、标签颜色等。这个例子展示了如何在Flutter中实现一个自定义的可滚动的标签导航栏。