Flutter集成Supabase：如何正确展示关联表questionChoices的文本内容？

核心思路 #

从questionChoices的原始数据结构中提取指定字段的文本，再渲染到UI上。

具体实现 #

1. 确认数据结构
   先明确questionChoices的类型：如果是从Supabase直接查询返回的，通常是List<Map<String, dynamic>>；如果用了自定义模型类，就是对应实体类的列表。

2. 提取文本字段

   • 若为List<Map<String, dynamic>>类型（假设选项文本字段名为choice_text）：

     List<String> choiceTexts = questionChoices
         .map((choice) => choice['choice_text'].toString())
         .toList();
     

   • 若为自定义模型类（比如QuestionChoice类，文本属性为choiceText）：

     List<String> choiceTexts = questionChoices
         .map((choice) => choice.choiceText)
         .toList();
     

3. 在UI中展示
   用Flutter的列表组件渲染提取后的文本：

   Column(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: choiceTexts
         .map((text) => Padding(
               padding: const EdgeInsets.symmetric(vertical: 4.0),
               child: Text(text),
             ))
         .toList(),
   )
   

排查提示 #

如果之前打印的是原始数据结构，替换成打印choiceTexts就能看到纯文本内容，确认提取是否正确。

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