Flutter ShadCN UI 中长列表搜索性能优化指南

问题背景

在使用 Flutter ShadCN UI 库的 ShadSelect.withSearch 组件时，当处理包含大量数据的长列表（如城市选择器）时，用户遇到了明显的性能问题。组件在搜索和渲染过程中出现卡顿，影响了用户体验。

性能瓶颈分析

1. 全量数据加载：组件一次性加载所有城市数据（约8000条记录），导致内存占用高
2. 频繁重建：每次搜索输入变化都会触发整个列表的重新过滤和重建
3. 同步处理：在主线程上执行大量数据的过滤操作，阻塞UI线程

解决方案

最新发布的 v0.7.1 版本引入了 optionsBuilder 参数，提供了更高效的列表处理方式：

1. 懒加载机制：可以分批加载数据，避免一次性处理全部记录
2. 异步构建：允许在后台线程处理数据过滤和选项构建
3. 内存优化：通过返回 null 表示数据已全部加载完毕，减少不必要的内存占用

实现示例

ShadSelect<City>.withSearch(
  initialValue: _selectedCity,
  placeholder: const Text('选择城市'),
  onSearchChanged: (value) => setState(() {
    _searchValue = value;
  }),
  onChanged: (value) => setState(() {
    widget.onCitySelected(value);
    _selectedCity = value;
  }),
  searchPlaceholder: const Text('搜索城市'),
  optionsBuilder: (offset, limit) async {
    final filtered = snapshot.data
        ?.where((e) => e.name?.toLowerCase().contains(_searchValue ?? "") ?? false)
        .skip(offset)
        .take(limit)
        .map((city) => ShadOption(
              value: city,
              child: Text(city.name ?? ""),
            ))
        .toList();
    
    return filtered?.isEmpty ?? true ? null : filtered;
  },
  selectedOptionBuilder: (context, value) => Text(_selectedCity?.name ?? ""),
)

最佳实践建议

1. 分页加载：合理设置每批加载的数量（如50-100条）
2. 本地缓存：对已加载的数据进行缓存，减少重复处理
3. 防抖处理：对搜索输入变化添加防抖，避免频繁重建
4. 预加载：在用户滚动接近底部时预加载下一批数据
5. 虚拟列表：考虑结合虚拟列表技术进一步优化长列表性能

结论

通过使用新的 optionsBuilder 参数，开发者可以显著提升 ShadSelect.withSearch 组件在处理长列表时的性能表现。这种懒加载和分批处理的模式不仅解决了当前的性能问题，也为未来处理更大规模数据集提供了良好的扩展性。