Flutter点击悬浮按钮添加随机图片时旧图被覆盖的问题求助

问题根源 #

你代码里的核心问题有两个：

1. 数据与UI绑定错误：你把Container控件存在stickerList里，但ListView.builder完全没用到这个列表的元素，反而每次都用stickerList.length去assetsList取图——这就导致所有列表项都会显示当前最后添加的那张图。
2. 索引逻辑错误：添加图片时用stickerList.length当索引，ListView渲染时也用同一个值，每次点击按钮后列表长度变化，所有旧的列表项都会跟着取新的索引对应的图。

修正思路 #

• 先把图片资源列表一次性打乱，避免重复选取；
• 用列表存**图片路径（或索引）**而非控件，实现数据与UI分离；
• ListView根据索引读取已选图片列表的元素，每个项对应固定的图片。

修改后的完整代码示例 #

import 'package:flutter/material.dart';

class ImageAddPage extends StatefulWidget {
  const ImageAddPage({super.key});

  @override
  State<ImageAddPage> createState() => _ImageAddPageState();
}

class _ImageAddPageState extends State<ImageAddPage> {
  // 替换成你自己的图片文件名列表
  final List<String> _originalAssets = ['img1.png', 'img2.png', 'img3.png', 'img4.png'];
  List<String> _shuffledAssets = [];
  List<String> _selectedImages = [];

  @override
  void initState() {
    super.initState();
    // 初始化时打乱图片列表，后续按顺序取
    _shuffledAssets = List.from(_originalAssets)..shuffle();
  }

  void addNewImageToList() {
    setState(() {
      // 防止超出图片总数重复添加
      if (_selectedImages.length < _shuffledAssets.length) {
        _selectedImages.add(_shuffledAssets[_selectedImages.length]);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('添加随机图片')),
      body: ListView.builder(
        itemCount: _selectedImages.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
            child: Container(
              width: 250,
              height: 250,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('lib/images/${_selectedImages[index]}'),
                  fit: BoxFit.fill,
                ),
                borderRadius: BorderRadius.circular(50),
              ),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: addNewImageToList,
        heroTag: Icons.group_add,
        child: const Icon(Icons.group_add),
      ),
    );
  }
}

关键改动说明 #

1. 初始化打乱列表：在initState里只打乱一次图片资源，保证后续每次添加的都是未选过的随机图；
2. 存储图片路径：_selectedImages存的是具体的图片文件名，每个元素对应一个固定的图片，不会随列表长度变化而改变；
3. ListView正确索引：用index读取_selectedImages的元素，每个列表项对应自己的图片，旧的项不会被新添加的内容影响。

内容的提问来源于stack exchange，提问作者Zoey