美文网首页
Flutter 使用 InkWell 水波纹失效解决方法

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

作者: 大成小栈 | 来源:发表于2023-08-11 18:39 被阅读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

    相关文章

      网友评论

          本文标题:Flutter 使用 InkWell 水波纹失效解决方法

          本文链接:https://www.haomeiwen.com/subject/ffvtmdtx.html