Flutter中图片GridView展示及放大效果

排版为9宫格，可放大

参考：https://22v.net/article/3246/

 

封装组件：

//PhotoPreview 点击小图后的效果
class PhotoPreview extends StatefulWidget {
  final int initialIndex;
  final List<String> photoList;
  final PageController pageController;

  PhotoPreview({this.initialIndex, this.photoList})
      : pageController = PageController(initialPage: initialIndex);

  @override
  _PhotoPreviewState createState() => _PhotoPreviewState();
}

class _PhotoPreviewState extends State<PhotoPreview> {
  int currentIndex;

  @override
  void initState() {
    currentIndex = widget.initialIndex;
    super.initState();
  }

  //图片切换
  void onPageChanged(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: PhotoViewGallery.builder(
        scrollPhysics: const BouncingScrollPhysics(),
        onPageChanged: onPageChanged,
        itemCount: widget.photoList.length,
        pageController: widget.pageController,
        builder: (BuildContext context, int index) {
          return PhotoViewGalleryPageOptions(
            imageProvider: AssetImage(widget.photoList[index]),
            minScale: PhotoViewComputedScale.contained * 0.6,
            maxScale: PhotoViewComputedScale.covered * 1.1,
            initialScale: PhotoViewComputedScale.contained,
          );
        },
      ),
    );
  }
}

 

引用：

Container(
                      margin: EdgeInsets.only(left: 10, right: 10, bottom: 10),
                      child: GridView.builder(
                          shrinkWrap: true,
                          itemCount: assetNames.length,
                          //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
                          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            //横轴元素个数
                              crossAxisCount: 3,
                              //纵轴间距
                              mainAxisSpacing: 20.0,
                              //横轴间距
                              crossAxisSpacing: 10.0,
                              //子组件宽高长度比例
                              childAspectRatio: 1.0),
                          itemBuilder: (BuildContext context, int index) {
                            //Widget Function(BuildContext context, int index)
                            return Container(
                                alignment: Alignment.center,
                                color: Colors.pink,
//                          padding: _edgeInsetsForIndex(index),
                                child: InkWell(
                                  onTap: () {
                                    //debug:
                                    print(assetNames[index]);
                                    Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                                      return PhotoPreview(
                                        initialIndex: index,
                                        photoList: assetNames,
                                      );
                                    }));
                                  },
                                  child: Image.asset(
                                    assetNames[index],
                                    height: 250.0,
                                    width: 250.0,
                                    fit: BoxFit.cover,
                                  ),
                                )
                            );
                          }

                      ),
                    ),