带按钮的ListTile

Question

我在中有ListTile和button。但是，如果按下按钮，一切都很好，然后还会激活磁贴onTap手势。平铺onTap不只触发动画。

​

​

以下是代码

ListTile(
   contentPadding: EdgeInsets.zero,
   leading: IconButton(
       icon: Icon(Icons.check_circle),
     onPressed: () => print('select'),
   ),
   title: Text('TEST'),
   trailing: Icon(
      Icons.arrow_forward_ios,
  ),
  onTap: () => print('on tap'),
)

任何想法，如何摆脱瓦片onTap效应，从领先地区。我想到的唯一方法就是在手势检测器中使用row in tile，去掉onTap，但我希望有更好的解决方案

Answer 1

如果你想分离前导按钮和标题区域的效果，另一种选择是简单地将扁平按钮放在平铺区域内，然后移除onTap。这几乎与你提到的手势检测器的解决方案相同，但至少你不必在手势检测器上玩弄效果。我不认为还有其他选择。

​

​

               ListTile(
                contentPadding: EdgeInsets.zero,
                leading: IconButton(
                  icon: Icon(Icons.check_circle),
                  onPressed: () => print('select'),
                ),
                title: FlatButton(
                  padding: EdgeInsets.zero,
                  onPressed: () => print('on tap'),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('TEST'),
                      Icon(Icons.arrow_forward_ios)
                    ],
                  ),
                ),
              )

Answer 2

尝试将图标按钮的快速、悬停、突出显示颜色设置为透明。

IconButton(
highlightColor: 
Colors.transparent,
splashColor: Colors.transparent,
hoverColor: Colors.transparent,
icon: Icon(Icons.check_circle),
onPressed: () => 
print('select'),
)

Answer 3

看，如果你不想在你的leading上安装Ripple Effect，我想GestureDetector就是你想要的，它会帮助你。但是你不需要用GestureDetector做整个ListTile，只要用leading就行了。

请在此处查看解决方案：

       ListTile(
           contentPadding: EdgeInsets.zero,
           leading: GestureDetector(
             onTap: () => print('icon tapped'),
             child: Icon(Icons.check_circle)
           ),
           title: Text('TEST'),
           trailing: Icon(
              Icons.arrow_forward_ios,
          ),
          onTap: () => print('on tap'),
       )

现在，在上面的代码中，您可以看到leading只有GestureDetector。否则，一切都是一样的，并将按预期工作。

结果如下：

​

​