12.2 轮播图

12.2 轮播图

image-20220722143128988

实现步骤：

第 1 步：api 拉取商品数据

image-20220722142729860

lib/common/api/product.dart

1
2
3
4
5
6
7
/// 商品详情
static Future<ProductModel> productDetail(int? id) async {
  var res = await WPHttpService.to.get(
    '/products/$id',
  );
  return ProductModel.fromJson(res.data);
}

第 2 步：控制器

lib/pages/goods/product_details/controller.dart

1
2
3
4
5
6
7
8
// 商品 id , 获取路由传递参数
int? productId = Get.arguments['id'] ?? 0;
// 商品详情
ProductModel? product;
// Banner 数据
List<KeyValueModel> bannerItems = [];
// Banner 当前位置
int bannerCurrentIndex = 0;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 拉取商品详情
_loadProduct() async {
  // 商品详情
  product = await ProductApi.productDetail(productId);

  // Banner 数据
  if (product?.images != null) {
    bannerItems = product!.images!
        .map<KeyValueModel>((e) => KeyValueModel(
              key: "${e.id}",
              value: e.src ?? "",
            ))
        .toList();
  }
}
1
2
3
4
5
_initData() async {
  await _loadProduct();

  update(["product_details"]);
}
1
2
3
4
5
// Banner 切换事件
void onChangeBanner(int index, _reason) {
  bannerCurrentIndex = index;
  update(["product_banner"]); // 手动刷新 Banner
}

第 3 步：视图

lib/pages/goods/product_details/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 滚动图
Widget _buildBanner() {
  return GetBuilder<ProductDetailsController>(
      id: "product_banner",
      tag: tag,
      builder: (_) {
        return CarouselWidget(
          // 图片列表
          items: controller.bannerItems,
          // 当前索引
          currentIndex: controller.bannerCurrentIndex,
          // 切换回调
          onPageChanged: controller.onChangeBanner,
          // 高度
          height: 190.w,
          // 指示器圆点
          indicatorCircle: false,
          // 指示器位置
          indicatorAlignment: MainAxisAlignment.start,
          // 指示器颜色
          indicatorColor: AppColors.highlight,
        );
      }).backgroundColor(AppColors.surfaceVariant);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 主视图
Widget _buildView() {
  return controller.product == null
      ? const PlaceholdWidget() // 占位图
      : <Widget>[
          // 滚动图
          _buildBanner(),

          // 商品标题
          _buildTitle(),

          // Tab 栏位
          _buildTabBar(),

          // TabView 视图
          _buildTabView(),
        ].toColumn();
}
1
2
3
4
5
6
7
8
9
@override
Widget build(BuildContext context) {
...
    builder: (_) {
      return Scaffold(
        // 导航
        appBar: mainAppBarWidget(
            titleString:
                controller.product?.name ?? LocaleKeys.gDetailTitle.tr),

提交代码到 git