Flutter:RangeError(索引):无效值:不在包含范围 0..3:4 使用 IndexedListView.builder

Question

我正在处理与 whatsapp 一样的聊天。我正在尝试执行此功能，当用户想要回复特定消息时，当点击回复的消息时，它应该跳转到该特定消息。所以要做到这一点，我正在使用 indexed_list_view包。

问题是它显示这个错误

RangeError (index): Invalid value: Not in inclusive range 0..3: 4 

但是当我使用 ListView builder 时，这个错误不会发生。

这是我的代码:

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

  @override
  State<ChatRoom> createState() => _ChatRoomState();
}

class _ChatRoomState extends State<ChatRoom> {
  List<ChatRoomModel> chatRoom = [
    ChatRoomModel(
        replyMsgIndex: 0,
        msg: "Hello",
        time: "09:00 PM",
        replyCount: 0,
        replyMsg: "",
        userId: 1),
    ChatRoomModel(
        replyMsgIndex: 0,
        msg: "Helloo",
        time: "12:00 PM",
        replyCount: 0,
        replyMsg: "",
        userId: 1),
    ChatRoomModel(
        replyMsgIndex: 0,
        msg: "Hellooo",
        time: "09:05 PM",
        replyCount: 0,
        replyMsg: "",
        userId: 1),
    ChatRoomModel(
        replyMsgIndex: 0,
        msg: "Helloooo",
        time: "10:00 PM",
        replyCount: 0,
        replyMsg: "",
        userId: 1),
  ];

 bool leftSelected = false;
  bool rightSelected = false;
  String replymsg = "";
  int? getMsgIndex;
  int? jumpIndex;
  int? changeColorIndex;
  TextEditingController newReply = TextEditingController();
IndexedScrollController controller = IndexedScrollController(initialIndex: 0);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(60.0),
        child: CustomApp(
          name: name,
          imagePath: imagePath,
        ),
      ),
      body: Column(children: [
//here i am using the package
        Expanded(
          child: IndexedListView.builder(
              maxItemCount: chatRoom.length,  //i passed the lenght of list too
              controller: controller,
              itemBuilder: ((context, index) {
               

                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    decoration: BoxDecoration(
                        color: jumpIndex == index
                            ? Colors.blue
                            : Colors.transparent,
                        borderRadius: BorderRadius.circular(15.0)),
                    child: SwipeTo(
                      onRightSwipe: (() {
                        setState(() {
                          rightSelected = false;
                          leftSelected = true;
                          replymsg = chatRoom[index].msg;
                          getMsgIndex = index;
                          jumpIndex = index;
                          print("getMsgIndex  $getMsgIndex");
                        });
                      }),
                      child: Column(
//error points here                       
 crossAxisAlignment: chatRoom[index].userId == 1
                            ? CrossAxisAlignment.start
                            : CrossAxisAlignment.end,
                        children: [
                         
                          chatRoom[index].replyCount == 1
                              ? InkWell(
                                  onTap: () {
                                    controller.jumpToIndex(jumpIndex!);
                                  },
                                  child: Container(
                                    padding: const EdgeInsets.all(5),
                                    decoration: BoxDecoration(
                                      color: Colors.grey.shade100,
                                      border: const Border(
                                        left: BorderSide(
                                            color: Colors.purple, width: 3),
                                      ),
                                    ),
                                    child: Column(
                                      crossAxisAlignment:CrossAxisAlignment.end,
                                      children: [
                                        Text(name,style: const TextStyle(
                                                color: Colors.purple,
                                                fontSize: 15,
                                                fontWeight: FontWeight.w500)),
                                        const SizedBox(height: 3),
                                        Text(chatRoom[index].replyMsg,
                                            style: const TextStyle(
                                              color: Colors.black54,
                                              fontSize: 12,
                                            )),
                                      ],
                                    ),
                                  ),
                                )
                              : Text(
                                  chatRoom[index].replyCount > 0 &&
                                          chatRoom[index].replyMsg != ""
                                      ? chatRoom[index].replyMsg
                                      : "",
                                  style: const TextStyle(
                                      fontSize: 10.0,
                                      fontWeight: FontWeight.bold)),
                          Text(chatRoom[index].msg,
                              style: const TextStyle(fontSize: 15.0)),
                          Text(
                            "       " + chatRoom[index].time,
                            style: const TextStyle(fontSize: 10.0),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              })),
        ),
        Column(
          children: [
            leftSelected
                ? _replyWidget(replymsg)
                : AnimatedContainer(
                    duration: const Duration(seconds: 1),
                  ),
            BottomTextField(
                newReply: newReply,
                sendMessageFunc: () {
//I'm adding new messages to list
                  setState(() {
                    leftSelected == true
                        ? chatRoom.add(
                            ChatRoomModel(
                                replyMsgIndex: jumpIndex,
                                userId: 2,
                                msg: newReply.text,
                                time: "09:00 PM",
                                replyCount: 1,
                                replyMsg: replymsg),
                          )
                        : chatRoom.add(ChatRoomModel(
                            replyMsgIndex: jumpIndex,
                            userId: 2,
                            time: "09:00 PM",
                            msg: newReply.text,
                            replyCount: 0,
                            replyMsg: ""));
                    leftSelected = false;
                    newReply.clear();
                    replymsg = "";
                  });
                })
          ],
        )
      ]),
    ));
  }
}

当用户重定向到此屏幕时，我的屏幕看起来像这样

请帮忙解决这个错误。

Answer 1

您正在使用 indexed_list_view 中的 IndexedListView包裹。第一页上的文档如下所示:

Limitation: The list is always infinite both to positive and negative indexes. In other words, it can be scrolled indefinitely both to the top and to the bottom.

这意味着您无法指定项目的确切数量，因为 IndexedListView 使用 Infinity 列表

您必须手动检查 index，如果它在您的集合范围内，则返回代表该项目的小部件或 null 以确定您没有任何返回

简而言之，您的 itemBuilder 应该如下所示:

.. your code from above...
//error points here
child: index < 0 || index > chatRoom.length - 1 
    ? null
    : Column(crossAxisAlignment: chatRoom[index].userId == 1,
    ...

此外，请不要忘记即使您没有要显示的项目，列表也会以任何方式滚动，因为:

You can define index bounds by giving it a minItemCount and maxItemCount, but this will not prevent the list from scrolling indefinitely. When showing items out of the index bounds, or when your itemBuilder returns null, it will ask the emptyItemBuilder to create an "empty" item to be displayed instead. As default, this will return empty containers.