12.5 Tab 页控制栏

12.5 Tab 页控制栏

image-20220722092812859

实现步骤：

第 1 步：控制器

lib/pages/goods/product_details/controller.dart

1
2
class ProductDetailsController extends GetxController
    with GetSingleTickerProviderStateMixin {

GetSingleTickerProviderStateMixin 是 TickerProvider 的实现，

当需要使用 Animation controller 时，需要在控制器初始化时传递一个 vsync 参数，此时需要用到 TickerProvider

1
2
3
4
// tab 控制器
late TabController tabController;
// tab 控制器
int tabIndex = 0;
1
2
3
4
5
6
7
8
_initData() async {
  await _loadProduct();

  // 初始化 tab 控制器
  tabController = TabController(length: 3, vsync: this);

  update(["product_details"]);
}
1
2
3
4
5
6
// 切换 tab
void onTapBarTap(int index) {
  tabIndex = index;
  tabController.animateTo(index);
  update(["product_tab"]);
}
1
2
3
4
5
@override
void onClose() {
  super.onClose();
  tabController.dispose();
}

第 2 步：视图

lib/pages/goods/product_details/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Tab 栏位按钮
Widget _buildTabBarItem(String textString, int index) {
  return ButtonWidget.textFilled(
    textString,
    onTap: () => controller.onTapBarTap(index),
    borderRadius: 17,
    textColor: controller.tabIndex == index
        ? AppColors.onPrimary
        : AppColors.secondary,
    bgColor:
        controller.tabIndex == index ? AppColors.primary : Colors.transparent,
  ).tight(
    width: 100.w,
    height: 35.h,
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Tab 栏位
Widget _buildTabBar() {
  return GetBuilder<ProductDetailsController>(
    tag: tag,
    id: "product_tab",
    builder: (_) {
      return <Widget>[
        _buildTabBarItem(LocaleKeys.gDetailTabProduct.tr, 0),
        _buildTabBarItem(LocaleKeys.gDetailTabDetails.tr, 1),
        _buildTabBarItem(LocaleKeys.gDetailTabReviews.tr, 2),
      ].toRow(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
      );
    },
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// TabView 视图
Widget _buildTabView() {
  return Expanded(
    child: Padding(
      padding: EdgeInsets.fromLTRB(20.w, 0.w, 20.w, 0.w),
      child: TabBarView(
        controller: controller.tabController,
        children: [
          // 规格
          TabProductView(uniqueTag: uniqueTag),
          // 详情
          TabDetailView(uniqueTag: uniqueTag),
          // 评论
          TabReviewsView(uniqueTag: uniqueTag),
        ],
      ),
    ),
  );
}

提交代码到 git