如何从Firebase中的数组获取Flutter DropDownMenuItem选项

解决方案 #

关键修改点 #

• 将选中状态、下拉选项列表等变量移至State类成员，避免每次build重置状态
• 选择州后，从对应Firebase文档中读取district数组，生成地区下拉选项
• 优化StreamBuilder内的列表构建逻辑，防止重复添加选项

修改后的完整代码 #

class CreateProfile extends StatefulWidget {
  const CreateProfile({Key? key}) : super(key: key);

  @override
  State<CreateProfile> createState() => _CreateProfileState();
}

class _CreateProfileState extends State<CreateProfile> {
  // 状态变量统一放在类成员中
  String? selectedState;
  String? selectedDistrict;
  List<DropdownMenuItem<String>> stateItems = [];
  List<DropdownMenuItem<String>> districtItems = [];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 100,
          width: double.infinity,
          color: Colors.yellow,
        ),
        // 州选择下拉框
        SizedBox(
          width: double.infinity,
          child: StreamBuilder<QuerySnapshot>(
            stream: FirebaseFirestore.instance.collection('stateList').snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                return const Text('加载中');
              }
              // 每次快照更新时重置州选项，避免重复添加
              stateItems.clear();
              for (var doc in snapshot.data!.docs) {
                stateItems.add(
                  DropdownMenuItem(
                    value: doc.id,
                    child: Text(
                      doc.id,
                      style: const TextStyle(color: Colors.red),
                    ),
                  ),
                );
              }
              return Row(
                children: [
                  DropdownButton<String>(
                    items: stateItems,
                    onChanged: (stateValue) async {
                      setState(() {
                        selectedState = stateValue;
                        // 切换州时重置选中的地区
                        selectedDistrict = null;
                      });
                      if (stateValue != null) {
                        // 获取选中州的文档，读取district数组
                        var docSnapshot = await FirebaseFirestore.instance
                            .collection('stateList')
                            .doc(stateValue)
                            .get();
                        List<dynamic> districts = docSnapshot['district'] ?? [];
                        // 生成地区下拉选项
                        setState(() {
                          districtItems.clear();
                          for (var district in districts) {
                            districtItems.add(
                              DropdownMenuItem(
                                value: district,
                                child: Text(district),
                              ),
                            );
                          }
                        });
                      }
                    },
                    value: selectedState,
                    hint: const Text('选择州'),
                  ),
                ],
              );
            },
          ),
        ),
        const SizedBox(height: 20),
        // 地区选择下拉框（有数据时才显示）
        if (districtItems.isNotEmpty)
          Row(
            children: [
              DropdownButton<String>(
                items: districtItems,
                onChanged: (districtValue) {
                  setState(() {
                    selectedDistrict = districtValue;
                  });
                },
                value: selectedDistrict,
                hint: const Text('选择地区'),
              ),
            ],
          ),
      ],
    );
  }
}

代码说明 #

1. 状态管理优化：把状态变量从build方法内移到State类成员，确保状态在组件多次重建时不会丢失。
2. 州选项更新：每次Firebase快照更新时，清空并重新生成州选项列表，避免出现重复选项。
3. 地区数据加载：选中州后，通过文档ID获取对应Firebase文档，读取district字段的数组数据，转换为下拉选项。
4. 交互体验优化：切换州时自动重置选中的地区，避免显示无效选项；仅当有地区数据时才渲染地区下拉框。

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