Flutter中StreamBuilder内下拉选单变量变更的非initState解决方案

核心问题是每次StreamBuilder重建（包括setState触发时）都会把category1重置为Firebase返回的初始值，要解决这个问题，我们需要仅在本地状态未初始化时才用远程数据赋值，后续本地修改的状态优先于远程初始值。

修改思路 #

1. 将category1作为StatefulWidget的状态变量（原本的全局变量改为状态变量更符合Flutter状态管理逻辑）
2. 在StreamBuilder的builder中，仅当category1为null（未被用户修改过）时，才用Firebase返回的userData["category1"]初始化它
3. 下拉选单的onChanged回调中正常更新本地状态，此时即使StreamBuilder重建，也不会覆盖已修改的category1

修正后的完整代码 #

class YourWidget extends StatefulWidget {
  const YourWidget({super.key});

  @override
  State<YourWidget> createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  final List<DropdownMenuItem<String>> categoryList = [
    const DropdownMenuItem<String>(child: Text("ビューティー"), value: "ビューティー"),
    const DropdownMenuItem<String>(child: Text("ファッション"), value: "ファッション"),
    const DropdownMenuItem<String>(child: Text("カフェ"), value: "カフェ"),
  ];
  String? category1; // 作为组件状态变量

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: FirebaseFirestore.instance.collection('user').doc(user.email!).snapshots(),
      builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
        if (snapshot.hasData && snapshot.data!.exists) {
          Map<String, dynamic> userData = snapshot.data!.data() as Map<String, dynamic>;
          // 仅当本地状态未初始化时，才用远程数据赋值
          if (category1 == null) {
            category1 = userData["category1"];
          }

          return SizedBox(
            width: 220,
            child: DropdownButtonFormField(
              dropdownColor: Colors.white,
              style: const TextStyle(color: Colors.black),
              decoration: const InputDecoration(
                border: InputBorder.none,
              ),
              value: category1,
              items: categoryList,
              onChanged: (String? value) {
                // 修正setState的语法错误
                setState(() {
                  category1 = value;
                });
              },
            ),
          );
        }
        // 数据未加载完成时的占位UI
        return const CircularProgressIndicator();
      },
    );
  }
}

额外说明 #

• 代码修复了原代码的语法问题：比如setState的正确写法、Map的类型声明、SizedBox的结构错误等
• 如果后续需要监听Firebase数据的实时同步（远程数据修改后同步本地），可以添加逻辑判断：当远程数据与本地状态不一致时再更新本地状态（需根据业务需求调整）

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