Flutter RangeError(index)报错求助：设置itemCount为10后索引越界

问题根源 #

你遇到的RangeError (index): Invalid value: Valid value range is empty: 0错误，核心原因是：

• 页面初始化时_content是空列表，但你把ListView.builder的itemCount固定设为10。此时网络请求还未返回数据，列表尝试访问_content[0]到_content[9]，但列表内无任何元素，直接触发索引越界。
• 另外fetchJson方法定义了参数却未实际使用，_handleOnRefresh里调用fetchJson(Random)属于无效传参，不过这不是当前错误的直接诱因。

修复方案 #

1. 新增加载状态标记

数据未加载完成时显示加载指示器，避免空数据阶段渲染列表。

2. 动态设置itemCount

将itemCount设为_content.length与10的较小值，确保不会访问超出列表长度的索引。

3. 清理无用参数

移除fetchJson方法的无用参数，修正调用逻辑。

修改后的代码 #

Home_screen.dart

import 'dart:async';
import 'dart:convert';
import 'dart:math';

import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'package:liquid_pull_to_refresh/liquid_pull_to_refresh.dart';
import 'package:mood_calendar/components/box.dart';

import '../list_data/quotes_.dart';

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;
  late final List<Content> _content = [];
  bool _isLoading = true; // 加载状态标记

  Future<void> _handleOnRefresh() async {
    setState(() => _isLoading = true);
    final newData = await fetchJson();
    setState(() {
      _content.clear(); // 刷新时清空旧数据，避免重复累积
      _content.addAll(newData);
      _content.shuffle();
      _isLoading = false;
    });
  }

  // 移除无用参数
  Future<List<Content>> fetchJson() async {
    final response =
        await http.get(Uri.parse('https://www.jsonkeeper.com/b/4DEZ'));

    List<Content> ulist = [];

    if (response.statusCode == 200) {
      final urjson = json.decode(response.body);
      for (var jsondata in urjson) {
        ulist.add(Content.fromJson(jsondata));
      }
    }
    return ulist;
  }

  @override
  void initState() {
    super.initState();
    _loadInitialData();
  }

  // 封装初始数据加载逻辑
  Future<void> _loadInitialData() async {
    final data = await fetchJson();
    setState(() {
      _content.addAll(data);
      _content.shuffle();
      _isLoading = false;
    });
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(top: 8),
        child: LiquidPullToRefresh(
          backgroundColor:
              Colors.deepPurple.shade700.withBlue(255).withOpacity(0.4),
          color: Colors.transparent,
          height: 150,
          onRefresh: _handleOnRefresh,
          showChildOpacityTransition: false,
          animSpeedFactor: 4,
          child: Padding(
            padding: EdgeInsets.only(top: 40),
            child: SafeArea(
              child: _isLoading
                  ? // 加载中显示指示器
                  Center(child: CircularProgressIndicator())
                  : ListView.builder(
                      itemBuilder: ((context, index) {
                        return Box(
                          text: _content[index].quote.toString(),
                        );
                      }),
                      // 取数据长度和10的较小值，避免越界
                      itemCount: min(_content.length, 10),
                    ),
            ),
          ),
        ),
      ),
    );
  }
}

额外说明 #

• 新增_isLoading状态后，用户等待数据加载时会看到加载动画，提升交互体验。
• 刷新时清空旧数据再添加新数据，避免列表内容重复累积。
• 使用min(_content.length, 10)确保最多显示10条数据，同时不会超出实际数据的长度。

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