Flutter中ExpansionTile+ListTile展示FAQ数据异常求助

1. 数据结构与模型类匹配检查 #

首先确认后端返回的JSON结构是否和你的Flutter模型类完全对应：

• 核对后端返回的分类字段（如categoryId、categoryName）与模型类属性名是否一致
• 确认FAQ列表是否正确嵌套在对应分类下，比如后端JSON应类似：

[
  {
    "categoryId": 1,
    "categoryName": "账户问题",
    "faqs": [
      {
        "id": 1,
        "question": "如何注册账户？",
        "answer": "点击注册按钮填写信息即可"
      }
    ]
  }
]

• 检查模型类的fromJson方法，确保正确解析嵌套的FAQ列表，避免数据丢失或空列表问题

2. 数据获取与状态管理检查 #

• 确认FAQProvider获取数据后，是否正确更新状态，比如使用notifyListeners()（基于ChangeNotifier的场景）
• 检查Widget初始化逻辑，是否在initState中调用了数据获取方法（如provider.fetchFAQs()）
• 打印获取到的全量数据，验证分类与对应FAQ列表的关联是否正确，无重复分类、FAQ错位情况

3. ExpansionTile 渲染逻辑检查 #

常见问题及修复： #

• 分类重复显示：排查遍历分类列表时是否存在重复条目，或数据层未去重
• FAQ列表不展开/无内容：
  • 确保ExpansionTile的children属性正确传入对应分类的FAQ列表：

    ExpansionTile(
      title: Text(category.categoryName),
      children: category.faqs.map((faq) {
        return ListTile(
          title: Text(faq.question),
          subtitle: Text(faq.answer),
        );
      }).toList(),
    )
    

  • 若FAQ列表为空，添加占位提示：

    children: category.faqs.isEmpty 
        ? [ListTile(title: Text("暂无问答内容"))]
        : category.faqs.map(...).toList()
    

• 样式不符合预期：
  • 通过TextStyle调整ExpansionTile标题、FAQ内容的字体大小、颜色
  • 使用trailing属性自定义展开/收起图标

4. 修正后的示例代码 #

假设模型类为FAQCategory和FAQ，以下是标准的列表渲染实现：

class FAQScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final faqProvider = Provider.of<FAQProvider>(context);
    return ListView.builder(
      itemCount: faqProvider.categories.length,
      itemBuilder: (context, index) {
        final category = faqProvider.categories[index];
        return ExpansionTile(
          title: Text(
            category.categoryName,
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          childrenPadding: EdgeInsets.symmetric(horizontal: 16),
          children: category.faqs.map((faq) {
            return Padding(
              padding: EdgeInsets.symmetric(vertical: 8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    faq.question,
                    style: TextStyle(fontWeight: FontWeight.w500),
                  ),
                  SizedBox(height: 4),
                  Text(faq.answer),
                ],
              ),
            );
          }).toList(),
        );
      },
    );
  }
}

若以上方法未解决问题，建议补充：

• 后端返回的JSON示例
• 你的Flutter模型类代码
• 当前展示效果的具体描述

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