ListTile带有按钮

Question

我在 ListTile 的 leading 属性中加入了一个按钮。一切正常工作，但是如果按下按钮，Tile 的 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'),
)

有没有想法如何消除Tile在前导区域的onTap效果。我能想到的唯一方法是在Tile中使用Row封装GestureDetector并消除onTap，但我希望如果有更好的解决方案的话。

- delmin

---

我认为你无法对此做任何事情，在ListTile中没有属性可以消除onTap效果。使用GestureDetector进行包装是解决问题的方法。 - Aldy Yuan

Answer 1

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

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

- Frank

---

那将消除按钮效果。我需要消除瓷砖领域的onTap效果。 - delmin

Answer 2

如果您不想在您的“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'),
       )

现在，您可以看到上面的代码中，只有GestureDetector具有leading。其他内容都相同，将按预期工作。

以下是结果：

- Alok

---

但是这将会移除按钮上的效果，这与Frank的答案相同。我希望将这些效果分成按钮的前导区域和瓷砖onTap的其余区域。 - delmin

嘿@delmin，当我读到这一行“有没有办法从前导区域消除瓷砖onTap效果”的时候，我并没有完全理解你的问题，因此我认为你只想从前导区域中删除该效果。无论如何，希望你从中得到了一些东西。你已经标记了正确的答案。感谢你的点赞Delmin :) - Alok

不用谢。你和弗兰克的回答也是一种做法。 - delmin

Answer 3

如果您想在主按钮和标题区域上分别应用效果，另一种选择是将平面按钮放置在瓷砖区域内并删除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)
                    ],
                  ),
                ),
              )

- LonelyWolf

---

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