Flutter多选下拉框异步数据选择不保存问题求助及替代库咨询

原因定位 #

你遇到的选中状态丢失问题，核心原因是FutureBuilder的使用方式错误：

• 你把_getSkills()直接传给FutureBuilder的future参数，每次setState()触发组件重建时，都会重新调用_getSkills()获取新的Skill列表实例。
• CustomDropdown内部是通过对象实例来识别选中项的，新列表里的Skill对象和之前选中的Skill对象虽然内容一致，但不是同一个实例，导致控件无法匹配，选中状态自然丢失。
• 固定本地列表是同一个全局实例，不会随重建而改变，所以选中状态能正常保留。

修复方案 #

将异步获取的技能列表缓存到State变量中，避免每次重建都重新请求：

class _HomeScreenState extends State<HomeScreen> with AfterLayoutMixin<HomeScreen> {
  final SkillRepository _skillRepository = injector.get();
  List<Skill>? _skills;
  List<Skill> _selectedSkills = [];

  @override
  void initState() {
    super.initState();
    // 在initState中一次性获取数据，避免重复请求
    _fetchSkills();
  }

  Future<void> _fetchSkills() async {
    final skills = await _skillRepository.retrieveAll();
    setState(() {
      _skills = skills;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_skills == null) {
      return const CircularProgressIndicator();
    }
    return CustomDropdown<Skill>.multiSelect(
      hintText: 'Compétences',
      items: _skills!,
      onListChanged: (value) => setState(() {
        log('changing value to: $value');
        _selectedSkills = value;
      }),
      // 显式传入选中值，确保控件状态同步
      initialList: _selectedSkills,
    );
  }
}

关键改动点：

1. 在initState中调用_fetchSkills()，只请求一次数据并缓存到_skills变量
2. 移除FutureBuilder，直接根据_skills的状态判断显示加载或下拉框
3. 给CustomDropdown添加initialList参数，显式绑定选中状态，确保控件和State数据同步

可选优化：使用FutureBuilder的正确姿势 #

如果一定要保留FutureBuilder，需要确保future参数是一个不会随重建重复创建的Future对象：

class _HomeScreenState extends State<HomeScreen> with AfterLayoutMixin<HomeScreen> {
  final SkillRepository _skillRepository = injector.get();
  late Future<List<Skill>> _skillsFuture; // 用late初始化，只创建一次
  List<Skill> _selectedSkills = [];

  @override
  void initState() {
    super.initState();
    _skillsFuture = _skillRepository.retrieveAll(); // 只在initState中创建一次Future
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _skillsFuture,
      builder: (BuildContext context, AsyncSnapshot<List<Skill>> snapshot) {
        if (snapshot.hasData) {
          return CustomDropdown<Skill>.multiSelect(
            hintText: 'Compétences',
            items: snapshot.data!,
            onListChanged: (value) => setState(() {
              log('changing value to: $value');
              _selectedSkills = value;
            }),
            initialList: _selectedSkills,
          );
        } else {
          return const CircularProgressIndicator();
        }
      },
    );
  }
}

推荐多选下拉库 #

针对异步数据源的多选下拉需求，推荐以下几个成熟库：

• dropdown_search：支持异步数据源加载、多选、搜索过滤，功能全面，文档完善
• multi_select_flutter：UI定制性强，支持多种样式，适配异步数据场景
• flutter_multiselect：轻量易用，API简洁，适合快速实现基础多选功能

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