【Flutter小技巧10】— Flutter图片浏览器组件（支持左右滑动，放大缩小）

小常识，大应战！本文正在参与“程序员必备小常识”创造活动。

本文已参与「掘力星计划」，赢取创造大礼包，应战创造鼓励金。

需求是学习技能最有用的动力

一、前语：结合上篇文章，写了图片显现组件之后，天然要有图片浏览器，扩大缩小，左右滑动，点击后封闭图片浏览器，图片缓存。首要运用了 extended_image 插件 效果图如下：

二、完结过程 1、创立一个page，创立一个手势组件，为了点击封闭当时图片浏览器 2、创立Stack可叠加组件，滑动的图片张数和图片总张数。 3、组合完结 4、对外参数，图片数组，初始化选择第几张图片

三、详细完结 1、创立一个手势组件，为了点击封闭当时图片浏览器，运用ExtendedImageGesturePageView显现图片，支撑扩大，缩小。

GestureDetector(
onTap: () {
 Get.back();
},
child: Container(
 color: Colors.transparent,
 child: ExtendedImageGesturePageView.builder(
   itemBuilder: (BuildContext context, int index) {
     var item = imagesTest[index];
     Widget image = ExtendedImage.network(
       item,
       fit: BoxFit.contain,
       mode: ExtendedImageMode.gesture,
     );
     image = Container(
       child: image,
       padding: EdgeInsets.all(5.0),
     );
     if (index == currentIndex) {
       return Hero(
         tag: item + index.toString(),
         child: image,
       );
     } else {
       return image;
     }
   },
   itemCount: imagesTest.length,
   onPageChanged: (int index) {
     setState(() {
       currentIndex = index;
     });
   },
   // controller: PageController(
   //   initialPage: widget.currentIndex,
   // ),
   scrollDirection: Axis.horizontal,
 ),
),
),

2、创立Stack可叠加组件，滑动的图片张数和图片总张数。

Stack(
  children: <Widget>[
    GestureDetector(
      onTap: () {
        Get.back();
      },
      child: Container(
        color: Colors.transparent,
        child: ExtendedImageGesturePageView.builder(
          itemBuilder: (BuildContext context, int index) {
            var item = imagesTest[index];
            Widget image = ExtendedImage.network(
              item,
              fit: BoxFit.contain,
              mode: ExtendedImageMode.gesture,
            );
            image = Container(
              child: image,
              padding: EdgeInsets.all(5.0),
            );
            if (index == currentIndex) {
              return Hero(
                tag: item + index.toString(),
                child: image,
              );
            } else {
              return image;
            }
          },
          itemCount: imagesTest.length,
          onPageChanged: (int index) {
            setState(() {
              currentIndex = index;
            });
          },
          // controller: PageController(
          //   initialPage: widget.currentIndex,
          // ),
          scrollDirection: Axis.horizontal,
        ),
      ),
    ),
    Positioned(
      //图片index显现
      top: MediaQuery.of(context).padding.top + 15,
      width: MediaQuery.of(context).size.width,
      child: Center(
        child: Text("${currentIndex + 1}/${imagesTest.length}",
            style: TextStyle(color: Colors.white, fontSize: 16)),
      ),
    ),
  ],
),

3、组合完结。也就是详细的完好代码完结。可直接复用。

class PhotoBrowsePage extends StatefulWidget {
  final List<String>? images;
  final int initIndex;
  const PhotoBrowsePage({
    Key? key,
    this.images,
    this.initIndex = 0,
  }) : super(key: key);
  @override
  _PhotoBrowsePageState createState() => _PhotoBrowsePageState();
}
class _PhotoBrowsePageState extends State<PhotoBrowsePage> {
  PageController? controller;
  int currentIndex = 0;
  /// 测验
  List<String> imagesTest = <String>[
    'https://www.6hu.cc/wp-content/uploads/2022/12/1671569473-1f813d5fbb48698.jpg',
    'https://www.6hu.cc/wp-content/uploads/2022/12/1671569477-f99f71b50858d80.jpg',
    'https://www.6hu.cc/wp-content/uploads/2022/12/1671569481-f0ad56a4f0602a1.jpg',
    'https://www.6hu.cc/wp-content/uploads/2022/12/1671569485-25d35ee34b80f7d.jpg',
    'https://www.6hu.cc/wp-content/uploads/2022/12/1671569489-3f6fb2572f56515.jpg',
    'https://www.6hu.cc/wp-content/uploads/2022/12/1671569493-3a83be5cf9dfeaf.jpg',
    'https://www.6hu.cc/wp-content/uploads/2022/12/1671569497-aa620efc0f56a70.jpg'
  ];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // widget.images = images;
    currentIndex = widget.initIndex;
    controller = PageController(initialPage: currentIndex);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: <Widget>[
          GestureDetector(
            onTap: () {
              Get.back();
            },
            child: Container(
              color: Colors.transparent,
              child: ExtendedImageGesturePageView.builder(
                itemBuilder: (BuildContext context, int index) {
                  var item = imagesTest[index];
                  Widget image = ExtendedImage.network(
                    item,
                    fit: BoxFit.contain,
                    mode: ExtendedImageMode.gesture,
                  );
                  image = Container(
                    child: image,
                    padding: EdgeInsets.all(5.0),
                  );
                  if (index == currentIndex) {
                    return Hero(
                      tag: item + index.toString(),
                      child: image,
                    );
                  } else {
                    return image;
                  }
                },
                itemCount: imagesTest.length,
                onPageChanged: (int index) {
                  setState(() {
                    currentIndex = index;
                  });
                },
                // controller: PageController(
                //   initialPage: widget.currentIndex,
                // ),
                scrollDirection: Axis.horizontal,
              ),
            ),
          ),
          Positioned(
            //图片index显现
            top: MediaQuery.of(context).padding.top + 15,
            width: MediaQuery.of(context).size.width,
            child: Center(
              child: Text("${currentIndex + 1}/${imagesTest.length}",
                  style: TextStyle(color: Colors.white, fontSize: 16)),
            ),
          ),
        ],
      ),
    );
  }
}

四、记录点点滴滴，只为记录自己从前做过。下一期，列表单双排切换。