如何实现Flutter中VerticalCardPager卡片的点击跳转功能？

要实现卡片点击跳转详情页，你需要给每个卡片添加点击交互，并创建对应的详情页面，具体步骤及代码如下：

1. 为卡片添加点击事件 #

将VerticalCardPager的images列表中每个组件用GestureDetector包裹，通过onTap触发页面跳转，同时携带当前英雄的数据。

2. 创建详情页面 #

新建详情页面组件，接收选中的HeroModel数据，展示对应内容（示例中展示英雄名称和GIF）。

修改后的完整代码 #

主页面代码 #

import 'package:flutter/material.dart';
import 'package:vertical_card_pager/vertical_card_pager.dart';
import 'models/hero_model.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<HeroModel> heros = [
    HeroModel("JETT", "images/jett_valo.gif"),
    HeroModel("KILLJOY", "images/killjoy_valo.gif"),
    HeroModel("SAGE", "images/sage_valo.gif"),
    HeroModel("SOVA", "images/sova_valo.gif"),
    HeroModel("VIPER", "images/viper_valo.gif"),
    HeroModel("RAZE", "images/raze_valo.gif"),
    HeroModel("YORU", "images/yoru_valo.gif"),
    HeroModel("BREACH", "images/breach_valo.gif"),
    HeroModel("ASTRA", "images/astra_valo.gif"),
    HeroModel("CYPHER", "images/cypher_valo.gif"),
    HeroModel("OMEN", "images/omen_valo.gif"),
    HeroModel("PHOENIX", "images/phoenix_valo.gif"),
    HeroModel("SKYE", "images/skye_valo.gif"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Column(
      children: [
        SizedBox(
          width: double.infinity,
          height: 70,
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 5),
            child: Center(
              child: Image.asset(
                "images/logo.png",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        Expanded(
            child: VerticalCardPager(
          titles: [for (var hero in heros) hero.title],
          images: [
            for (var hero in heros)
              GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => HeroDetailPage(hero: hero),
                    ),
                  );
                },
                child: Hero(
                  tag: hero.title,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20.0),
                    child: Image.asset(
                      hero.image,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
          ],
          textStyle:
              const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          initialPage: 2,
          align: ALIGN.CENTER,
        ))
      ],
    )));
  }
}

// 详情页面组件
class HeroDetailPage extends StatelessWidget {
  final HeroModel hero;

  const HeroDetailPage({super.key, required this.hero});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(hero.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Hero(
              tag: hero.title,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20.0),
                child: Image.asset(
                  hero.image,
                  width: 300,
                  height: 300,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            const SizedBox(height: 20),
            Text(
              hero.title,
              style: const TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            // 可在此添加更多详情内容
          ],
        ),
      ),
    );
  }
}

HeroModel 模型代码（models/hero_model.dart） #

class HeroModel {
  final String title;
  final String image;

  HeroModel(this.title, this.image);
}

说明 #

• 用GestureDetector包裹每个卡片组件，通过onTap触发Navigator.push跳转到详情页。
• 详情页接收传递的HeroModel数据，展示对应内容，同时保留Hero动画效果，让跳转过渡更流畅。

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