很懵逼地实现了Flutter一个异形高斯效果

老规矩先上图

UI设计了一个异形的高斯效果,这个需求看似很合理,但是一开始把我难住了,Flutter实现高斯不难,实现异形也不难,但是高斯加异形。。。what should i do ??

不管了,先撸代码试试看吧。

代码

先实现一个异形

CustomPainter实现一个异形还是很easy的,这里用Path画出相应的轨迹即可

arduino 复制代码
class BottomBarPainter extends CustomPainter {

  //圆弧的半径
  double radius = 40;
  //圆弧两侧圆角半径
  double subRadius = 10;

  @override
  void paint(Canvas canvas, Size size) {
  
    final paint = Paint();
    paint.color = Colors.white.withOpacity(0.3);
    paint.style = PaintingStyle.fill;

    final path = Path();
    //画笔开始的锚点
    path.moveTo(radius, 0);
    //画线至中间圆弧
    path.lineTo((size.width - radius * 2)/2 - 10, 0);
    //画出圆弧左边的第一个圆角
    path.arcTo(Rect.fromCircle(center: Offset((size.width - radius * 2)/2 - subRadius, subRadius), radius: subRadius), -pi * 0.5, pi * 0.5, false);
    //画中间圆弧
    path.arcTo(Rect.fromCircle(center: Offset(size.width/2, 5), radius: radius), -pi, -pi, false);
    //画出圆弧右边的第二个圆角
    path.arcTo(Rect.fromCircle(center: Offset(size.width/2 + radius + subRadius, subRadius), radius: subRadius), pi * .5, pi * 1, false);
    //画出圆弧右侧的直线
    path.lineTo((size.width - radius * 2), 0);
    //画出右侧圆弧
    path.arcTo(Rect.fromCircle(center: Offset(size.width - radius, size.height/2), radius: radius), pi * 1.5, pi, false);
    //画出底部直线
    path.lineTo(radius, size.height);
    //画出左侧圆弧
    path.arcTo(Rect.fromCircle(center: Offset(radius, size.height/2), radius: radius), pi * 0.5, pi * 1, true);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
 }

现在已经实现了异形,并用Colors.white.withOpacity(0.3)做了颜色填充,布局展示代码如下

less 复制代码
  Widget _buildBottomBar() {
    return SizedBox(
      height: 80,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
        child: CustomPaint(
          painter: BottomBarPainter(),
        ),
      ),
    );
  }
}

尝试高斯

首先做的尝试就是用BackdropFilter包裹CustomPaint,但是并没有效果

less 复制代码
Widget _buildBottomBar() {
  return SizedBox(
      height: 80,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
        child: CustomPaint(
          painter: BottomBarPainter(),
        ),
      ),
  );
}

所以我就开始奇奇怪怪的尝试啦。。。一顿操作之后发现效果竟然实现了,而且代码也是奇奇怪怪的,用自定义的CustomPaint二次包裹!!!(这里有懂哥解释一下为啥吗,我很懵逼。。)

less 复制代码
Widget _buildBottomBar() {
  return CustomPaint(
    painter: BottomBarPainter(),
    child: SizedBox(
      height: 80,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
        child: CustomPaint(
          painter: BottomBarPainter(),
        ),
      ),
    ),
  );
}
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js