Flutter - GridView3 - 实现朋友圈效果（对4图处理）

##### demo 地址: https://github.com/iotjin/jh_flutter_demo

效果图

关于图片点击全屏浏览实现

主界面代码

import 'package:flutter/material.dart';
import 'package:flutter_app/jhBottomSheet.dart';
import 'package:flutter_app/JhNinePictureTool2.dart';

List<String> dataArr;

List<String> dataArr2;

List getData(){
  dataArr = new List();
  for(int i = 0; i < 9; i++){
    var img;
    if(i%2==0){
      img = "https://gitee.com/iotjh/Picture/raw/master/lufei2.png";
    }else{
      img= "https://gitee.com/iotjh/Picture/raw/master/lufei.png";
    }
    dataArr.add(img);
  }
  return dataArr;
}

List getData2(){
  dataArr2 = new List();
  for(int i = 0; i < 4; i++){
    var img;
    if(i%2==0){
      img = "https://gitee.com/iotjh/Picture/raw/master/lufei2.png";
    }else{
      img= "https://gitee.com/iotjh/Picture/raw/master/lufei.png";
    }
    dataArr2.add(img);
  }
  return dataArr2;
}


class GridViewTest3 extends StatefulWidget {
  @override
  _GridViewTest3State createState() => _GridViewTest3State();
}

class _GridViewTest3State extends State<GridViewTest3> {

  @override
  void initState() {
    super.initState();
    getData();
    getData2();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(
            title:Text('GridView实现朋友圈效果（九宫格）')
        ),
        body:
        Container(
            height: 1600,
            child:
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text("九宫格"),
                Container(
                    padding: EdgeInsets.fromLTRB(80, 10, 30, 10),
                    color: Colors.blue,
                    child:
                    JhNinePictureTool2(
                      imgData: dataArr,
                      lfPaddingSpace: 110,
                      onLongPress: (){
                        JhBottomSheet.showText(context, dataArr: ["保存图片"]);
                      },
                    )
                ),
                Text("九宫格"),
                Container(
                    padding: EdgeInsets.fromLTRB(80, 10, 30, 10),
                    color: Colors.blue,
                    child:
                    JhNinePictureTool2(
                      imgData: dataArr2,
                      lfPaddingSpace: 110,
                      onLongPress: (){
                        JhBottomSheet.showText(context, dataArr: ["保存图片"]);
                      },
                    )
                ),

//                Container(
//                  padding: EdgeInsets.all(5),
//                  child: JhNinePictureTool2(imgData: dataArr2,lfPaddingSpace: 10,),
//                )




              ],
            )


        )
    );
  }
}

JhNinePictureTool2 代码

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'jhPhotoAllScreenShow.dart';
import 'jhPhotoAllScreenShow2.dart';

const double itemSpace = 5.0;
const double space = 5.0; //上下左右间距

class JhNinePictureTool2 extends StatelessWidget {

  final List<String> imgData;
  final double lfPaddingSpace; //外部设置的左右间距
  final GestureTapCallback onLongPress;
  JhNinePictureTool2({
    this.imgData,
    this.lfPaddingSpace,
    this.onLongPress,
  });

  @override
  Widget build(BuildContext context) {

    var kScreenWidth = MediaQuery.of(context).size.width;

    var lfPadding  = lfPaddingSpace==null ?0.0: lfPaddingSpace;
    var ninePictureW =(kScreenWidth-space*2-2*itemSpace-lfPadding);
    var itemWH = ninePictureW/3;
    int columnCount = imgData.length >6 ? 3:imgData.length <= 3 ? 1:2;
//    print("九宫格宽"+ninePictureW.toString());
//    print("item宽"+itemWH.toString());
    
    return Container(
        color: Colors.yellow,
        width:imgData.length == 4 ? (space*2+itemSpace+itemWH*2) : (kScreenWidth-lfPadding),
        height: columnCount *itemWH +space*2+(columnCount -1)*itemSpace,
        child:
        GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(//可以直接指定每行（列）显示多少个Item
              //一行的Widget数量
              crossAxisCount: imgData.length == 4 ?2 :3,
              crossAxisSpacing: itemSpace, //水平间距
              mainAxisSpacing: itemSpace, //垂直间距
              childAspectRatio: 1.0,//子Widget宽高比例
            ),
			physics:NeverScrollableScrollPhysics(),
            padding: EdgeInsets.all(space),//GridView内边距
            itemCount: imgData.length,
            itemBuilder: (context, index) {
              return
                GestureDetector(
                  child:

//                CachedNetworkImage(
//                  imageUrl: imgData[index],
//                  imageBuilder: (context, imageProvider) => Container(
//                    decoration: BoxDecoration(
//                      image: DecorationImage(
//                          image: imageProvider,
//                          fit: BoxFit.cover),
//                    ),
//                  ),
//                  placeholder: (context, url) => CircularProgressIndicator(),
//                  errorWidget: (context, url, error) => Icon(Icons.error),
//                ),

                  ConstrainedBox(
                    child:Image.network(imgData[index],fit:BoxFit.cover),
                    constraints: BoxConstraints.expand(),
                  ),

                  onTap: (){
                    print(index);
//                   Navigator.maybePop(context);

                    //FadeRoute是自定义的切换过度动画（渐隐渐现） 如果不需要 可以使用默认的MaterialPageRoute
                    Navigator.of(context).push(new FadeRoute( page:
                    JhPhotoAllScreenShow(
                      imgDataArr:imgData,
                      index: index,
                      onLongPress: onLongPress,
                    )
                    ));

//                    Navigator.of(context).push(
//                      NinePictureAllScreenShow(imgData, index),
//                     );

                  },
                );
            }
        )

    );
  }
}