如何实现点击可跳转至详情页的ListView，并将对应列表项的JSON API数据传递至详情页

要实现点击列表卡片后，详情页展示对应项的内容，你只需要完成以下几个关键步骤：

1. 让详情页（PostDetails）支持接收数据 #

首先，修改PostDetails组件，通过构造函数接收从列表页传递过来的内容数据：

class PostDetails extends StatelessWidget {
  // 定义final变量存储接收的文章数据
  final Map<String, dynamic> postContent;

  // 构造函数，强制要求传入postContent
  const PostDetails({super.key, required this.postContent});

  @override
  Widget build(BuildContext context) {
    // 从传递的数据中提取需要展示的字段，添加空值判断避免异常
    String imageUrl = postContent['yoast_head_json']?['og_image']?[0]?['url'] ?? '';
    String title = postContent['title']?['rendered'] ?? '无标题';
    String date = postContent['date'] ?? '未知日期';

    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 展示文章封面图
            if (imageUrl.isNotEmpty)
              ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: Image.network(imageUrl),
              ),
            SizedBox(height: 16),
            // 展示文章标题
            Text(
              title,
              style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            // 展示发布日期
            Text(
              '发布时间：$date',
              style: TextStyle(color: Colors.grey[600]),
            ),
            // 可继续添加文章正文、作者等其他内容
          ],
        ),
      ),
    );
  }
}

注：我添加了?和??的空值保护，避免API返回数据缺失时出现崩溃，你可以根据实际接口结构调整这些判断。

2. 修改卡片点击事件，传递当前项数据 #

更新你的postCard函数，让它接收context（导航需要上下文），并在点击时把当前卡片对应的内容传给详情页：

Widget postCard(BuildContext context, dynamic content) {
  var imageURL = content['yoast_head_json']['og_image'][0]['url'];
  var title = content['title']['rendered'];
  var date = content['date'];
  print(title);
  
  return Padding(
    padding: const EdgeInsets.only(bottom: 15.0),
    child: Card(
      color: Colors.white,
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(25),
      ),
      child: InkWell(
        onTap: () {
          // 点击时导航到详情页，传入当前项的完整数据
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => PostDetails(postContent: content),
            ),
          );
        },
        // 保留你原来的卡片内部UI（图片、标题、日期等）即可
        child: ... // 你的卡片内容代码
      ),
    ),
  );
}

3. 调整ListView的调用方式 #

最后，在getData函数的itemBuilder中，把context和当前项的content[index]传递给postCard：

Widget getData() {
  return ListView.builder(
    physics: AlwaysScrollableScrollPhysics(),
    shrinkWrap: true,
    scrollDirection: Axis.vertical,
    itemCount: content.length,
    itemBuilder: (context, index) {
      // 传递上下文和当前项的数据
      return postCard(context, content[index]);
    },
  );
}

这样完成后，点击任意列表卡片时，对应的文章数据就会被传递到详情页，详情页就能展示与点击项完全一致的内容了。

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