如何在Flutter的ListView中展示多属性Model类列表？

1. 定义多属性模型类 #

和C#的实体类逻辑一致，用Dart类封装你的Product多属性：

class Product {
  final int id;
  final String name;
  final double price;
  final String description;

  // 构造函数
  Product({
    required this.id,
    required this.name,
    required this.price,
    required this.description,
  });
}

2. 准备模型列表数据源 #

模拟初始化一组Product数据，和C#里初始化List<Product>逻辑一致：

final List<Product> productList = [
  Product(
    id: 1,
    name: "无线耳机",
    price: 299.99,
    description: "降噪蓝牙5.3，续航24小时",
  ),
  Product(
    id: 2,
    name: "智能手表",
    price: 899.00,
    description: "心率监测，防水50米",
  ),
  Product(
    id: 3,
    name: "平板电脑",
    price: 2499.00,
    description: "10.9英寸屏幕，8G+256G",
  ),
];

3. 用 ListView.builder 展示（推荐大量数据场景） #

这是性能最优的方式，支持懒加载渲染：

ListView.builder(
  padding: const EdgeInsets.all(16),
  itemCount: productList.length,
  itemBuilder: (context, index) {
    // 取出当前索引的Product对象
    final product = productList[index];
    // 自定义列表项UI，展示多属性
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      child: Padding(
        padding: const EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "商品ID: ${product.id}",
                  style: const TextStyle(color: Colors.grey, fontSize: 12),
                ),
                Text(
                  product.name,
                  style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                ),
              ],
            ),
            const SizedBox(height: 8),
            Text(
              "价格: ¥${product.price.toStringAsFixed(2)}",
              style: const TextStyle(color: Colors.red, fontSize: 14),
            ),
            const SizedBox(height: 4),
            Text(
              product.description,
              style: const TextStyle(fontSize: 13, color: Colors.black54),
            ),
          ],
        ),
      ),
    );
  },
)

4. 用普通 ListView 展示（适合少量数据） #

如果数据量很小，也可以直接遍历模型列表生成子元素：

ListView(
  padding: const EdgeInsets.all(16),
  children: productList.map((product) {
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      child: Padding(
        padding: const EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("ID: ${product.id}"),
            Text("名称: ${product.name}", style: const TextStyle(fontWeight: FontWeight.bold)),
            Text("价格: ¥${product.price}"),
            Text("描述: ${product.description}"),
          ],
        ),
      ),
    );
  }).toList(),
)

核心逻辑就是：先通过类封装多属性模型，再将模型列表作为数据源，在ListView的构建逻辑中取出单个模型对象，按需展示它的各个属性，UI部分可根据业务需求自由调整布局。

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