不可见的 GestureDetector ontap 功能 space

Question

我是 flutter 的新手，所以请原谅我的愚蠢问题，但是我如何将 GestureDetector 扩展到不可见的 space，所以即使用户单击突出显示的区域，它也会注册并执行 ontap 函数？

GestureDetector(
            onTap: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => BusinessPage(
                    business: business,
                  ),
                ),
              );
            },
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: EdgeInsets.only(
                    right: MediaQuery.of(context).size.width * 0.04,
                  ),
                  child: CircleAvatar(
                    radius: MediaQuery.of(context).size.height * 0.028,
                    child: false
                        ? Text(
                            "AS",
                            style: TextStyle(
                              color: Colors.orange.shade800,
                              fontWeight: FontWeight.bold,
                            ),
                          )
                        : ClipOval(
                            clipBehavior: Clip.antiAlias,
                            child: Image.asset(
                              business.logo,
                              height:
                                  MediaQuery.of(context).size.height * 0.0545,
                              fit: BoxFit.cover,
                            ),
                          ),
                  ),
                ),
                Text(
                  business.name,
                  style: TextStyle(
                    fontSize: MediaQuery.of(context).size.height * 0.022,
                  ),
                ),
              ],
            ),
          ),

Answer 1

您可以将 mainAxisSize: MainAxisSize.max, 属性添加到 Row 或者您可以改用 ListTile

ListTile(
            onTap: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => BusinessPage(
                    business: business,
                  ),
                ),
              );
            },
            leading: CircleAvatar(
              radius: MediaQuery.of(context).size.height * 0.028,
              child: false
                  ? Text(
                      "AS",
                      style: TextStyle(
                        color: Colors.orange.shade800,
                        fontWeight: FontWeight.bold,
                      ),
                    )
                  : ClipOval(
                      clipBehavior: Clip.antiAlias,
                      child: Image.asset(
                        business.logo,
                        height: MediaQuery.of(context).size.height * 0.0545,
                        fit: BoxFit.cover,
                      ),
                    ),
            ),
            title: Text(
              business.name,
              style: TextStyle(
                fontSize: MediaQuery.of(context).size.height * 0.022,
              ),
            ),
          )

Answer 2

首先，我认为最好看看关于 InkWell 与 GestureDetector 的区别，

在你的情况下，我认为更好的解决方案是ListTile, just follow this article了解更多

但是如果你喜欢这种方式，你需要像这样用 InkWell 包裹你的 Row：

InkWell(
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => BusinessPage(
                          business: business,
                        ),
                      ),
                    );
                  },
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Padding(
                        padding: EdgeInsets.only(
                          right: MediaQuery.of(context).size.width * 0.04,
                        ),
                        child: CircleAvatar(
                          radius: MediaQuery.of(context).size.height * 0.028,
                          child: false
                              ? Text(
                                  "AS",
                                  style: TextStyle(
                                    color: Colors.orange.shade800,
                                    fontWeight: FontWeight.bold,
                                  ),
                                )
                              : ClipOval(
                                  clipBehavior: Clip.antiAlias,
                                  child: Image.asset(
                                    business.logo,
                                    height: MediaQuery.of(context).size.height *
                                        0.0545,
                                    fit: BoxFit.cover,
                                  ),
                                ),
                        ),
                      ),
                    ],
                  ),
                ),

现在只有 Row 是可点击的，Row

之外的任何小部件都不可点击

不可见的 GestureDetector ontap 功能 space

GestureDetector ontap functionality on invisible space

gesturedetector

dart

flutter