Flutter应用遍历完随机列表后崩溃，抛出RangeError(index)异常如何解决？

这个问题的根源很明确：索引越界。你的lista1包含5个元素，合法索引范围是0到4，但每次点击按钮时_posicao1都会自增，当遍历完所有元素后，_posicao1会变成5，这时候去访问lista1.elementAt(5)就会超出列表的有效索引范围，触发RangeError。

下面给你两种实用的解决方案，你可以根据需求选择：

方案一：遍历完成后停止操作并提示 #

当所有元素都展示完毕后，不再继续递增索引，而是给用户一个明确提示：

class _HomeState extends State<Home> { 
  var pergunta = "randomquest"; 
  int _posicao1 = -1; 
  var lista1 = ['1', '2', '3', '4', '5']..shuffle(); 

  void Teste1 (){ 
    // 先检查是否还有未展示的元素
    if (_posicao1 < lista1.length - 1) {
      _posicao1++;
      setState(() { 
        pergunta = lista1[_posicao1]; // 用[]访问比elementAt写法更简洁
      }); 
    } else {
      // 遍历完成后的提示
      setState(() {
        pergunta = "所有元素已展示完毕！";
      });
    }
  } 

  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      backgroundColor: Colors.white, 
      body: Center( 
        child: Column( 
          mainAxisAlignment: MainAxisAlignment.center, // 让内容垂直居中更美观
          children: [ 
            Text(pergunta, style: TextStyle(fontSize: 24)), // 新增文本展示当前元素
            SizedBox(height: 40), // 增加间距优化布局
            IconButton( 
              icon: Image.asset('images/eye.png'), 
              iconSize: 150, 
              onPressed: Teste1, 
            ) 
          ] 
        ) 
      ) 
    ); 
  } 
}

方案二：遍历完成后重新打乱列表循环展示 #

如果希望用户可以无限循环浏览随机顺序的元素，就在遍历完成后重置索引并重新打乱列表：

class _HomeState extends State<Home> { 
  var pergunta = "randomquest"; 
  int _posicao1 = -1; 
  var lista1 = ['1', '2', '3', '4', '5']..shuffle(); 

  void Teste1 (){ 
    if (_posicao1 < lista1.length - 1) {
      _posicao1++;
      setState(() { 
        pergunta = lista1[_posicao1]; 
      }); 
    } else {
      // 重置索引并重新打乱列表，实现循环展示
      _posicao1 = -1;
      lista1.shuffle();
      setState(() {
        _posicao1++;
        pergunta = lista1[_posicao1];
      });
    }
  } 

  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      backgroundColor: Colors.white, 
      body: Center( 
        child: Column( 
          mainAxisAlignment: MainAxisAlignment.center,
          children: [ 
            Text(pergunta, style: TextStyle(fontSize: 24)),
            SizedBox(height: 40),
            IconButton( 
              icon: Image.asset('images/eye.png'), 
              iconSize: 150, 
              onPressed: Teste1, 
            ) 
          ] 
        ) 
      ) 
    ); 
  } 
}

另外补充个小细节：原代码里单独嵌套的Row其实没必要（因为只有一个按钮），我在上面的代码里已经帮你简化了布局结构，让整体更清爽～

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