Flutter如何正确获取并展示嵌套列表中的数据

问题说明 #

在Flutter中渲染嵌套列表数据时，最终输出不符合列表格式，需要正确提取options字段存储的选项列表，完成组件渲染。

现有业务代码 #

class QuizData {
  List<BrainData> getData = [
    BrainData(
      questionID: "biology1",
      question:
          "Pine, fir, spruce, cedar, larch and cypress are the famous timber-yielding plants of which several also occur widely in the hilly regions of India. All these belong to",
      options: [
        "angiosperms",
        "gymnosperms",
        "monocotyledons",
        "dicotyledons",
      ],
      answer: [false, true, false, false],
    ),
  ];
}

解决方案 #

渲染格式错误的核心原因是直接把List<String>类型的options对象传入了Text组件，Text组件仅接收字符串参数，直接传入列表会触发Dart默认的列表toString()逻辑，输出带中括号、元素间用逗号拼接的非格式化文本。

按以下步骤调整即可：

1. 首先确保BrainData数据类定义正确，字段类型和传入参数匹配：

class BrainData {
  final String questionID;
  final String question;
  final List<String> options;
  final List<bool> answer;

  BrainData({
    required this.questionID,
    required this.question,
    required this.options,
    required this.answer,
  });
}

2. 遍历options列表生成对应的列表项组件，不要直接把列表传入文本组件。如果是静态短列表，用Column加展开运算符映射即可；如果是长列表/滚动场景，用ListView.builder性能更好。
   完整的页面渲染示例：

class QuizPage extends StatelessWidget {
  QuizPage({super.key});

  final QuizData quizData = QuizData();

  @override
  Widget build(BuildContext context) {
    // 取第一道题示例，多题场景可在外层套PageView/ListView切换题目
    final currentQuestion = quizData.getData[0];
    return Scaffold(
      appBar: AppBar(title: const Text("生物测验题")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 渲染题干
            Text(
              currentQuestion.question,
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
            ),
            const SizedBox(height: 24),
            // 遍历options渲染选项
            ...currentQuestion.options.asMap().entries.map((entry) {
              final optionIndex = entry.key;
              final optionText = entry.value;
              final isCorrect = currentQuestion.answer[optionIndex];

              return Container(
                margin: const EdgeInsets.only(bottom: 12),
                child: ListTile(
                  tileColor: Colors.grey[200],
                  title: Text(optionText),
                  onTap: () {
                    // 这里写选项点击、判分逻辑即可
                    debugPrint("选中第$optionIndex个选项，答案是否正确：$isCorrect");
                  },
                ),
              );
            }),
          ],
        ),
      ),
    );
  }
}

额外注意事项 #

• 如果选项内容较长、题目数量多，把渲染选项的Column部分替换为ListView.builder，避免内容溢出，同时提升长列表渲染性能：

ListView.builder(
  padding: const EdgeInsets.only(top: 24),
  itemCount: currentQuestion.options.length,
  itemBuilder: (context, index) {
    final optionText = currentQuestion.options[index];
    return Container(
      margin: const EdgeInsets.only(bottom: 12),
      child: ListTile(
        tileColor: Colors.grey[200],
        title: Text(optionText),
      ),
    );
  },
)

• 如果需要实现选项选中、答案高亮这类交互效果，把QuizPage从StatelessWidget改为StatefulWidget，用状态变量存储当前选中的选项索引即可。

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