Flutter实现点击效果

使用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]控件的“水波纹”效果在其上面显示。