Flutter中如何根据章节筛选JSON数据并展示对应内容？

1. 定义数据模型（可选但推荐） #

先创建一个数据模型类，替代直接操作Map，避免类型风险，让代码更健壮：

class AmhVerse {
  final int chapter;
  final int verse;
  final String text;

  AmhVerse({required this.chapter, required this.verse, required this.text});

  // 从JSON转模型的工厂方法
  factory AmhVerse.fromJson(Map<String, dynamic> json) {
    return AmhVerse(
      chapter: json['chapter'],
      verse: json['verse'],
      text: json['text'],
    );
  }
}

2. 存储选中章节与筛选数据 #

在页面状态类中定义变量，保存用户选中的章节编号，再通过where方法筛选对应章节的数据：

// 假设你已将assets数据转为List<AmhVerse>类型的_amh列表
List<AmhVerse> _amh = [];
int? _selectedChapter;

// 筛选选中章节的所有数据
List<AmhVerse> _getFilteredVerses() {
  if (_selectedChapter == null) return [];
  return _amh.where((item) => item.chapter == _selectedChapter).toList();
}

3. 构建交互与展示UI #

通过下拉选择器让用户选择章节，并用列表展示筛选后的内容，用setState触发UI更新：

@override
Widget build(BuildContext context) {
  final filteredData = _getFilteredVerses();
  
  return Scaffold(
    appBar: AppBar(title: const Text('章节内容展示')),
    body: Column(
      children: [
        // 章节选择下拉框（自动去重生成选项）
        DropdownButton<int>(
          hint: const Text('选择章节'),
          value: _selectedChapter,
          items: _amh
              .map((item) => item.chapter)
              .toSet() // 去重避免重复章节选项
              .map((chapter) => DropdownMenuItem(
                    value: chapter,
                    child: Text('第$chapter章'),
                  ))
              .toList(),
          onChanged: (value) {
            setState(() => _selectedChapter = value);
          },
        ),
        // 展示筛选后的章节内容
        Expanded(
          child: ListView.builder(
            itemCount: filteredData.length,
            itemBuilder: (context, index) {
              final verse = filteredData[index];
              return ListTile(
                title: Text('${verse.chapter}:${verse.verse}'),
                subtitle: Text(verse.text),
              );
            },
          ),
        ),
      ],
    ),
  );
}

核心要点 #

• 用模型类封装数据，比直接操作Map更安全易维护
• 通过toSet()对章节编号去重，避免下拉框出现重复选项
• 选择章节后调用setState更新状态，触发UI重新渲染筛选后的内容

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