在 InkWell 中包装卡片时波纹效果不起作用

Question

在做了一些研究之后，我试图用 ListTiles 包装InkWell以获得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),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );

的ListTile：

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

我设法通过对 InkWell 执行 onTap: () => {} 来实现连锁反应。但是在添加 GestureDetector 之后，Ripple 又消失了。

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

我什至试过这个，涟漪有效，但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,
      ),
    ),
  );
}

Answer 1

ListTile 默认情况下具有波纹效果，因此您不需要添加墨水池。如果没有产生涟漪，则可能是其中一个孩子造成了一些问题。尝试删除一些，看看是否有帮助。

例子