如下代码中的设置,会使 InkWell 的水波纹失效:
InkWell(
onTap: () { },
child: Container(
height: 50,
color:Colors.white,
child: Text( "是速度",
maxLines: 1,
style: TextStyle(color: color),
overflow: TextOverflow.ellipsis,
),
),
)
原因是,在InkWell的child的Container中出现了颜色设置,水波纹特效被覆盖。
解决方法是,在InkWell的外层加上Ink 和 Matetial 外套:
typedef GestureTapCallback = void Function();
_item(String icon, String title, bool isSelected, GestureTapCallback callback,
{double iconSize = 25}) {
double height = 48.0.w;
return Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(height/2))
),
child: Material(
child: Ink(
//// 其中,剪裁边界效果无效,需要外层追加
//clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: isSelected ? const Color(0xFF501FFF) : const Color(0xFF343942),
borderRadius: BorderRadius.all(Radius.circular(height/2))
),
child: InkWell(
onTap: callback,
child: SizedBox(
height: height,
child: Row(
children: [
const SizedBox(width: 25),
Image(
image: AssetImage(icon),
fit: BoxFit.fill,
width: iconSize.w,
height: iconSize.w,
),
const SizedBox(width: 20),
Text(
title,
style: textWhiteRegular.copyWith(fontSize: 14.sp),
),
const Spacer(),
],
),
)
),
),
)
);
}
- 容器颜色设置移至InkWell以外的Ink上;
- 圆角及裁切写在内部不生效,需要设置移至Material之外。
参考链接:
http://www.manongjc.com/detail/57-ymbylcjuexmvugb.html
网友评论