很懵逼地实现了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(),
        ),
      ),
    ),
  );
}
相关推荐
Struggler2817 分钟前
Chrome插件开发
前端
apihz15 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
前端 贾公子20 分钟前
Monorepo + vite 怎么热更新
前端
问道飞鱼32 分钟前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
aningxiaoxixi1 小时前
Android 之 audiotrack
android
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf