Flutter 选项卡-TabBar与PageView的简单使用

// 1. 需要遵循协议
with SingleTickerProviderStateMixin

// 2. 初始化控制器（一般定义变量后放在initState()中初始化）
TabController tabController = TabController(length: pages.length, vsync: this, initialIndex: 0);
PageController pageController = PageController(initialPage: currIndex);

// 3. 创建TabBar（按需放在显示的地方）
TabBar(
  // 控制器
  controller: tabController,
  // 选中时文字颜色
  labelColor: LzTools.c_333333,
  // 默认文字颜色
  unselectedLabelColor: LzTools.c_333333,
  // 创建item
  tabs: tabs.map( (v) => Tab(text: v) ).toList(),
  // 线条指示器颜色
  indicatorColor: LzTools.mainColor,
  // 线条宽度 
  // TabBarIndicatorSize.label 根据内容调整宽度
  // TabBarIndicatorSize.tab 根据(mainWidth/itemCount)调整宽度
  indicatorSize: TabBarIndicatorSize.label,
  // 线条边距
  indicatorPadding: EdgeInsets.only(left: 6, right: 6),
  // 点击item
  onTap: (int index){
      this.currIndex = index;
      // 切换到指定索引
      // curve 动画过度样式
      pageController.animateToPage(index, duration: const Duration(milliseconds: 200), curve: Curves.linear);
   },
)；

// 4. 关联PageView（按需放在显示的地方）
PageView(
  children: pages,
  controller: pageController,
  physics: NeverScrollableScrollPhysics(),
)