首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在放大的时候模糊SliverAppBar的背景?

在放大时模糊SliverAppBar的背景可以通过以下步骤实现:

  1. 首先,确保你的应用程序使用了Flutter框架进行开发,因为SliverAppBar是Flutter框架中的一个组件。
  2. 在Flutter中,可以使用BackdropFilter组件来实现背景模糊效果。BackdropFilter是一个可以应用图形效果的组件,包括模糊效果。
  3. 在SliverAppBar的背景中添加一个BackdropFilter组件,并将其child设置为需要模糊的背景组件,例如一个Image组件。

示例代码如下:

代码语言:txt
复制
SliverAppBar(
  expandedHeight: 200, // 设置SliverAppBar的高度
  flexibleSpace: FlexibleSpaceBar(
    background: Stack(
      fit: StackFit.expand,
      children: [
        Image.network(
          'https://example.com/background_image.jpg', // 背景图片的URL
          fit: BoxFit.cover,
        ),
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), // 设置模糊程度
          child: Container(
            color: Colors.black.withOpacity(0.5), // 设置模糊后的背景颜色和透明度
          ),
        ),
      ],
    ),
  ),
  // 其他SliverAppBar的属性和内容
);

在上述示例代码中,我们使用了一个Stack组件来叠加背景图片和BackdropFilter组件。BackdropFilter的filter属性用于设置模糊的程度,这里使用了sigmaX和sigmaY参数来控制模糊的效果。通过调整这两个参数的值,可以实现不同程度的模糊效果。

注意:为了使模糊效果更加明显,我们还在BackdropFilter的child组件中添加了一个半透明的黑色背景。

推荐的腾讯云相关产品:腾讯云图像处理(Image Processing)服务,该服务提供了丰富的图像处理功能,包括图像滤镜、图像增强、图像识别等,可以用于对背景图片进行处理和优化。

腾讯云产品介绍链接地址:腾讯云图像处理

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

three.js 背景模糊另类实现方法

微信截图_20220505101916.png gltf,glb模型下载网站 我们有时候做项目时候会想让背景和模型完全独立分开,分别控制亮度,模糊度等,笔者提供一种方法可以很好实现,以下只写关键代码...;float: right;position: absolute;left:190px;right:0;top:0;bottom:0;z-index:1"> 然后在js文件写上加载gltf代码...camera, scene,scene2,renderer,renderer2,camera2,controls,controls2;//注意这里摄像机,控制器,场景,渲染器都是2套,其中一套是前景模型,一套是背景...renderer.domElement ); document.getElementById('pos2').appendChild( renderer2.domElement ); 我们可以通过更改pos2容器模糊度和亮度等来单独控制背景层...renderer2.render(scene,camer);//执行渲染操作 renderer2.render(scene2,camera2);//执行渲染操作} 我们可以通过以下代码改变pos2模糊

3K20
  • Flutter实战 | 从 0 搭建「网易云音乐」APP(三、每日推荐、推荐歌单)

    做这种折叠效果时候,折叠起来是会变成主题色, 所以这里我找了别人写好一个组件:FlexibleDetailBar,用它以后效果就是上面图片那样。...滑上去时候「播放全部」那一行还停留在上方,是使用了 SliverAppBar bottom参数。 这样一个页面的UI其实就分析完了。 然而!我们回过头看一下两个页面的UI,是不是感觉非常相似!...5.忘记标了,还有一个是SliverAppBar展开时模糊背景,也可以由调用者传入 so,我们从上往下来封装。...还是先确定一下需求,看看需要传入什么: 1.要传入一个背景模糊2.传入title3.传入展开时高度4.播放次数5.播放全部点击回调 确定好就之后,代码如下: class PlayListAppBarWidget...,有可能是本地文件,也有可能是网络图片,所以我们直接在这里判断 startsWith('http')2.模糊背景图片时,加一个 Colors.black38,这样省后续有白色图片所导致文字看不清。

    1.5K20

    何在keras中添加自己优化器(adam等)

    2、找到keras在tensorflow下根目录 需要特别注意是找到keras在tensorflow下根目录而不是找到keras根目录。...一般来说,完成tensorflow以及keras配置后即可在tensorflow目录下python目录中找到keras目录,以GPU为例keras在tensorflow下根目录为C:\ProgramData...优化器用法 优化器 (optimizer) 是编译 Keras 模型所需两个参数之一: from keras import optimizers model = Sequential() model.add...# 传入优化器名称: 默认参数将被采用 model.compile(loss=’mean_squared_error’, optimizer=’sgd’) 以上这篇如何在keras中添加自己优化器...(adam等)就是小编分享给大家全部内容了,希望能给大家一个参考。

    45K30

    6详解AppBar小部件

    由于它是一个如此常用组件,因此 Flutter 为该功能提供了一个名为AppBar专用小部件。 在本教程中,我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。...背景颜色 以下代码将 AppBar 背景颜色更改为深橙色。500添加以访问颜色特定阴影,900即最暗和最亮50。...工具栏包含文字,图标,按钮,和其他任何公司前景,除了小部件,Container和Image。...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件 z 坐标顺序,默认值 4,对于可滚动 SliverAppBar,当 SliverAppBar...和内容同级时候,该值为 0, // 当内容滚动 SliverAppBar 变为 Toolbar 时候,修改 elevation 值。

    16.4K10

    Windows 10 应用创建模糊背景窗口三种方法

    三种创建模糊背景窗口方法 Windows 10 上创建带模糊背景窗口有三种不同方法,不过每一种都是既有好处又有坏处: 调用 Win32 API —— SetWindowCompositionAttribute...当然,如果需要模拟亚克力效果或者是 iOS/Mac 上模糊效果就 gg 了。 ? 为窗口中背景图片添加 WPF 自带模糊效果 BlurEffect。...这种方式你想获得多大模糊半径就能获得多大模糊半径,不过带来就是更高性能损耗。同时,还得考虑在移动窗口时候动态地去更新背景图片并再次模糊。 ?...使用 Fluent Design System 中亚克力效果 —— AcrylicBrush。这绝对是 Windows 10 上获得背景模糊效果中视觉效果最好,同时又最省性能方法了。...使用这个辅助类,你只需要使用一行代码就能开启背景模糊效果。

    2.9K30

    何在canvas中模拟css背景图片样式

    笔者开源了一个Web思维导图mind-map,最近在优化背景图片效果时候遇到了一个问题,页面上展示时背景图片是通过css使用background-image渲染,而导出时候实际上是绘制到canvas...设置重复,但是canvas笔者只找到一个createPattern()方法,且只支持设置重复效果,那么如何在canvas里模拟一定css背景效果呢,不要走开,接下来一起来试试。...读完本文,你还可以顺便复习一下canvasdrawImage方法,以及css背景设置几个属性用法。...background-size 属性用于设置背景图片大小,可以接受四种类型值,依次来模拟一下。 length类型 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置高度。...,也就是图片会显示完整,但是不一定会铺满背景水平和垂直两个方向,在某个方向可能会有留白。

    7.1K41

    Flutter | Slivers 系列

    概述 CustomScrollView:一个滚动容器,改组件不接受任何 child,但是你可以直接提供 Slivers 已创建各种滚动效果,例如页面中有多个可滑动列表, Appbar, 列表,网格...在向下滑动时候,会首先将 SliveAppbar 显示出来,如下: pinned :一直显示在顶部,无视滑动,这样就和普通导航栏差不多了。...区别就是在滑动时候 SliveAppbar 底部会有一点点影子 snap:在滑动停止之后,导航会自动全部显示出来,需要注意是必须搭配 floating 一起使用,如下: SliverAppBar...: [Text(label), Text(content)], ), ), ); } } 上面代码中有一个问题,本来使用了 stretch 属性之后,在下拉时候应该会有一个放大效果...,但是运行代码时候并没有,有知道原因同学可以讲一下 参考:B站王叔不秃 如果本文有帮助到你地方,不胜荣幸,如有文章中有错误和疑问,欢迎大家提出!

    1.5K11

    【ICCV 13大不可错过有趣项目】实时任意风格迁移、手机照片背景模糊……

    ICCV这篇论文研究了在几个不同平台上拍摄相同场景照片,并对它们之间差异进行建模。研究者提出一种算法,不仅能改变低质量照片尺寸,还能在更深层次上进行转换,智能地精细调整照片细节和颜色。...DSLR-Quality Photos on Mobile Devices with Deep Convolutional Networks 提升双镜头智能手机拍摄人像 用智能手机拍摄人像时添加人造背景模糊很流行...,但这不像使用魔棒工具抠出人像,然后模糊掉其余部分那样简单。...头发或衣服复杂性以及场景视觉复杂性使算法不容易决定哪些像素是人部分,哪些不是。来自腾讯和中国香港中文大学研究者这项工作将两种基本计算机视觉工具结合在一起,形成一个更强大工具。...这样,添加背景模糊就很方便了!

    1.2K70

    Flutter NestedScrollView实现一个经典滑动折叠头部图片效果

    Flutter NestedScrollView 滑动组件是用来处理复杂情况下滑动应用场景,向上滑动视图时,要折叠隐藏一部分内容,这时候就需要使用到 NestedScrollView 与 SliverAppBar...在本节中是使用 NestedScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 实现折叠头部效果undefined 【x1】微信公众号每日提醒 随时随记...: true, ///SliverAppBar展开高度 expandedHeight: 200, flexibleSpace: buildFlexibleSpaceBar...TabController 是绑定 TabBarView 与 TabBar 联动,当然 TabBar是配置在 SliverAppBar bottom 属性下,通过 buildTabBar 方法来封装...,是在 SliverAppBar flexibleSpace 属性中配置,当然就是使用了 FlexibleSpaceBar,代码如下: String imageUrl = "https:

    2.7K11

    flutter系列之:如丝般顺滑SliverAppBar

    floating floating是一个非常重要属性,因为对于SliverAppBar来说,当界面向远离SliverAppBar方向滚动时候SliverAppBar会隐藏或者缩写为status...bar高度,floating意思就是当我们向SliverAppBar滑动时候SliverAppBar是否浮动展示。...snap snap是和floating一起使用属性,snap表示当向SliverAppBar滚动时候SliverAppBar是否立即展示完全。...另外还有一个flexibleSpace组件,他是SliverAppBar在float时候展示widget,通常和expandedHeight配合使用。...,因为设置是floating=true, 并且snap=true,所以只要向上滑动,就会展示所有的flexibleSpace: 当我们将floating设置为false时候,只有向上滑动到顶端时候

    1.7K30

    flutter系列之:如丝般顺滑SliverAppBar

    floatingfloating是一个非常重要属性,因为对于SliverAppBar来说,当界面向远离SliverAppBar方向滚动时候SliverAppBar会隐藏或者缩写为status bar...高度,floating意思就是当我们向SliverAppBar滑动时候SliverAppBar是否浮动展示。...snapsnap是和floating一起使用属性,snap表示当向SliverAppBar滚动时候SliverAppBar是否立即展示完全。...另外还有一个flexibleSpace组件,他是SliverAppBar在float时候展示widget,通常和expandedHeight配合使用。...,因为设置是floating=true, 并且snap=true,所以只要向上滑动,就会展示所有的flexibleSpace:当我们将floating设置为false时候,只有向上滑动到顶端时候

    1.7K20

    Photoshop软件应用项目(五)

    今天我们做一个特效,此特效是一束光,后期会有更多制作方法,每种方法都有适合自己时候,所以要尽可能多掌握光线画法。 目录 新建方形画纸 如何绘制光源?...镜像模糊何在只有颜色地方填充颜色? 导入图片,贴合光源 一.新建方形画纸 新建 800×800mm 画纸,方形画纸,会更能体现出接下来光束光感 二.如何绘制光源?...模糊有两种方法,第一种是旋转,顾名思义,旋转就是围绕中心点,将其他像素点围绕中心点旋转,产生残影进行模糊,下面一个缩放就是由中心向外发散,中心不动,周围向外放大,将数量调到最大,就可以看到我们一走中心点...多按几次就会有这样效果 2.如何在只有颜色地方填充颜色? 前景色白色按住 Alt 键加 Delete,是整个画布都填充了。...在背景图层上新建一层填黑色,也可以直接在背景层上填充,但我个人习惯保留背景层,因为 PS 大部分修图都是原图做背景。这样我们就得到了一束光。

    1.1K40
    领券