在做了一些研究之后,我尝试用 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),
),
),
),
),
),
),
),
),
);
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: () => {} 来实现链式 react 。但是在添加 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,
),
),
);
}
最佳答案
默认情况下,ListTile 具有涟漪效果,因此您不需要添加墨水池。如果没有涟漪,其中一个 child 可能会引起一些问题。尝试删除一些,看看是否有帮助。
Example
关于flutter - 在 InkWell 中包装卡片时波纹效果不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66199921/