Flutter中相同Widget组成的列表点击指定Card如何跳转对应路由？

你当前的实现存在两个核心问题：

• 所有卡片的Key都使用了当前登录用户的邮箱，完全重复，无法区分不同图书卡片
• 提前构建所有卡片Widget存入列表再传入Column渲染，性能较差，图书数量多的时候容易出现卡顿

具体实现步骤 #

1. 提取Firestore图书唯一标识 #

你从Firestore查询图书数据时，每条图书文档都自带唯一的documentID，拉取数据时将该ID和title、author、bookCoverURL等业务字段一起存入你的图书数据模型中即可。

2. 改造点击跳转逻辑 #

修改GestureDetector的onTap回调，直接将当前点击的图书的完整数据/唯一ID传递给目标详情页即可，示例代码如下：

// 示例：已定义Book数据类，包含id、title、author、category、bookCoverURL等属性
final bookWidget = GestureDetector(
  key: ValueKey(book.id), // 改用图书唯一ID作为Key，保证全局唯一
  onTap: () {
    // 跳转对应图书的详情页，将当前图书数据作为参数传入
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => BookDetailPage(book: book),
      ),
    );
  },
  child: /* 原有Card代码无需修改 */
);

3. （可选性能优化）替换列表渲染逻辑 #

不要提前把所有卡片Widget构建好存入静态列表，改用ListView.builder按需构建组件，大幅提升长列表性能：

// 示例：List<Book> books为从Firestore拉取的全量图书数据
ListView.builder(
  itemCount: books.length,
  itemBuilder: (context, index) {
    final currentBook = books[index];
    return GestureDetector(
      key: ValueKey(currentBook.id),
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => BookDetailPage(book: currentBook)),
      ),
      child: Card(/* 原有Card实现逻辑不变 */),
    );
  }
)

如果该列表需要嵌套在其他滚动组件中，给ListView.builder添加shrinkWrap: true和physics: NeverScrollableScrollPhysics()属性即可正常使用。

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