Dart无法访问列表单个元素 Flutter答题应用第二Column组件不显示

问题原因 #

• 核心问题出在getAnswerList()函数的初始化逻辑：
  你初始化答案列表时，默认给最外层数组插入了一个空的子列表：

List<List<Answer>> answerList = [[]];

后续遍历题目数组生成的答案列表，是依次追加在这个空列表之后的，也就是说getAnswerList()[0]是空数组，getAnswerList()[1]才对应第一题的选项，getAnswerList()[2]对应第二题的选项，以此类推。而你的questionIndex初始值默认是0，渲染选项时拿到的是空列表，自然看不到任何按钮。

• 次要潜在问题：外层Column未设置高度约束
  如果修复上述问题后仍然出现显示异常，是因为Scaffold的body是无高度约束的布局空间，Column默认会尽可能占满高度，当选项数量过多时会出现溢出问题。

修复方案 #

1. 修改getAnswerList()的初始化代码，去掉默认的空列表：

List<List<Answer>> answerList = [];

2. 给选项区域的Column套上Expanded组件，让它自动占用Question组件之外的剩余布局空间，避免溢出：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            "Flutter Demo Home Page"
          ),
        ),
        body: Column(
          children: [
            Question(
              questions[questionIndex]["questionText"]
            ),
            Expanded(
              child: Column(
                children: getAnswerList()[questionIndex],
              ),
            )
          ],
        )
      ),
    ),
  );
}

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