Flutter中如何循环渲染Card组件？类比Angular的*ngFor

嘿，我懂你习惯了Angular里用*ngFor快速循环渲染组件的爽感，在Flutter里其实也有非常直接的实现方式，主要靠生成Widget列表来达成，下面我结合你的代码片段给你演示两种常用的方案：

方案1：用ListView.builder（推荐长列表） #

ListView.builder是Flutter里处理列表渲染的首选，它是懒加载模式——只会渲染当前屏幕可见的组件，性能拉满，适合数据量较大的场景。

修改你的代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyCardList(), // 把原来的MyCard改成这个列表组件
    );
  }
}

class MyCardList extends StatelessWidget {
  const MyCardList({super.key});

  // 先准备你的数据源，可以是自定义模型、字符串、Map，这里用Map模拟业务数据
  final List<Map<String, String>> cardItems = [
    {"title": "卡片1", "desc": "这是第一张循环出来的卡片"},
    {"title": "卡片2", "desc": "第二张卡片的内容"},
    {"title": "卡片3", "desc": "第三张卡片来啦"},
    {"title": "卡片4", "desc": "第四张卡片完成"},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("循环Card示例")),
      body: ListView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
        // 列表项总数，对应你的数据长度
        itemCount: cardItems.length,
        // 每一项的构建逻辑，index就是当前循环的索引（类似Angular里的let i = index）
        itemBuilder: (context, index) {
          final currentItem = cardItems[index];
          // 返回你要循环渲染的Card组件
          return Card(
            elevation: 3, // 给卡片加个阴影效果
            margin: const EdgeInsets.only(bottom: 10),
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    currentItem["title"]!,
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(currentItem["desc"]!),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

方案2：用Column + map（适合短列表） #

如果你的数据量很小（比如只有3-5个卡片），可以直接用Column配合map方法把数据转换成Widget列表，逻辑更直观：

class MyCardList extends StatelessWidget {
  const MyCardList({super.key});

  final List<String> cardTitles = ["卡片1", "卡片2", "卡片3"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("短列表循环Card")),
      body: Padding(
        padding: const EdgeInsets.all(8),
        child: Column(
          // 把字符串列表转换成Card组件列表
          children: cardTitles.map((title) {
            return Card(
              margin: const EdgeInsets.only(bottom: 8),
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Text(title, style: const TextStyle(fontSize: 16)),
              ),
            );
          }).toList(), // 一定要调用toList()把Iterable转成List<Widget>
        ),
      ),
    );
  }
}

核心逻辑说明 #

Flutter里循环渲染的本质就是将数据源转换成List<Widget>，和Angular的*ngFor逻辑完全对应：

• 数据源对应Angular里的数组
• itemBuilder/map的回调对应*ngFor里的模板
• index对应Angular里的循环索引

这样改完之后，你就能像在Angular里那样轻松循环渲染Card组件啦～

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