Flutter中如何访问List内PointsOfServices的Orders对象并构建GridView？

一、获取Orders数据并与PointsOfServices数据结合 #

假设你的PointsOfServices和Orders类结构如下：

class PointsOfServices {
  String id;
  String name;
  Orders orders;

  PointsOfServices({required this.id, required this.name, required this.orders});
}

class Orders {
  String orderId;
  double totalAmount;

  Orders({required this.orderId, required this.totalAmount});
}

要同时使用两类数据，直接遍历列表时访问每个PointsOfServices对象的orders属性即可：

List<PointsOfServices> posList = [...]; // 你的数据源

// 遍历获取并使用组合数据
for (var pos in posList) {
  String posName = pos.name;
  String orderId = pos.orders.orderId;
  double total = pos.orders.totalAmount;
  // 此处可直接同时使用门店和订单数据做后续逻辑处理
}

如果需要将数据封装成统一模型，也可以新建组合类：

class PosWithOrder {
  PointsOfServices pos;
  Orders order;

  PosWithOrder({required this.pos, required this.order});
}

// 转换数据源为组合列表
List<PosWithOrder> combinedList = posList.map((pos) => PosWithOrder(pos: pos, order: pos.orders)).toList();

二、用Future和FutureBuilder实现GridView #

完全可以用Future和FutureBuilder实现这个GridView，尤其适合数据源来自异步操作（比如网络请求、本地数据库读取）的场景。

示例代码 #

1. 定义异步获取数据源的方法：

Future<List<PointsOfServices>> fetchPosData() async {
  // 模拟异步数据获取流程，实际可替换为网络请求或本地读取
  await Future.delayed(const Duration(seconds: 2));
  return [
    PointsOfServices(
      id: "1",
      name: "门店A",
      orders: Orders(orderId: "O001", totalAmount: 120.5),
    ),
    PointsOfServices(
      id: "2",
      name: "门店B",
      orders: Orders(orderId: "O002", totalAmount: 89.0),
    ),
    // 更多模拟数据...
  ];
}

2. 使用FutureBuilder构建GridView：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text("门店订单列表")),
    body: FutureBuilder<List<PointsOfServices>>(
      future: fetchPosData(),
      builder: (context, snapshot) {
        // 处理异步状态
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text("加载失败：${snapshot.error}"));
        } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
          return const Center(child: Text("暂无数据"));
        } else {
          // 数据加载完成，构建GridView
          return GridView.builder(
            padding: const EdgeInsets.all(16),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              childAspectRatio: 0.8,
            ),
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final pos = snapshot.data![index];
              final order = pos.orders;
              // 构建Grid项，同时展示门店与订单数据
              return Card(
                elevation: 3,
                child: Padding(
                  padding: const EdgeInsets.all(12),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("门店：${pos.name}", style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                      const SizedBox(height: 8),
                      Text("订单号：${order.orderId}"),
                      const SizedBox(height: 8),
                      Text("订单金额：¥${order.totalAmount.toStringAsFixed(2)}"),
                    ],
                  ),
                ),
              );
            },
          );
        }
      },
    ),
  );
}

注意事项 #

• 不要在build方法内直接创建Future（比如future: fetchPosData()），建议将Future存储在State类中或使用FutureProvider，避免组件重建时重复触发异步操作。
• 务必处理FutureBuilder的所有状态（等待、错误、无数据、加载完成），提升用户体验。

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