使用flutter实现安卓点击小伙,按下会有颜色变化,未按下时显示默认颜色。
实现时通常我们之间用InkWell(),但是发现这个组件只能设置按下时水波纹的颜色,默认状态下是透明的。
于是在InkWell()内部又包裹了一层Container,设置了color,但是发现显示是可以的,但是按压是InkWell的水波纹效果在其底部。
思来想去,最终找到了简单方法,用Ink()代替InkWell().
Container(
margin: EdgeInsets.only(left: 12.w, right: 12.w),
child: Ink(
child: ListTile(
title: Text("从组织架构选择"),
leading: Image.asset(
"assets/images/ic_organizational_structure_leading.png",
height: 44.h,
width: 44.w,
package: "ecp_administrative_app"),
onTap: () {}),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5.r))),
),
),
通过这种方式实现默认是白色,按压式有水波纹效果。
![image.png](https://upload-images.jianshu.io/upload_images/1652297-feb7cb926a99fdc2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![image.png](https://upload-images.jianshu.io/upload_images/1652297-01f6ec394abe5eee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
但是按压时会发现水波纹框还是直角的,并不是圆角,效果不是很完美。可以用此方法解决:
Container(
margin: EdgeInsets.only(left: 12.w, right: 12.w),
child: Ink(
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(5.r)),
child: ListTile(
title: Text("从业务组选择"),
leading: Image.asset(
"assets/images/ic_business_group_leading.png",
height: 44.h,
width: 44.w,
package: "ecp_administrative_app"),
),
///注意,要想InkWell的borderRadius起作用,不超出圆角框,必须用onTap后才有效果
onTap: () {},
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5.r))),
),
)
其实就算将之前的child控件再包一层InkWell或者InkResponse。
因为Ink控件用于在[Material]控件上绘制图像和其他装饰,以便[InkWell]、[InkResponse]控件的“水波纹”效果在其上面显示。