排版为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, 250.0, fit: BoxFit.cover, ), ) ); } ), ),