Flutter滑动删除列表后出现RangeError(index)错误怎么解决？

错误原因 #

• 你当前使用无状态组件StatelessWidget承载可动态修改的列表数据items，删除元素后没有调用setState触发UI重绘，ListView.builder的itemCount还是删除前的旧值，滚动时会尝试访问已经不存在的索引位，直接触发范围越界报错。
• 无状态组件本身不支持状态更新，动态变化的数据必须放在StatefulWidget的State类中维护，修改数据后调用setState通知框架刷新界面才能同步列表的实际长度。

修正后的完整代码 #

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHome(),
    );
  }
}

// 将MyHome改为有状态组件
class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  // 列表数据放到State中维护
  final List<String> items = List<String>.generate(30, (i) => "Items ${i+1}");
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Swipe To Dismiss"),
        centerTitle: true,
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context,int index){
          return Dismissible(
            key: Key(items[index]),
            onDismissed: (direction){
              // 删除数据后调用setState刷新UI
              setState(() {
                items.removeAt(index);
              });
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text("ITEM IS SUCCESSFULLY REMOVED"))
              );
            },
            background: Container(
              color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
            ),
            child: ListTile(
              title: Text(items[index]),
            ),
          );
        }
      ),
    );
  }
}

补充说明 #

原有代码中的Scaffold.of(context)写法在新版本Flutter中已经不推荐，替换为ScaffoldMessenger.of(context)可避免过时警告，功能逻辑完全一致。

内容的提问来源于stack exchange，提问作者Rudransh Singh Mahra