Flutter RangeError(index)报错修复与多图添加功能咨询

错误根源 #

出现RangeError(index): Invalid value: Only valid value is 0: 1的核心原因是两个列表数据不同步：

• attachments列表通过add方法不断追加图片路径，长度随上传次数增加
• imageName列表在每次上传时被直接赋值为[当前图片名]，始终只有1个元素
• ListView的itemCount绑定attachments.length，但内部渲染时取imageName[index]，当attachments.length > 1时，索引超出imageName的有效范围，触发红屏错误
• 额外问题：删除图片时仅操作attachments，未同步更新imageName，会导致后续数据混乱

修复方案 #

1. 同步列表增删操作 #

确保attachments和imageName的元素数量、索引完全对应：

• 上传图片时，给imageName追加元素而非覆盖
• 删除图片时，同时移除两个列表对应索引的元素

2. 实现图片数量限制（支持最多5张，可自定义） #

在上传前判断当前已选图片数量，超过限制时给出提示

3. 可选优化（推荐） #

用单个列表存储图片对象（包含路径和名称），彻底避免双列表同步问题

修复后的完整代码 #

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

// 假设你已定义以下常量：
// kRegularPadding, kLargePadding, kSmallPadding, kMediumPadding
// AssetImagePaths.uploadImage
// gray7Color, navy5Color, navy1Color, gray3Color

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

  @override
  State<ImageUploadPage> createState() => _ImageUploadPageState();
}

class _ImageUploadPageState extends State<ImageUploadPage> {
  // 双列表同步（保持原有结构修复）
  List<String> attachments = [];
  List<String> imageName = [];
  
  // 单列表存储对象（推荐，可替换上面双列表）
  // List<Map<String, String>> images = [];

  bool isHTML = false;
  final _formKey = GlobalKey<FormState>();
  static const int maxImageCount = 5; // 最大上传数量

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("图片上传")),
      body: Form(
        key: _formKey,
        child: ListView(
          children: [
            SizedBox(height: kRegularPadding),
            Column(
              children: <Widget>[
                InkWell(
                  onTap: _addImage,
                  child: SizedBox(
                      width: 343,
                      height: 165,
                      child: Image.asset(
                        AssetImagePaths.uploadImage,
                        fit: BoxFit.contain,
                      )),
                ),
                SizedBox(height: kLargePadding),
                ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: attachments.length,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: EdgeInsets.symmetric(vertical: kRegularPadding),
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: 15),
                        height: 75,
                        width: 343,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            border: Border.all(color: gray7Color)),
                        child: Row(
                          children: [
                            Container(
                              height: 43,
                              width: 43,
                              decoration: const BoxDecoration(
                                color: navy5Color,
                                shape: BoxShape.circle,
                              ),
                              child: const Icon(
                                Icons.insert_drive_file,
                                color: navy1Color,
                              ),
                            ),
                            SizedBox(width: kSmallPadding),
                            Expanded(
                              child: Text(
                                imageName[index], // 双列表方案
                                // images[index]['name']!, // 单列表方案
                                style: Theme.of(context)
                                    .textTheme
                                    .caption!
                                    .copyWith(
                                        color: gray3Color,
                                        fontWeight: FontWeight.w400),
                              ),
                            ),
                            const Spacer(),
                            Text(
                              "100%",
                              style: Theme.of(context)
                                  .textTheme
                                  .caption!
                                  .copyWith(
                                      color: gray3Color,
                                      fontWeight: FontWeight.w400),
                            ),
                            SizedBox(width: kSmallPadding),
                            IconButton(
                              onPressed: () => _removeAttachment(index),
                              icon: const Icon(
                                Icons.cancel,
                                color: gray3Color,
                                size: 24,
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                ),
                SizedBox(height: kRegularPadding),
              ],
            ),
            SizedBox(height: kMediumPadding),
          ],
        ),
      ),
    );
  }

  void _removeAttachment(int index) {
    setState(() {
      attachments.removeAt(index);
      imageName.removeAt(index); // 同步删除图片名
      // images.removeAt(index); // 单列表方案
    });
  }

  Future<void> _addImage() async {
    // 判断是否超过最大数量
    if (attachments.length >= maxImageCount) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text("最多可上传$maxImageCount张图片")),
        );
      }
      return;
    }

    final ImagePicker picker = ImagePicker();
    final XFile? image = await picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      setState(() {
        String imagePath = image.path;
        String fileName = imagePath.split('/').last;
        attachments.add(imagePath);
        imageName.add(fileName); // 追加而非覆盖
        // images.add({'path': imagePath, 'name': fileName}); // 单列表方案
      });
    }
  }
}

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