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