Flutter：如何用FutureBuilder从本地数据库提取数据填充DropdownSearch

你的核心问题在于未正确将FutureBuilder返回的List<PointOfSale>数据转换为DropdownSearch所需格式，同时泛型类型不匹配。以下是具体修复方案：

第一步：优化FutureBuilder的Future调用 #

避免在FutureBuilder的future参数中直接调用PointOfSaleDao.db.getAll()，这会导致组件每次重建时重复执行数据库查询。建议在State类中提前初始化Future：

class YourPageState extends State<YourPage> {
  late final Future<List<PointOfSale>> _posListFuture;

  @override
  void initState() {
    super.initState();
    _posListFuture = PointOfSaleDao.db.getList(); // 调用你的数据库查询方法
  }

  // ... 其他页面代码
}

第二步：修复DropdownSearch的数据源配置 #

根据需求，有两种常见实现方式：

方式1：显示PointOfSale的单个字段（如ID）作为下拉选项 #

如果需要下拉列表展示PointOfSale的id（或其他可转为字符串的字段），保持DropdownSearch<String>泛型，将数据库返回的列表转换为字符串列表：

FutureBuilder(
  future: _posListFuture,
  builder: (BuildContext context, AsyncSnapshot<List<PointOfSale>> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    if (snapshot.hasError) {
      return Center(child: Text('加载失败: ${snapshot.error}'));
    }
    if (!snapshot.hasData || snapshot.data!.isEmpty) {
      return const Center(child: Text('无可用数据'));
    }

    // 将PointOfSale列表转换为ID字符串列表
    final List<String> posIds = snapshot.data!.map((pos) => pos.id.toString()).toList();

    return DropdownSearch<String>(
      mode: Mode.MENU,
      showSearchBox: true,
      showSelectedItem: true,
      items: posIds, // 传入转换后的字符串列表
      onChanged: (value) => print('选中的ID: $value'),
      hint: "sélectionner",
      validator: (value) {
        if (value == null) {
          return "ce champ est obligatoire !";
        }
        return null;
      },
    );
  },
)

方式2：直接处理完整的PointOfSale对象 #

如果需要选中时获取完整的PointOfSale对象，将DropdownSearch的泛型改为PointOfSale，并通过itemAsString指定下拉列表显示的文本：

FutureBuilder(
  future: _posListFuture,
  builder: (BuildContext context, AsyncSnapshot<List<PointOfSale>> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    if (snapshot.hasError) {
      return Center(child: Text('加载失败: ${snapshot.error}'));
    }
    if (!snapshot.hasData || snapshot.data!.isEmpty) {
      return const Center(child: Text('无可用数据'));
    }

    return DropdownSearch<PointOfSale>(
      mode: Mode.MENU,
      showSearchBox: true,
      showSelectedItem: true,
      items: snapshot.data!, // 直接传入PointOfSale列表
      itemAsString: (PointOfSale pos) => pos.id.toString(), // 指定下拉显示的文本（示例为ID）
      onChanged: (PointOfSale? selectedPos) {
        if (selectedPos != null) {
          print('选中的POS: ${selectedPos.id}'); // 可按需访问PointOfSale的其他字段
        }
      },
      hint: "sélectionner",
      validator: (PointOfSale? value) {
        if (value == null) {
          return "ce champ est obligatoire !";
        }
        return null;
      },
    );
  },
)

关键注意事项 #

• 确保PointOfSale类的fromJson方法能正确解析数据库返回的结果，避免数据转换错误。
• 处理快照的connectionState和hasError状态，提升用户体验。
• 若PointOfSale的id本身是字符串类型，无需调用toString()，直接使用即可。

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