Flutter中基于FutureBuilder按LocationId筛选设施列表的问题

当然可以实现你想要的筛选逻辑，Dart里用where方法就能达到类似JS中filter的效果。先说说你当前代码存在的几个问题：

• 循环里找到第一个匹配项就直接return，只会渲染单个ListTile，没法展示所有符合条件的设施
• 没有处理Future的加载中和错误状态，页面会出现空白或直接抛出异常
• 匹配不到设施时直接throw错误，应该显示友好的提示组件

下面是修正后的完整代码：

class _Locations extends State<Locations> with SingleTickerProviderStateMixin {
  late Future<Amenities> amenities;

  @override
  void initState() {
    super.initState();
    amenities = AmenitiesDataApi.getAmenities();
  }

  Widget localAttractionsTab(String locationid) { // 建议给locationid指定类型，比如String/int
    return Column(
      children: <Widget>[
        FutureBuilder<Amenities>(
          future: amenities,
          builder: (BuildContext context, AsyncSnapshot<Amenities> snapshot) {
            // 处理加载中状态
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(child: CircularProgressIndicator());
            }
            // 处理错误状态
            if (snapshot.hasError) {
              return Center(child: Text('加载失败: ${snapshot.error}'));
            }
            // 数据加载完成，执行筛选
            if (snapshot.hasData) {
              // 用where实现类似filter的筛选，转成List方便遍历
              final filteredAmenities = snapshot.data!.amenities
                  .where((amen) => amen.locationid == locationid)
                  .toList();
              
              // 没有匹配的设施时显示提示
              if (filteredAmenities.isEmpty) {
                return const Center(child: Text('该地点暂无设施'));
              }
              
              // 生成所有匹配的ListTile
              return Expanded(
                child: ListView.builder(
                  itemCount: filteredAmenities.length,
                  itemBuilder: (context, index) {
                    final amenity = filteredAmenities[index];
                    return ListTile(
                      title: Text(amenity.amenityname),
                      // 可以添加更多属性，比如subtitle、leading等
                    );
                  },
                ),
              );
            }
            // 默认返回加载状态（理论上不会走到这里）
            return const Center(child: CircularProgressIndicator());
          },
        ),
      ],
    );
  }
}

关键说明：

• 用where((amen) => amen.locationid == locationid)实现你要的筛选逻辑，和JS的filter完全对应，最后用toList()转成可遍历的列表
• 新增了加载中、错误状态的处理，提升用户体验
• 用ListView.builder来构建列表，比直接循环生成ListTile更高效，尤其是数据量较大时
• 匹配不到设施时返回提示文本，替代原来的throw错误

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