Flutter解决setState构建期调用报错后出现RangeError索引越界问题求助

错误根因 #

你遇到的RangeError (Index) Invalid Value: not in Exclusive Range 0..2 : 5报错，以及之前的setState() or markneedsBuild() Called during the build报错，核心是三个代码问题导致的：

• 第一处错误在answer.dart中，按钮点击事件绑定错误：你给RaisedButton的onPressed属性写的是selectHandler()，这相当于组件构建阶段就会直接执行传入的函数，不是等用户点击才触发。每次执行都会给questionIndex加1，索引不受控持续累加，超过你定义的3个问题的最大索引（2）就会触发范围报错，同时构建阶段执行函数触发setState，就是你之前遇到的build阶段调用setState报错的来源，你之前通过initState加回调的方式并没有解决根本问题。
• 第二处错误在main.dart中，你自定义的答案按钮类名为Answer，但代码中调用时写的是jawab，属于类名调用错误。
• 冗余逻辑问题：initState中添加的addPostFrameCallback回调会在页面第一次渲染完成后自动调用一次answerChosen，导致默认第一题还没显示就直接跳到第二题，属于多余逻辑。

修复步骤 #

1. 修复answer.dart的点击事件绑定
   将onPressed: selectHandler()修改为onPressed: selectHandler，或者写成匿名函数形式onPressed: () => selectHandler()，保证只有用户点击按钮时才会触发逻辑。
   修改后的answer.dart参考：

import 'package:flutter/material.dart';
class Answer extends StatelessWidget {
  final Function selectHandler;
  final String answerText;
  const Answer(this.selectHandler, this.answerText, {super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      // 注：RaisedButton已经废弃，推荐用ElevatedButton替代
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
        child: Text(answerText, style: const TextStyle(color: Colors.white)),
        onPressed: selectHandler, // 此处去掉括号，传函数引用
      ),
    );
  }
}

2. 删除main.dart中initState的冗余代码，这部分逻辑已经不需要了。
3. 修复main.dart中的类名调用错误，将return jawab(answerChosen, answer);修改为return Answer(answerChosen, answer);
4. 给索引累加添加边界判断，避免后续所有问题答完后还是触发索引累加导致越界，同时把questions数组从build方法里移到类的属性中，方便全局调用：
   修改后的MyappState类参考：

class MyappState extends State<Myapp> {
  var questionIndex = 0;
  // 把questions数组移到类属性里，不要放在build方法中重复定义
  final questions = [
    {
      'QuestionText': 'what is your favorite color',
      'Answers': ['red', 'greed', 'blue', 'Black']
    },
    {
      'QuestionText': 'what\'s your favorite animal',
      'Answers': ['cat', 'dog', 'lion', 'girgit']
    },
    {
      'QuestionText': 'Who\'s your favorite Player',
      'Answers': ['Messi', 'Neymar', 'Ronaldo', 'Other']
    }
  ];

  answerChosen() {
    // 先判断索引没到最大值才累加
    if (questionIndex < questions.length -1) {
      setState(() {
        questionIndex = questionIndex + 1;
      });
      print(questionIndex);
    } else {
      // 可以自定义答完所有题后的逻辑，比如重置索引，或者跳转结果页
      setState(() {
        questionIndex = 0;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My First App'),
        ),
        body: Column(
          children: [
            Question(
              questions[questionIndex]['QuestionText'] as String,
            ),
            ...(questions[questionIndex]['Answers'] as List<String>).map(
                  (answer) {
                return Answer(answerChosen, answer);
              },
            ).toList()
          ],
        ),
      ),
    );
  }
}

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