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

八分钟de温暖

于 2024-05-21 10:50:55 发布

阅读量398

点赞数 3

文章标签： flutter 微信

本文链接：https://blog.csdn.net/weixin_40466351/article/details/138811093

版权

一、效果图

在这里插入图片描述

2、主要代码

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