12.3 商品大图显示

12.3 商品大图显示

实现步骤：

第 1 步：安装插件 photo_view

由于 photo_view 插件 github 源码更新快，我们直接引用代码仓

你也可以用 flutter pub add photo_view

pubspec.yaml

1
2
3
4
5
# 图片预览
photo_view:
  git:
    url: https://github.com/bluefireteam/photo_view
    ref: master

第 2 步：图片浏览组件

lib/common/components/gallery.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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import 'package:flutter/material.dart';
import 'package:flutter_woo_commerce_getx_learn/common/index.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

/// 图片浏览组件
class GalleryWidget extends StatelessWidget {
  /// 初始图片位置
  final int initialIndex;

  /// 图片列表
  final List<String> items;

  const GalleryWidget({
    Key? key,
    required this.initialIndex,
    required this.items,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      // 点击返回
      onTap: () => Navigator.pop(context),
      child: Scaffold(
        // 全屏, 高度将扩展为包括应用栏的高度
        extendBodyBehindAppBar: true,

        // 背景黑色
        backgroundColor: Colors.black,

        // 导航栏 保留一个返回按钮
        appBar: AppBar(),

        // 图片内容
        body: PhotoViewGallery.builder(
          // 允许滚动超出边界，但之后内容会反弹回来。
          scrollPhysics: const BouncingScrollPhysics(),
          // 图片列表
          builder: (BuildContext context, int index) {
            return PhotoViewGalleryPageOptions(
              // 图片内容
              imageProvider: NetworkImage(items[index]),
              // 初始尺寸 容器尺寸
              initialScale: PhotoViewComputedScale.contained,
              // 最小尺寸 容器尺寸
              minScale: PhotoViewComputedScale.contained,
              // 最大尺寸 容器尺寸 4 倍
              maxScale: PhotoViewComputedScale.covered * 4,
            );
          },

          // loading 载入标记
          loadingBuilder: (context, event) => CircularProgressIndicator(
            // 标记颜色
            backgroundColor: AppColors.highlight,
            // 进度
            value: event == null
                ? 0
                : event.cumulativeBytesLoaded / (event.expectedTotalBytes ?? 0),
          ).tightSize(30).center(),

          // 图片个数
          itemCount: items.length,

          // 初始控制器，默认图片位置
          pageController: PageController(initialPage: initialIndex),
        ),
      ),
    );
  }
}

第 3 步：控制器

lib/pages/goods/product_details/controller.dart

1
2
3
4
5
6
7
// 图片浏览
void onGalleryTap(int index, KeyValueModel item) {
  Get.to(GalleryWidget(
    initialIndex: index,
    items: bannerItems.map<String>((e) => e.value!).toList(),
  ));
}

第 4 步：视图

lib/pages/goods/product_details/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
// 滚动图
Widget _buildBanner() {
  return GetBuilder<ProductDetailsController>(
      id: "product_banner",
      tag: tag,
      builder: ( _) {
        return CarouselWidget(
          // 打开大图预览
          onTap: controller.onGalleryTap,
          ...
        );
      }).backgroundColor(AppColors.surfaceVariant);
}

提交代码到 git