flutter九宫格图片显示、最大显示4张图

最新推荐文章于 2024-05-21 10:50:55 发布

小蜜蜂嗡嗡

最新推荐文章于 2024-05-21 10:50:55 发布

阅读量441

点赞数 10

文章标签： flutter

本文链接：https://blog.csdn.net/androidhyf/article/details/136484796

版权

import 'package:jade/bean/wantHave/ArticlePic.dart';
import 'package:jade/utils/JadeColors.dart';
import 'package:jade/utils/Utils.dart';
import 'package:util/image_util.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/*
* 九宫格多图
* */
Widget multiPictureWidget(BuildContext context,List<ArticlePic> pictureList,bool userThumb) {

  if(pictureList == null || pictureList.isEmpty){
    return Container();
  }else if(pictureList.length == 3){
    return Container(
      width: double.infinity,
      height: Utils().screenWidth(context) * 0.54,
      child: Row(
        children: [
          Expanded(flex: 1, child: _buildImgItem(pictureList[0].url)),
          SizedBox(
            width: 2.5,
          ),
          Expanded(
            flex: 1,
            child: Container(
                width: double.infinity,
                child: Column(
                  children: [
                    Expanded(
                      flex: 1,
                      child: _buildImgItem(pictureList[1].url),
                    ),
                    SizedBox(
                      height: 2.5,
                    ),
                    Expanded(
                      flex: 1,
                      child: _buildImgItem(pictureList[2].url),
                    )
                  ],
                )),
          ),
        ],
      ),
    );
  }
  return GridView.custom(
      shrinkWrap:true,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        // 水平方向每行item数量
          crossAxisCount: pictureList.length > 1 && pictureList.length <= 4
              ? 2
              : pictureList.length > 4
              ? 3
              : 1,
          // 垂直方向item之间的间距
          mainAxisSpacing: 10.w,
          // 水平方向item之间的间距
          crossAxisSpacing: 10.w,
          childAspectRatio: 1.5
      ),
      physics: const NeverScrollableScrollPhysics(),
      childrenDelegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        return Utils().roundedImage(userThumb?pictureList[index]: ImageUtil.getOssImageThumbUrl(pictureList[index].url), 5);
      }, childCount: pictureList.length));
}

/*
* 最大显示4张图
* */
Widget multiPictureWidgetMaxFour(BuildContext context,List<ArticlePic> pictureList,bool userThumb) {

  if(pictureList == null || pictureList.isEmpty){
    return Container();
  }else if(pictureList.length == 3){
    return Container(
      width: double.infinity,
      height: Utils().screenWidth(context) * 0.54,
      child: Row(
        children: [
          Expanded(flex: 1, child: _buildImgItem(pictureList[0].url)),
          SizedBox(
            width: 2.5,
          ),
          Expanded(
            flex: 1,
            child: Container(
                width: double.infinity,
                child: Column(
                  children: [
                    Expanded(
                      flex: 1,
                      child: _buildImgItem(pictureList[1].url),
                    ),
                    SizedBox(
                      height: 2.5,
                    ),
                    Expanded(
                      flex: 1,
                      child: _buildImgItem(pictureList[2].url),
                    )
                  ],
                )),
          ),
        ],
      ),
    );
  }
  return GridView.custom(
      shrinkWrap:true,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        // 水平方向每行item数量
          crossAxisCount: pictureList.length > 1 ? 2 : 1,
          // 垂直方向item之间的间距
          mainAxisSpacing: 10.w,
          // 水平方向item之间的间距
          crossAxisSpacing: 10.w,
          childAspectRatio: 1.5
      ),
      physics: const NeverScrollableScrollPhysics(),
      childrenDelegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        return Utils().roundedImage(userThumb?pictureList[index]: ImageUtil.getOssImageThumbUrl(pictureList[index].url), 5);
      }, childCount: pictureList.length>4?4:pictureList.length));
}

_buildImgItem(String url) {
  return Container(
      width: double.infinity,
      height: double.infinity,
      decoration: BoxDecoration(
          border: Border.all(color: JadeColors.grey_9,width: 1.w),
          borderRadius: BorderRadius.circular(5)
      ),
      child: Utils().roundedImage(ImageUtil.getOssImageThumbUrl(url), 10.w)
  );
}


//圆角图片
  roundedImage(var imageUrl,double radius,{BoxFit fit}){
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(radius)),
        border: Border.all(width: 0.5,color: Colors.black12)
      ),
      child: ClipRRect(//是ClipRRect，不是ClipRect
        borderRadius: BorderRadius.circular(radius),
        child: CachedNetworkImage(
          imageUrl: ImageUtil.getOssImageThumbUrl(imageUrl??''),
          placeholder: (context, url) =>
              Container(color: JadeColors.grey_5,),
          errorWidget: (context, url, error) => Image.asset(PathConfig.imagePlaceholder),
          fit: fit??BoxFit.cover,
        ),
      ),
    );
  }