Flutter自定义卡片点击时Route路由不响应,该如何排查问题?
问题根因
你的pressn参数仅被声明为CardsParent组件的入参,没有绑定到任何可响应点击/触摸事件的控件上,所以点击操作无法触发你传入的路由跳转逻辑,确实需要额外绑定事件。
修复方案
有两种常用实现方式,可按需求选择:
- 方案1:整个卡片区域可点击,带点击水波纹效果
在Card外层包裹InkWell控件,将onTap属性绑定为widget.pressn即可,修改后的组件代码如下:
// 仅展示修改后的build方法,其余代码保持不变 @override Widget build(BuildContext context) { return Container( width: 140, height: 100, child: InkWell( onTap: widget.pressn, // 圆角和Card保持一致,保证水波纹效果边界正确 borderRadius: BorderRadius.circular(15.0), child: Card( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(15.0), ), color: Colors.white, elevation: 10, child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ ListTile( leading: Icon( widget.icon, size: 50, color: kOrangeColor, ), title: Text(widget.title, style: TextStyle(fontSize: 14.0, color: kOrangeColor)), subtitle: Text(widget.subtitle, style: TextStyle(fontSize: 11.0, color: kOrangeColor)), ), ], ), ), ), ); }
- 方案2:仅ListTile区域可点击
直接给ListTile控件的onTap属性绑定widget.pressn即可:
ListTile( onTap: widget.pressn, // 新增这一行即可 leading: Icon( widget.icon, size: 50, color: kOrangeColor, ), title: Text(widget.title, style: TextStyle(fontSize: 14.0, color: kOrangeColor)), subtitle: Text(widget.subtitle, style: TextStyle(fontSize: 11.0, color: kOrangeColor)), )
可选优化:如果需要兼容pressn未传的场景,可将onTap写法调整为onTap: widget.pressn ?? () {}避免空指针异常。
内容的提问来源于stack exchange,提问作者isofttechn
相关产品推荐
相关产品推荐

