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(),
      ),
    );
  }
}
相关推荐
孤鸿玉6 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥12 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng1 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯1 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
睫毛上长雀斑1 天前
jsApi支付+h5支付
微信
w_y_fan1 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我2 天前
flutter 之真手势冲突处理
android·flutter