Flutter 使用 InkWell 水波纹失效解决方法

2023-08-11  本文已影响0人  大成小栈

如下代码中的设置,会使 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(),
                    ],
                  ),
                )
            ),
          ),
        )
    );
  }
  1. 容器颜色设置移至InkWell以外的Ink上;
  2. 圆角及裁切写在内部不生效,需要设置移至Material之外。

参考链接:
http://www.manongjc.com/detail/57-ymbylcjuexmvugb.html

上一篇下一篇

猜你喜欢

热点阅读