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

在Flutter中,如何创建具有磨砂玻璃效果的SliverAppBar?

在Flutter中,可以通过使用SliverAppBarBackdropFilter来创建具有磨砂玻璃效果的SliverAppBar

首先,导入必要的包:

代码语言:txt
复制
import 'dart:ui';
import 'package:flutter/material.dart';

然后,在CustomScrollView中使用SliverAppBar作为slivers的一部分:

代码语言:txt
复制
CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('磨砂玻璃效果'),
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        background: Stack(
          fit: StackFit.expand,
          children: [
            // 背景图片
            Image.network(
              'https://example.com/background_image.jpg',
              fit: BoxFit.cover,
            ),
            // 磨砂玻璃效果
            BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
              child: Container(
                color: Colors.black.withOpacity(0.5),
              ),
            ),
          ],
        ),
      ),
    ),
    // 其他Sliver组件
  ],
)

在上述代码中,我们使用了SliverAppBar作为CustomScrollView的一部分,并设置了expandedHeight来定义展开时的高度。在flexibleSpace中,我们使用了一个Stack来叠加背景图片和磨砂玻璃效果。Image.network用于加载背景图片,BackdropFilter用于创建磨砂玻璃效果,Container用于设置磨砂玻璃的颜色和透明度。

请注意,为了使用磨砂玻璃效果,需要在pubspec.yaml文件中添加flutter_blurhash依赖。

推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云服务器(CVM):提供可扩展的云服务器,适用于各种规模的应用程序和工作负载。了解更多信息,请访问腾讯云服务器(CVM)
  • 腾讯云对象存储(COS):提供安全、耐用、低成本的对象存储服务,适用于存储和处理大规模的非结构化数据。了解更多信息,请访问腾讯云对象存储(COS)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 创建可拖动浮动操作按钮

本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围任何位置。 创建可拖动浮动操作按钮 我们将为这样小部件创建一个类。...该Listener小部件具有onPointerMove可用于反馈当指针移动时事件,这将被称为参数。...一个浮动动作按钮通常可以点击时执行一个动作,所以我们添加一个名为onPressed( VoidCallback) 参数作为参数。...所以,我们可以检查内部onPointerUpcallback 仅onPressed值为_isDraggingis 时调用回调false。 下面是用于创建可拖动浮动操作按钮类。...Flutter 创建可拖动浮动操作按钮。

5.5K10

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

Flutter NestedScrollView 滑动组件是用来处理复杂情况下滑动应用场景,如向上滑动视图时,要折叠隐藏一部分内容,这时候就需要使用到 NestedScrollView 与 SliverAppBar...本节是使用 NestedScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 实现折叠头部效果undefined 【x1】微信公众号每日提醒 随时随记...初始化函数 initState 创建,代码如下: TabController tabController; @override void initState() { super.initState...是配置 SliverAppBar bottom 属性下,通过 buildTabBar 方法来封装, 代码如下: TabBar buildTabBar() { return TabBar(...,是 SliverAppBar flexibleSpace 属性配置,当然就是使用了 FlexibleSpaceBar,代码如下: String imageUrl = "https:

2.6K11

6详解AppBar小部件

由于它是一个如此常用组件,因此 Flutter 为该功能提供了一个名为AppBar专用小部件。 本教程,我们将通过一些实际示例向您展示如何Flutter 应用程序自定义 AppBar。...以下是我们将介绍内容: Flutter AppBar 是什么? 应用栏布局 自定义 AppBar Flutter AppBar 是什么?...关于 Flutter AppBar 必须提供所有内容完整演练。我希望这篇文章能帮助你未来所有的 Flutter 应用程序创建漂亮 AppBars。...,高度和 AppBar 高度一样, // 可以实现一些特殊效果,该属性通常在 SliverAppBar 中使用 this.bottom,//一个 AppBarBottomWidget...用来 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件 z 坐标顺序,默认值 4,对于可滚动 SliverAppBar,当 SliverAppBar

16.3K10

Flutter入门指北(Part 8)之Sliver 组件及NestedScrollView

因为 CustomScrollView 只允许传入 Sliver 部件,那么类似 Container 等普通部件就不可以使用了,那么这样就需要更多 Sliver 组件才能完成视图,所以为了方便,直接通过...SliverPadding 那么 CustomScrollView 中部件之间如何设置间距呢,可能你会想到用 SliverToBoxAdapter 包裹一个 Padding 来处理,当然没问题。...SliverPersistentHeader Flutter ,为我们提供了这么一个作为头部部件 SliverPersistentHeader,这个部件可以根据滚动距离缩小高度,有点类似 SliverAppBar...背景效果。...分析完源码后,例子目标很明确,使用 SliverAppBar + TabBar + TabBarView,先看下最后效果图吧 ?

2.1K30

Flutter 首页必用组件NestedScrollView示例详解

昨天Flutter 1.17版本重磅发布,新版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,如果你想升级到最新版本...普通ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...,具体查看ScrollPhysics 交流 Flutter博客地址(近200个控件用法):http://laomengit.com 总结 到此这篇关于Flutter 首页必用组件NestedScrollView...文章就介绍到这了,更多相关Flutter 首页必用组件NestedScrollView内容请搜索ZaLou.Cn以前文章或继续浏览下面的相关文章希望大家以后多多支持ZaLou.Cn!

3.6K40

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

前期回顾: •Flutter实战 | 从 0 搭建「网易云音乐」APP(一、创建项目、添加插件、通用代码)•Flutter实战 | 从 0 搭建「网易云音乐」APP(二、Splash Page、登录页、...UI 分析 首先还是再来看一下「每日推荐」UI效果: ? 看到这个效果,有经验同学可能直接就会喊出:CustomScrollView!! 没错,当前页一共分为三部分: ?...1.SliverAppBar2.SliverAppBar bottom3.SliverList 整个页面就是用 CustomScrollView 来做,但是有一点不同: 平时我们使用 SliverAppBar...做这种折叠效果时候,折叠起来是会变成主题色, 所以这里我找了别人写好一个组件:FlexibleDetailBar,用它以后效果就是上面图片那样。...5.忘记标了,还有一个是SliverAppBar展开时模糊背景,也可以由调用者传入 so,我们从上往下来封装。

1.4K20

flutter 起步

window 安装教程flutter中文官网mac 安装教程flutter中文官网安装完成后解压到非高权限路径,讲环境变量配置到path图片Flutter安装目录flutter文件下找到flutter_console.bat...安装完成后-需要安装as(Android studio)运行 flutter doctor 检查环境缺失依赖图片根据错误提示安装相对应依赖与工具如何引用并安装第三方库pubspec.yaml管理第三方库...AlertDialog:一个弹框组件flutter问题:Flutter通过将新代码注入到正在运行DartVM,来实现Hot Reload这种神奇效果DartVM将程序类结构更新完成后,...修改了main函数创建根控件节点,Flutter热刷新后只会根据原来根节点重新创建控件树,不会修改根节点。某个类从普通类型转换成枚举类型,或者类型泛型参数列表变化,都会使热刷新失败。...flexibleSpace → Widget - 一个显示 AppBar 下方控件,高度和 AppBar 高度一样,可以实现一些特殊效果,该属性通常在 SliverAppBar 中使用。

4.4K20

如何使用Python装饰器创建具有实例化时间变量新函数方法

1、问题背景Python,我们可以使用装饰器来修改函数或方法行为,但当装饰器需要使用一个实例化时创建对象时,事情就会变得复杂。...例如,我们想要创建一个装饰器,可以创建一个新函数/方法来使用对象obj。如果被装饰对象是一个函数,那么obj必须在函数创建时被实例化。...以下代码示例演示了如何实现此解决方案:from types import InstanceTypefrom functools import wrapsimport inspectdef dec(func...dec装饰器用于类A方法f以及函数myfunc、myfunc2和myfunc3上。...请注意,这种解决方案只适用于对象obj实例化时创建情况。如果obj需要在其他时间创建,那么您需要修改此解决方案以适应您具体情况。

7010

Flutter 首页必用组件NestedScrollView

老孟导读:昨天Flutter 1.17版本重磅发布,新版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,...今天介绍组件是NestedScrollView,大部分App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图组件,其滚动位置是固有链接。...普通ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...:内容超过一屏 上拉有回弹效果 ClampingScrollPhysics :包裹内容 不会有回弹

4.1K10
领券