带按钮的 ListTile答案

【问题标题】：ListTile with button带按钮的 ListTile
【发布时间】：2020-07-05 22:28:36
【问题描述】：

我在前导属性中有 ListTile 和按钮。一切正常，但是如果按下按钮，则瓷砖 onTap 手势也会被激活。 Tile 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 效果的任何想法。我想到的唯一方法是使用包裹在手势检测器中的磁贴中的行并摆脱 onTap 但如果有的话我希望有更好的解决方案

【问题讨论】：

我认为您对此无能为力，在ListTile 中没有可以摆脱onTap 影响的属性。用GestureDetector 包裹它是要走的路

标签： flutter dart

【解决方案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)
                    ],
                  ),
                ),
              )

【讨论】：

是的，这正是我想要实现的。我会将您的答案标记为已回答，因为我也认为没有比这更好的解决方案了

【解决方案2】：

尝试将图标按钮的spash、hover、highlight颜色设置为透明。

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

【讨论】：

这将摆脱按钮效果..我需要摆脱瓷砖前导区域的瓷砖 onTap 效果

【解决方案3】：

看，如果您不想要leading 上的Ripple Effect，我猜，GestureDetector 就是那个，它会帮助您。但是您不必将整个ListTile 与GestureDetector 结合起来，只需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。否则，一切都是一样的，并且会按预期工作。

结果如下：

【讨论】：

但这消除了对按钮的影响，这与弗兰克的回答结果相同。我希望将这些效果分成按钮的前导区域和瓷砖 onTap 的其余瓷砖区域。
嘿@delmin，当我读到这行时，我没有完全理解你的问题关于如何摆脱前导区域的磁贴 onTap 效果的任何想法。，因此，认为您只想从前导区域移除效果。不管怎样，希望你能从中有所收获。 您已标记正确答案。感谢 Delmin 的支持 :)
不客气。你和弗兰克的回答也是一种方法