zoukankan      html  css  js  c++  java
  • 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,
                                         250.0,
                                        fit: BoxFit.cover,
                                      ),
                                    )
                                );
                              }
    
                          ),
                        ),
  • 相关阅读:
    HttpClient request payload post请求
    【Linux】svn添加用户
    手机抓包fiddle4的安装及配置
    【论文笔记】Social Role-Aware Emotion Contagion in Image Social Networks
    【Linux】crontab 定时启动sh
    DIV+CSS网页设计规范
    【机器学习】粗糙集属性约简算法与mRMR算法的本质区别
    【机器学习】DBSCAN Algorithms基于密度的聚类算法
    【机器学习】EM的算法
    【机器学习】K-means聚类算法与EM算法
  • 原文地址:https://www.cnblogs.com/lude1994/p/15741084.html
Copyright © 2011-2022 走看看