Flutter问题：ListView.builder的itemCount用变量报错怎么解决？

问题根源 #

你遇到的是数组索引越界异常。点击添加按钮时，你仅向people数组新增了元素、手动递增了peopleNum，但没有同步更新likeNum数组。当ListView.builder遍历到新元素的索引时，likeNum的长度仍停留在初始的3，导致访问不存在的索引触发报错。

修复步骤 #

1. 同步维护两个数组：添加新用户时，给likeNum也添加一个初始点赞数（如0），确保两个数组长度始终一致。
2. 移除冗余计数变量：直接使用people.length作为ListView.builder的itemCount，避免手动维护计数导致的不一致。
3. 优化交互体验：点击添加后关闭弹窗，并清空输入框内容。

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyApp()
    )
  );
}

List<String> people = ["p1", "p2", "p3"];
List<int> likeNum = [0, 0, 0]; // 明确类型更规范

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController inputController = TextEditingController();

  void addPeople(String name) {
    setState(() {
      people.add(name);
      likeNum.add(0); // 同步添加初始点赞数
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(people.length.toString()),
      ),
      body: const SizedBox(
        height: 600,
        child: PeopleList(),
      ),
      bottomNavigationBar: BottomAppBar(
        child: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: const Text("添加用户"),
                  content: TextField(
                    controller: inputController,
                    decoration: const InputDecoration(
                      hintText: "请输入姓名"
                    ),
                  ),
                  actions: [
                    TextButton(
                      onPressed: () {
                        final inputName = inputController.text.trim();
                        if (inputName.isNotEmpty) {
                          addPeople(inputName);
                          inputController.clear();
                        }
                        Navigator.of(context).pop();
                      },
                      child: const Text("添加"),
                    ),
                    TextButton(
                      onPressed: () => Navigator.of(context).pop(),
                      child: const Text("取消"),
                    )
                  ],
                );
              }
            );
          },
        ),
      ),
    );
  }
}

class PeopleList extends StatefulWidget {
  const PeopleList({Key? key}) : super(key: key);

  @override
  State<PeopleList> createState() => _PeopleListState();
}

class _PeopleListState extends State<PeopleList> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: people.length, // 直接使用people数组的长度
      itemBuilder: (c, i) {
        return ListTile(
          leading: Text(likeNum[i].toString()),
          title: Text(people[i]),
          trailing: TextButton(
            child: const Text("点赞"),
            onPressed: () {
              setState(() {
                likeNum[i]++;
              });
            },
          ),
        );
      }
    );
  }
}

内容的提问来源于stack exchange，提问作者한지선