Flutter集成Firestore实现级联下拉时一级菜单onChanged方法如何处理

• 第一步：先确认CategoryData实体类已存储Firestore对应文档的id，你需要在分类查询方法中把文档id赋值给CategoryData的字段，示例如下：

// 你的分类查询方法修改，把文档id传入实体类
Future<List<CategoryData>> categoriesFuture() async {
  return await ref!.get().then((x) => x.docs
      .map((y) => CategoryData.fromJson(y.data() as Map<String, dynamic>, y.id))
      .toList());
}

// CategoryData的fromJson方法对应调整，增加id字段接收
class CategoryData {
  final String id;
  final String name;
  // 其他原有字段
  CategoryData({required this.id, required this.name, /*其他参数*/});
  factory CategoryData.fromJson(Map<String, dynamic> json, String docId) {
    return CategoryData(
      id: docId,
      name: json['name'],
      // 其他原有字段赋值
    );
  }
}

• 第二步：修改一级分类下拉的onChanged回调，增加联动逻辑：

onChanged: (dynamic c) async {
  selectedCategory = c;
  // 清空已选的子分类，避免新旧分类数据不匹配
  selectedSubCategory = null;
  // 先置空子分类列表触发界面刷新
  subCategories = [];
  setState(() {});
  if (selectedCategory != null) {
    // 调用你已封装好的按分类id查询子分类的方法
    subCategories = await subCategoryService.categoriesFutureById(selectedCategory!.id);
    setState(() {});
  }
},

• 第三步：（可选）适配编辑场景的初始化逻辑，如果你是编辑已有商品的场景，进入页面时需要自动选中对应分类和子分类，修改init方法即可：

Future<void> init() async {
  categories = await categoryService.categoriesFuture();
  // 判断是否为编辑模式，且已有分类数据
  if (widget.data != null && widget.data!.categoryId != null) {
    // 匹配选中的一级分类
    selectedCategory = categories.firstWhere(
      (e) => e.id == widget.data!.categoryId,
      orElse: () => null,
    );
    if (selectedCategory != null) {
      // 加载对应子分类
      subCategories = await subCategoryService.categoriesFutureById(selectedCategory!.id);
      // 匹配选中的子分类
      selectedSubCategory = subCategories.firstWhere(
        (e) => e.id == widget.data!.subCategoryId,
        orElse: () => null,
      );
    }
  }
  setState(() {});
}

提示：你原本初始化时加载全量子分类的逻辑可以删除，子分类只需要在选中一级分类后按需加载即可，减少不必要的数据库请求。

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