Flutter ImageFilter 高斯模糊效果 BackdropFilter 实现过滤效果

在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天、每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不妨来瞅瞅码农的轨迹。


Flutter ImageFilter 高斯模糊效果 BackdropFilter 实现过滤效果

1 ImageFilter 高斯模糊效果

在这里插入图片描述

  Widget buildWidget() {
    return Container(
      width: 100,
      //只对其子Widget 起作用
      child: ImageFiltered(
        imageFilter: ImageFilter.blur(sigmaX: 0, sigmaY: 0),
        child: Image.asset(
          "assets/images/sp02.png",
          fit: BoxFit.fitWidth,
          width: 100,
        ),
      ),
    );
  }

2 BackdropFilter 实现过滤效果

在这里插入图片描述

  Widget buildImageFiltered() {
    return Stack(
      alignment: Alignment.center,
      children: [
        Text(
          "早起的年轻人",
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        //会对下层所有的子组件起过滤效果
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 2, sigmaY: 0),
          child: Container(
            color: Colors.white.withAlpha(0),
          ),
        ),
      ],
    );
  }

3 BackdropFilter 使用实践 Demo

可以结合使用 Clip 系列的组件来限制 BackdropFilter 的模糊范围

在这里插入图片描述

class _DemoPhysicalModelState extends State<DemoPhysicalModel> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ImageFilter"),
      ),
      backgroundColor: Colors.white,
      //来显示一张图片
      body: Container(
        //填充
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        //来个层叠布局
        child: Stack(
          alignment: Alignment.center,
          children: [
            //第一层 来一个背景
            Positioned.fill(
              child: Image.asset(
                "assets/images/sp01.png",
                //图片填充一下
                fit: BoxFit.fill,
              ),
            ),
            //第二层居中显示一个昵称
            // BackdropFilter 对底层的所有的Widget者起作用
            //当我们只想作用于中间这小块时
            //可以裁剪一下
            ClipRect(
              child: BackdropFilter(
                //高斯模糊度设置
                filter: ImageFilter.blur(sigmaX: 10, sigmaY: 0),
                child: buildChildBox(),
              ),
            ),
          ],
        ),
      ),
    );
  }
  Container buildChildBox() {
    return Container(
      width: 240,
      height: 180,
      //color 与 decoration 是互斥的
      //color: Colors.white,
      //来个圆角
      decoration: BoxDecoration(
        //颜色来个透明度
        color: Colors.white.withOpacity(0.2),
        //四个圆角
        borderRadius: BorderRadius.all(
          Radius.circular(10),
        ),
      ),
      //居中一下
      alignment: Alignment.center,
      child: Text(
        "早起的年轻人",
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

完毕

不局限于思维,不局限语言限制,才是编程的最高境界。

以小编的性格,肯定是要录制一套视频的,随后会上传

有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人

在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
已标记关键词 清除标记
<p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <span>本课程根据实际开发中总结出来的一些学习思路,从零开始详细讲解</span><span>Flutter</span><span>的基础知识点。从简到难,从浅入深,逐步带领大家了解</span><span>Flutter</span><span>,熟悉</span><span>Flutter</span><span>的组成部分,并且带领大家学习如何使用</span><span>Flutter</span><span>实现</span><span>UI</span><span>功能编写。通过对本视频的学习,你将会掌握</span><span>Flutter</span><span>常用组件和常用布局构建复杂布局、</span><span>Flutter</span><span>路由导航实现多页面构建和交互、</span><span>Flutetr</span><span>手势处理和动画实现动态交互效果,以及如何使用音视频、图片、文字、字体等资源。除此之外,你还可以收获每一章节遇到的重难点问题的解决方案。</span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858"></a><a href="https://edu.csdn.net/course/detail/26227">https://edu.csdn.net/course/detail/26227</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <strong><span style="background-color:#FFE500;">【学员专享增值服务】</span></strong> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b>源码开放</b> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 下载方式:电脑登录<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858"></a><a href="https://edu.csdn.net/course/detail/26227">https://edu.csdn.net/course/detail/26227</a>,点击右下方课程资料、代码、课件等打包下载 </p> <p> <br /> </p>
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页