Flutter ListView绑定Firestore字段实现点击跳转到不同路由问题

你的点击事件未生效是因为GestureDetector的用法存在逻辑错误：你在onTap回调内部仅声明了一个全新的GestureDetector对象，既没有将其挂载到组件树，也没有实际调用gotoPage方法，点击后没有任何可执行的操作逻辑。

仅需要调整ListView.builder的itemBuilder部分代码即可：

1. 将GestureDetector套在卡片最外层Container的外部，保证整个卡片区域的点击动作都能被捕获
2. 直接在onTap回调中执行gotoPage方法，删除原来嵌套定义的无效GestureDetector

修改后的核心代码片段 #

itemBuilder: (context, index) {
  // 提前提取当前文档数据，简化后续代码
  final docData = querySnapshot.docs[index].data();
  return GestureDetector(
    // 直接调用跳转逻辑，增加空值判断避免字段缺失导致崩溃
    onTap: () => gotoPage(docData['page'] ?? 'unknown'),
    child: Container(
      height: 214.8,
      width: 188.4,
      margin: EdgeInsets.only(right: 16.8, bottom: 50),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(9.6),
        image: DecorationImage(
          fit: BoxFit.cover,
          image: CachedNetworkImageProvider(
              docData['image'],
              maxHeight: 200,
              maxWidth: 200),
        ),
      ),
      child: Stack(
        children: <Widget>[
          // 此处原来的无效GestureDetector已删除
          Positioned(
            bottom: 19.2,
            left: 19.2,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(4.8),
              child: BackdropFilter(
                filter: ImageFilter.blur(
                    sigmaY: 19.2, sigmaX: 19.2),
                child: Container(
                  height: 26,
                  padding: EdgeInsets.only(
                      left: 0.0, right: 0.0),
                  alignment: Alignment.centerLeft,
                  child: Row(
                    children: <Widget>[
                      SizedBox(
                        width: 9.52,
                      ),
                      SvgPicture.asset(
                          'assets/svg/icon_location.svg'),
                      SizedBox(
                        width: 9.52,
                      ),
                      SvgPicture.asset(
                        'assets/svg/icon_location.svg',
                        height: 50,
                      ),
                      SizedBox(
                        width: 9.52,
                      ),
                      SvgPicture.asset(
                          'assets/svg/icon_location.svg'),
                      SizedBox(
                        width: 9.52,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: Container(
              margin: EdgeInsets.all(70),
              child: Text(
                docData['title'],
                style: TextStyle(
                    fontSize: 27,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
                textAlign: TextAlign.left,
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

• 可以将gotoPage方法的default分支改为弹出提示告知用户页面不存在，代替直接抛出异常，避免APP意外崩溃
• 当前代码外层嵌套了两层垂直滚动的ListView，可以删除外层的ListView直接返回ListView.builder，减少不必要的组件嵌套，同时避免滚动冲突

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