Flutter仿照微信实现九宫格头像

一、效果图

2、主要代码

c 复制代码
import 'dart:io';
import 'dart:math';

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

class ImageGrid extends StatelessWidget {
  final List<String> imageUrls; // 假设这是你的图片URL列表
  final double containerSize = 72.0; // 容器大小
  final double padding = 3.0; // 图片距离容器的宽度
  final double spacing = 2.0; // 图片之间的间隔

  ImageGrid({required this.imageUrls});

  double calculateImageWidth(int count) {
    double containerWidth = 72;
    double padding = 3;
    double gap = 2;

    if (count <= 4) {
      return (containerWidth - padding * 2 - gap) / 2;
    } else {
      return (containerWidth - padding * 2 - gap * 2) / 3;
    }
  }

  Widget _buildGrid() {
    double imageWidth = calculateImageWidth(imageUrls.length);
    int imageCount = imageUrls.length > 9 ? 9 : imageUrls.length;
    if (imageCount == 1) {
      // 一张图片铺满
      return Center(
        child: Container(
          width: containerSize,
          height: containerSize,
          child: Image.network(
            imageUrls[0],
            fit: BoxFit.cover,
          ),
        ),
      );
    } else {
      int rowCount = 1; //几行
      int firstNumber = 0; //第一行显示几个0不做特别处理
      int cellCount = 1; //几列
      if (imageCount == 2) {
        rowCount = 1;
        cellCount = 2;
      } else if (imageCount == 4 || imageCount == 6) {
        rowCount = 2;
        cellCount = imageCount == 4 ? 2 : 3;
      } else if (imageCount == 9) {
        rowCount = 3;
        cellCount = 3;
      } else if (imageCount == 3) {
        rowCount = 2;
        firstNumber = 1;
        cellCount = 2;
      } else if (imageCount == 5) {
        rowCount = 2;
        firstNumber = 2;
        cellCount = 3;
      } else if (imageCount == 7) {
        rowCount = 3;
        firstNumber = 1;
        cellCount = 3;
      } else if (imageCount == 8) {
        rowCount = 3;
        firstNumber = 2;
        cellCount = 3;
      }
      // 两张图片并排
      return Padding(
        padding: EdgeInsets.all(spacing),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            if (firstNumber != 0)
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(firstNumber, (cellIndex) {
                  return Row(
                    children: [
                      getImageWidget(cellIndex, imageWidth),
                      if (cellIndex != firstNumber - 1)
                        SizedBox(width: spacing),
                    ],
                  );
                }),
              ),
            if (firstNumber != 0 && rowCount > 1) SizedBox(height: spacing),
            ...List.generate(rowCount - (firstNumber != 0 ? 1 : 0), (rowIndex) {
              return Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: List.generate(cellCount, (cellIndex) {
                      int index =
                          firstNumber + rowIndex * cellCount + cellIndex;
                      return Row(
                        children: [
                          getImageWidget(index, imageWidth),
                          if (cellIndex != cellCount - 1)
                            SizedBox(width: spacing),
                        ],
                      );
                    }),
                  ),
                  if (rowIndex != rowCount - (firstNumber != 0 ? 2 : 1))
                    SizedBox(height: spacing),
                ],
              );
            }),
          ],
        ),
      );
    }
  }

//生成 图片wrapper
  getImageWidget(int index, double width) {
    if (!imageUrls[index].contains("http")) {
      return Image.file(File(imageUrls[index]),
          width: width, height: width, fit: BoxFit.cover);
    } else {
      return CachedNetworkImage(
        imageUrl: imageUrls[index],
        width: width,
        height: width,
        fit: BoxFit.cover,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(6),
      child: Container(
        width: containerSize,
        height: containerSize,
        decoration: BoxDecoration(
          //  color: Color(0xFFEEEEEE),
          color: Color.fromARGB(255, 243, 4, 4),
          borderRadius: BorderRadius.circular(6),
        ),
        child: _buildGrid(),
      ),
    );
  }
}
相关推荐
旭日猎鹰1 小时前
Flutter踩坑记录(三)-- 更改入口执行文件
flutter
旭日猎鹰1 小时前
Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行
flutter
️ 邪神1 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
比格丽巴格丽抱13 小时前
flutter项目苹果编译运行打包上线
flutter·ios
SoaringHeart13 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
AiFlutter17 小时前
Flutter通过 Coap发送组播
flutter
嘟嘟叽2 天前
初学 flutter 环境变量配置
flutter
iFlyCai2 天前
深入理解Flutter生命周期函数之StatefulWidget(一)
flutter·生命周期·dart·statefulwidget
sunly_2 天前
Flutter:photo_view图片预览功能
android·javascript·flutter
Summer不秃2 天前
Flutter中sqflite的使用案例
flutter