Firebase产品按ID从高到低排序展示的Flutter实现需求

有两种可行的修改方式，根据你的需求选择：

方式一：客户端直接调整现有列表排序 #

如果productController.wild已经是按ID从小到大加载的列表，直接在生成GridView子组件前处理列表即可：

快速反转列表（适合已按正序加载的场景） #

修改WildWidget的build方法，调整children的生成逻辑：

class WildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Obx(()=>GridView.count(
        crossAxisCount: 3,
        childAspectRatio: .48,
        padding: const EdgeInsets.all(15),
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 10,
        // 反转列表实现倒序展示
        children: productController.wild.reversed.map((ProductModel product) {
          return SingleProductWidget(product: product,);
        }).toList())
    );
  }
}

精确按ID倒序排序（适合ID为数字类型的场景） #

如果product.id是数字类型（如int），可以用排序方法确保严格倒序：

class WildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Obx((){
      // 复制原列表避免修改源数据
      final sortedProducts = List<ProductModel>.from(productController.wild);
      // 按ID倒序排序
      sortedProducts.sort((a, b) => b.id.compareTo(a.id));
      
      return GridView.count(
        crossAxisCount: 3,
        childAspectRatio: .48,
        padding: const EdgeInsets.all(15),
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 10,
        children: sortedProducts.map((ProductModel product) {
          return SingleProductWidget(product: product,);
        }).toList()
      );
    });
  }
}

方式二：从Firebase查询时直接按ID倒序获取（推荐） #

这种方式更高效，减少客户端计算开销，直接在数据查询阶段指定排序规则：

Firestore查询示例 #

// 在获取产品数据的代码中修改查询规则
FirebaseFirestore.instance
  .collection('products')
  .orderBy('id', descending: true) // 指定按id字段倒序
  .get()
  .then((snapshot) {
    // 将查询结果解析后赋值给productController.wild
  });

Realtime Database查询示例 #

FirebaseDatabase.instance
  .ref('products')
  .orderByChild('id')
  .orderByChild('id', descending: true) // 指定倒序
  .once()
  .then((snapshot) {
    // 解析数据并赋值给productController.wild
  });

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