Flutter如何实现带标题的多卡片列表并修复返回类型不匹配报错

• 类型不匹配：listofcards() 返回的是 FutureBuilder 组件，你直接将其作为 Row 的 children 元素，而 children 要求传入 List<Widget> 类型，不符合类型约束触发报错。
• 逻辑错误：FutureBuilder 的 builder 闭包中，你向未定义的 containers 变量添加卡片，最后返回的是初始化后为空的 cards 列表，无法正确渲染异步获取的卡片数据。
• 结构不合理：异步请求嵌套在组件生成逻辑中，没有处理加载、异常状态，空值调用也会引发运行时崩溃。

调整思路：将异步逻辑和组件渲染分离，每个文档对应的卡片数据请求完成后再组装成「标题+横向卡片组」的结构，完整实现代码如下：

// 外层已经获取到 List<html.Document> 的 snapshot
body: ListView.builder(
  itemCount: snapshot.data!.length,
  itemBuilder: (context, index) {
    final document = snapshot.data![index];
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 你需要添加的 Text 1 标题文本
          Text(
            "Text ${index + 1}",
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 8),
          // 异步获取当前文档对应的卡片数据
          FutureBuilder<List<tage>>(
            future: SiteParser().getData(document),
            builder: (context, cardSnapshot) {
              // 加载状态
              if (cardSnapshot.connectionState == ConnectionState.waiting) {
                return const Center(child: CircularProgressIndicator());
              }
              // 错误状态
              if (cardSnapshot.hasError || !cardSnapshot.hasData) {
                return const Text("加载失败");
              }
              // 卡片数据加载完成，渲染横向卡片行
              return SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: cardSnapshot.data!.map((tage item) {
                    return Padding(
                      padding: const EdgeInsets.only(right: 8),
                      child: _buildCard(item),
                    );
                  }).toList(),
                ),
              );
            },
          )
        ],
      ),
    );
  },
)

// 保留你原来的 _buildCard 方法即可
_buildCard(tage snap) {
  return Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    color: MyThemes().choosecardcolor(snap),
    elevation: 5,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(snap.stunde),
              Text(snap.klasse),
              Text(snap.raum)
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(snap.art),
              Text(snap.lehrer),
              Text(snap.mitteilung)
            ],
          )
        ],
      ),
    ),
  );
}

• 用 ListView.builder 替代手动组装组件列表，性能更好，适合长列表场景
• 给卡片行加了横向滚动处理，避免卡片数量过多超出屏幕宽度导致溢出报错
• 补充了加载、异常状态处理，避免空值异常
• 简化了冗余的 getItems、toRow、listofcards 方法，逻辑更清晰

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