Flutter 在墨水池中包装卡片时不使用涟漪效果

在做了一点研究之后，我尝试用

InkWell

包装ListTiles，以获得

onTap

涟漪效应，但它似乎不起作用。这就是我所拥有的：

return AnimationLimiter(
      child: Scrollbar(
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: widget.myItems.length,
          itemBuilder: (context, index) => AnimationConfiguration.staggeredList(
            position: index,
            duration: const Duration(milliseconds: 300),
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: Material(
                  /// child: Ink( also tried with Ink and no Ink and no Material just InkWell but no ripple
                  child: InkWell(
                    onTap: () => widget.nav(widget.myItems[index]),
                    splashColor: Colors.red,
                    child: Card(   
                      child: _itemTile(index),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );

列表磁贴

：

  return ListTile(
      dense: true,
      trailing: Icon(Icons.keyboard_arrow_right),
      leading: category,
      title: Text(
        item.title,
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
      ),
    );

通过对墨水池执行onTap:（）=>{}，我成功地实现了连锁反应。但在添加了手势检测器之后，纹波又消失了

             child: InkWell(
                borderRadius: BorderRadius.circular(8),
                onTap: () {},
                splashColor: Colors.red,
                child: GestureDetector(
                  onTap: () => widget.nav(widget.myItems[index]),
                  child: _itemTile(index),
                ),
              ),

我甚至尝试过这个，ripple可以工作，但它的

widget.nav

函数没有被调用：

Stack(
              children: [
                Card(
                  elevation: 1,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                  margin:
                      EdgeInsets.only(bottom: 5.0, left: 2.0, right: 2.0),
                  child: GestureDetector(
                    onTap: () {
                      widget.nav(widget.myItems[index]);
                    },
                    child: _itemTile(index),
                  ),
                ),
                Positioned.fill(
                  child: Material(
                    color: Colors.transparent,
                    child: InkWell(
                      onTap: () => {},
                    ),
                  ),
                )
              ],
            ),

编辑*添加导航功能：

_navToItem(item) {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => Item(
        items: _activityItems.length > 0 ? _activityItems : _items,
        showAd: false,
        user: userStream,
        item: item,
        favorites: _favorites,
      ),
    ),
  );
}

---

使用堆栈是正确的

这是必要的，因为小部件树是自下而上呈现的，每个小部件层叠在一起（如果下面有子部件，则会阻止飞溅的视觉效果）

堆栈示例中的

GestureDetector

永远不会获得点击手势，因为它下面的InkWell正在执行事件

像这样的工作对你来说？（将您的

widget.nav

调用移动到

InkWell onTap:

）

---

ListTile在默认情况下具有涟漪效应，因此不需要添加墨水池。如果没有涟漪，其中一个孩子可能会引起一些问题。尝试删除一些，看看是否有帮助

---

请试着理解它的概念。您应该为小部件提供一些空白以显示效果。您没有提供任何边距或对齐，因此它没有显示效果的空间

下面的例子显示了所有页面的效果，因为中心从所有侧面创建边距。中心从顶部、左侧、右侧和底部对齐其子部件

Widget build(BuildContext context) {
  return Center(
    child: Material(
      child: new InkWell(
        onTap: () {
          print("tap");
        },
        child: Center(
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.red,
          ),
        ),
      ),
    ),
  );
 }

在您的情况下：

return AnimationLimiter(
      child: Scrollbar(
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: widget.myItems.length,
          itemBuilder: (context, index) => AnimationConfiguration.staggeredList(
            position: index,
            duration: const Duration(milliseconds: 300),
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: Material(
                  /// child: Ink( also tried with Ink and no Ink and no Material just InkWell but no ripple
                  child: InkWell(
                    onTap: () => widget.nav(widget.myItems[index]),
                    splashColor: Colors.red,
                    child: Center(
                             child: Card(   
                                   child: _itemTile(index),
                        ),
                     ),
                ),
                ),
              ),
            ),
          ),
        ),
      ),
    );

---

对于ListTile案例尝试传递自定义涟漪颜色。可能是您的背景和涟漪效果颜色相同。

无需使用

InkWell

包装

ListTile

，因为它已经在引擎盖下包装了。我们可以使用

材质

小部件来实现这一点，以保持涟漪效应，并像

卡片

小部件一样：

Material(
  color: Colors.white,
  borderRadius: BorderRadius.circular(4),
  elevation: 1,
  child: ListTile(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(4)),
    leading: Text('Hello World'),
    onTap: () => print('Pressed ListTile'),
  ),
),

输出：

---

请更改您的代码

Card(child: InkWell(child: ListTile(), onTab: () {},),),

---

首先是

Card

小部件，它的子部件

Inkwell

，然后是

ListTile

这是否回答了您的问题？对一点。但还是很奇怪，我不能让它工作。我编辑了我的问题。你必须确保

onTap

不为空，（即：

widget.nav（widget.myItems[index]）

不为空）我不理解你所说的widget.nav不为空是什么意思。它不是空的。它是一个重定向到另一个页面的函数。无论如何，这在我看来是非常奇怪的行为。为什么

onTap:（）=>{}

会显示涟漪而

onTap:（）={widget.nav（widget.myItems[index]}

不会显示它……那么你说这个

widget.nav（widget.myItems[index]）

是通过在墨水池上录音来工作的吗？但没有涟漪效应？不…仍然不工作。一旦我添加了widget.nav，涟漪就不会显示。我在问题中添加了nav函数。可能这与此有关。当你在

onTap

中有不同的函数时，你会有什么惊喜吗？（我刚刚用

导航器.push（）进行了测试）

用于

onTap

的函数，splash对我来说仍然很好。另一个尝试消除可能性的方法是去掉AnimationLimiter。（虽然我测试了有无，但在测试设置中没有什么不同。）。对它的描述乍一看似乎非常可疑：“AnimationLimiter是一个继承的小部件，如果子部件没有出现在构建AnimationLimiter的第一帧中，它将阻止子部件被设置动画。”我相信飞溅效果是一个动画。因此，您进行了测试，它显示了涟漪？我唯一看到的是，如果我删除

Navigation.push（…

从

\u navToItem

显示涟漪。是的，即使使用

导航器.push（）

函数作为

onTap

，飞溅/涟漪也会在上面的代码中为我显示，使用

InkWell

。我使用的任何函数，飞溅都会显示出来。真想知道是什么让它消失了。

Card(child: InkWell(child: ListTile(), onTab: () {},),),