Flutter中如何按ListView的trailing距离值排序，展示最近门店？

核心思路是先计算所有门店与用户的距离，对数据源排序后再传入ListView，无需复杂操作，步骤如下：

1. 定义包含距离字段的门店模型 #

给门店数据增加一个distance字段，用来存储计算后的距离值：

class Store {
  final String name;
  final double latitude;
  final double longitude;
  double? distance; // 存储与用户的距离

  Store({
    required this.name,
    required this.latitude,
    required this.longitude,
  });
}

2. 从Firebase获取数据并完成排序 #

获取原始门店数据后，遍历计算每个门店与用户的距离，再对列表按距离升序排序：

// 替换为实际获取到的用户当前位置经纬度
final userLat = 30.1234; 
final userLng = 120.5678;

// 从Firebase读取门店原始数据
final firestoreSnapshot = await FirebaseFirestore.instance.collection('stores').get();
List<Store> stores = firestoreSnapshot.docs.map((doc) {
  return Store(
    name: doc['name'],
    latitude: doc['latitude'],
    longitude: doc['longitude'],
  );
}).toList();

// 计算每个门店与用户的距离（用geolocator工具函数，也可自行实现距离公式）
for (var store in stores) {
  store.distance = Geolocator.distanceBetween(
    userLat,
    userLng,
    store.latitude,
    store.longitude,
  ) / 1000; // 转换为公里单位
}

// 按距离升序排序，最近的门店排在最前面
stores.sort((a, b) => a.distance!.compareTo(b.distance!));

3. 用排序后的列表构建ListView #

直接将排序后的stores列表传入ListView.builder即可：

ListView.builder(
  itemCount: stores.length,
  itemBuilder: (context, index) {
    final store = stores[index];
    return ListTile(
      title: Text(store.name),
      trailing: Text('${store.distance!.toStringAsFixed(2)} km'),
    );
  },
);

补充：依赖配置 #

如果使用geolocator计算距离，需要在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  geolocator: ^10.1.0 # 建议使用最新版本
  cloud_firestore: ^4.15.0 # Firebase Firestore依赖

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