Flutter下拉框联动数据更新后UI不刷新问题求助

问题根源 #

你用FutureBuilder的核心问题是：FutureBuilder只会在绑定的Future对象发生变化时才会重新构建。你之前只是更新了数据源列表，但绑定的Future还是初始化时的那个实例，所以即使数据变了，FutureBuilder也不会触发UI刷新；热重载时会重新初始化Future，因此才会生效。

解决方案 #

方案一：直接在State中管理数据（推荐，最简单） #

放弃用FutureBuilder管理车型列表，直接在State中维护厂商、车型的列表状态，选中厂商后异步加载车型，加载完成调用setState刷新UI，下拉框直接绑定State中的列表。

示例代码：

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

  @override
  State<CarSelector> createState() => _CarSelectorState();
}

class _CarSelectorState extends State<CarSelector> {
  // 厂商列表
  List<String> _brands = [];
  // 当前选中的厂商
  String? _selectedBrand;
  // 对应车型列表
  List<String> _models = [];
  // 加载状态标识
  bool _isLoadingModels = false;

  @override
  void initState() {
    super.initState();
    // 初始化加载厂商数据
    _loadBrands();
  }

  // 模拟异步获取厂商数据
  Future<void> _loadBrands() async {
    await Future.delayed(const Duration(milliseconds: 500));
    setState(() {
      _brands = ['宝马', '奔驰', '奥迪', '特斯拉'];
    });
  }

  // 模拟异步获取对应车型数据
  Future<void> _loadModels(String brand) async {
    setState(() {
      _isLoadingModels = true;
      _models = []; // 清空旧数据，避免显示之前的车型
    });

    await Future.delayed(const Duration(milliseconds: 500));
    Map<String, List<String>> brandModels = {
      '宝马': ['3系', '5系', 'X3'],
      '奔驰': ['C级', 'E级', 'GLC'],
      '奥迪': ['A4L', 'A6L', 'Q5L'],
      '特斯拉': ['Model 3', 'Model Y'],
    };

    setState(() {
      _isLoadingModels = false;
      _models = brandModels[brand] ?? [];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('选择汽车厂商'),
          DropdownButton<String>(
            value: _selectedBrand,
            hint: const Text('请选择'),
            isExpanded: true,
            items: _brands.map((brand) {
              return DropdownMenuItem(
                value: brand,
                child: Text(brand),
              );
            }).toList(),
            onChanged: (String? brand) {
              setState(() {
                _selectedBrand = brand;
                _models = [];
              });
              if (brand != null) {
                _loadModels(brand);
              }
            },
          ),
          const SizedBox(height: 16),
          const Text('选择车型'),
          if (_isLoadingModels)
            const CircularProgressIndicator()
          else
            DropdownButton<String>(
              value: null,
              hint: const Text('请先选择厂商'),
              isExpanded: true,
              items: _models.map((model) {
                return DropdownMenuItem(
                  value: model,
                  child: Text(model),
                );
              }).toList(),
              onChanged: (String? model) {
                // 处理车型选择逻辑
              },
            ),
        ],
      ),
    );
  }
}

方案二：用FutureBuilder但更新绑定的Future #

如果你一定要用FutureBuilder，需要在选中厂商时，重新创建一个新的Future对象并赋值给State中的变量，触发FutureBuilder重新构建。

示例代码片段：

class _CarSelectorState extends State<CarSelector> {
  List<String> _brands = [];
  String? _selectedBrand;
  // 把车型的Future存在State中
  Future<List<String>>? _modelsFuture;

  @override
  void initState() {
    super.initState();
    _loadBrands();
  }

  Future<void> _loadBrands() async {
    await Future.delayed(const Duration(milliseconds: 500));
    setState(() {
      _brands = ['宝马', '奔驰', '奥迪', '特斯拉'];
    });
  }

  Future<List<String>> _fetchModels(String brand) async {
    await Future.delayed(const Duration(milliseconds: 500));
    Map<String, List<String>> brandModels = {
      '宝马': ['3系', '5系', 'X3'],
      '奔驰': ['C级', 'E级', 'GLC'],
      '奥迪': ['A4L', 'A6L', 'Q5L'],
      '特斯拉': ['Model 3', 'Model Y'],
    };
    return brandModels[brand] ?? [];
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('选择汽车厂商'),
          DropdownButton<String>(
            value: _selectedBrand,
            hint: const Text('请选择'),
            isExpanded: true,
            items: _brands.map((brand) => DropdownMenuItem(value: brand, child: Text(brand))).toList(),
            onChanged: (brand) {
              setState(() {
                _selectedBrand = brand;
                // 关键：重新赋值Future，触发FutureBuilder刷新
                _modelsFuture = brand != null ? _fetchModels(brand) : null;
              });
            },
          ),
          const SizedBox(height: 16),
          const Text('选择车型'),
          if (_modelsFuture != null)
            FutureBuilder<List<String>>(
              future: _modelsFuture,
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const CircularProgressIndicator();
                } else if (snapshot.hasError) {
                  return const Text('加载车型失败');
                } else {
                  final models = snapshot.data ?? [];
                  return DropdownButton<String>(
                    hint: const Text('请选择'),
                    isExpanded: true,
                    items: models.map((model) => DropdownMenuItem(value: model, child: Text(model))).toList(),
                    onChanged: (model) {
                      // 处理车型选择
                    },
                  );
                }
              },
            )
          else
            const Text('请先选择厂商'),
        ],
      ),
    );
  }
}

是否需要改用StreamBuilder？ #

不需要。StreamBuilder适用于持续的数据流场景（比如后端实时推送数据、WebSocket更新、定时器循环输出等），而你的场景是用户主动选择厂商后触发单次异步请求，用State直接管理数据或者更新Future的FutureBuilder方案就足够简单高效，没必要引入StreamBuilder增加复杂度。

原方案繁琐的原因 #

你之前的问题在于用FutureBuilder管理车型数据，但没有理解FutureBuilder的触发逻辑——它依赖的是Future对象的引用变化，而不是内部数据的变化。所以即使你更新了数据源列表，只要Future实例没换，FutureBuilder就不会重新构建，导致UI不刷新。

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