Flutter中如何读取嵌套列表数据并在Widget中以列表形式展示

核心原因 #

你无法获取到结构正确的options列表，本质是BrainData类未明确定义字段类型、或读取属性的方式有误，按以下步骤调整即可直接拿到可用的列表数据源。

步骤1：定义强类型的BrainData模型 #

禁止使用dynamic类型声明options、answer字段，否则会丢失列表结构，正确的模型写法如下：

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数据 #

QuizData中的getData本身是List<BrainData>类型，通过索引获取到对应题目的实例后，直接访问.options属性就能拿到标准的List<String>类型数据，可直接作为列表组件的数据源：

// 初始化数据类实例
final quizStore = QuizData();
// 获取索引为0的第一道题的选项列表
List<String> targetOptions = quizStore.getData[0].options;

步骤3：组件内渲染options列表 #

可以通过Column嵌套map遍历、或者ListView.builder实现选项渲染，完整可运行的组件示例：

class QuizQuestionPage extends StatelessWidget {
  const QuizQuestionPage({super.key});

  @override
  Widget build(BuildContext context) {
    final quizStore = QuizData();
    // 取当前展示的题目，此处示例取第一道题
    final activeQuestion = quizStore.getData[0];

    return Scaffold(
      appBar: AppBar(title: const Text("知识答题")),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 题干区域
            Text(
              activeQuestion.question,
              style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
            ),
            const SizedBox(height: 20),
            // 选项列表区域
            ...activeQuestion.options.asMap().entries.map((entry) {
              // 选项索引
              final index = entry.key;
              // 选项文本
              final optionContent = entry.value;
              return Container(
                margin: const EdgeInsets.only(bottom: 12),
                child: ListTile(
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
                  tileColor: Colors.grey.shade200,
                  title: Text(optionContent),
                  onTap: () {
                    // 点击选项时直接读取对应位置的answer值判断对错
                    bool isRight = activeQuestion.answer[index];
                    debugPrint("当前选项是否为正确答案：$isRight");
                  },
                ),
              );
            })
          ],
        ),
      ),
    );
  }
}

避坑提示 #

• 不要对.options属性做额外的强制类型转换，只要模型是强类型定义，拿到的直接是可用的字符串列表
• 如果后续需要从接口加载JSON数据，转模型时要确保options字段按数组类型解析，不要将整个数组转成String类型
• 遍历选项时优先用asMap().entries的方式获取索引，避免用indexOf匹配文本时，出现重复选项导致索引匹配错误

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