Flutter中如何将NewsAPI获取的数据展示到其他文件的卡片中？

步骤1：修改profile_card_alignment.dart，支持传入动态标题 #

将原来的静态标题改为通过构造函数接收外部参数，代码调整如下：

// profile_card_alignment.dart
class ProfileCard extends StatelessWidget {
  // 新增标题参数，标记为必填
  final String cardTitle;

  // 构造函数初始化参数
  const ProfileCard({super.key, required this.cardTitle});

  @override
  Widget build(BuildContext context) {
    return Card(
      // 保留原有卡片布局代码
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        // 替换静态文本为传入的cardTitle
        child: Text(cardTitle),
      ),
    );
  }
}

步骤2：在main.dart中渲染卡片时传入动态标题 #

假设你通过列表循环生成卡片，直接将getList[index]['title']作为参数传入即可：

// main.dart
// 假设这是你渲染列表的代码
ListView.builder(
  itemCount: getList.length,
  itemBuilder: (context, index) {
    return ProfileCard(
      // 传入新闻标题，加??处理空值避免报错
      cardTitle: getList[index]['title'] ?? '暂无标题',
    );
  },
);

新手额外提示 #

• ?? '暂无标题'是为了处理新闻标题为空的情况，防止程序崩溃，可根据需求修改默认文本
• 确保getList是已成功获取到的数据列表，建议用FutureBuilder包裹列表渲染逻辑，处理数据加载、错误状态：

// main.dart中获取数据并渲染的完整示例
FutureBuilder(
  future: fetchNewsFromAPI(), // 你的NewsAPI数据请求方法
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      final getList = snapshot.data as List;
      return ListView.builder(
        itemCount: getList.length,
        itemBuilder: (context, index) {
          return ProfileCard(
            cardTitle: getList[index]['title'] ?? '暂无标题',
          );
        },
      );
    } else if (snapshot.hasError) {
      return Text('加载失败：${snapshot.error}');
    }
    // 数据加载中显示加载动画
    return const CircularProgressIndicator();
  },
);

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