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

如何关闭`CustomScrollView`中的`SliverAppBar`折叠时的模糊效果

CustomScrollView中关闭SliverAppBar折叠时的模糊效果,可以通过设置SliverAppBarexpandedHeight属性为一个较小的值,或者将flexibleSpace属性设置为一个不具有模糊效果的组件。

  1. 设置expandedHeight属性:将SliverAppBarexpandedHeight属性设置为一个较小的值,比如设为0。这样,当CustomScrollView滚动时,SliverAppBar将立即折叠,不会出现模糊效果。
代码语言:txt
复制
CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      expandedHeight: 0, // 设置为0,关闭折叠时的模糊效果
      // 其他属性...
    ),
    // 其他sliver组件...
  ],
)
  1. 设置flexibleSpace属性:将SliverAppBarflexibleSpace属性设置为一个不具有模糊效果的组件,比如Container。这样,当CustomScrollView滚动时,SliverAppBar的背景将立即变为不透明,不会出现模糊效果。
代码语言:txt
复制
CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      flexibleSpace: Container(), // 设置为一个不具有模糊效果的组件
      // 其他属性...
    ),
    // 其他sliver组件...
  ],
)

以上两种方法可以根据具体需求选择其中一种来关闭CustomScrollView中的SliverAppBar折叠时的模糊效果。

注意:以上答案中没有提及腾讯云相关产品和产品介绍链接地址,因为该问题与云计算领域的专业知识、腾讯云产品等无关。

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

相关·内容

Flutter之SliverAppBar

SliverAppBar控件可以实现页面头部区域展开、折叠效果,类似于AndroidCollapsingToolbarLayout。 先看下SliverAppBar实现效果效果图如下: ?...SliverAppBar控件需要和CustomScrollView搭配使用,SliverAppBar要通常放在slivers第一位,后面接其他sliver控件。...SliverAppBar中有一个非常重要参数flexibleSpace,flexibleSpace是SliverAppBar展开和折叠区域,flexibleSpace与expandedHeight一起使用...展开区域高度‍‍ floating 设置为true,向下滑动,即使当前CustomScrollView不在顶部,SliverAppBar也会跟着一起向下出现 pinned 设置为true,当SliverAppBar...内容滑出屏幕,将始终渲染一个固定在顶部收起状态 snap 设置为true,当手指放开SliverAppBar会根据当前位置进行调整,始终保持展开或收起状态,此效果在floating=true

1.4K30

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

UI 分析 首先还是再来看一下「每日推荐」UI效果: ? 看到这个效果,有经验同学可能直接就会喊出:CustomScrollView!! 没错,当前页一共分为三部分: ?...1.SliverAppBar2.SliverAppBar bottom3.SliverList 整个页面就是用 CustomScrollView 来做,但是有一点不同: 平时我们在使用 SliverAppBar...做这种折叠效果时候,折叠起来是会变成主题色, 所以这里我找了别人写好一个组件:FlexibleDetailBar,用它以后效果就是上面图片那样。...5.忘记标了,还有一个是SliverAppBar展开模糊背景,也可以由调用者传入 so,我们从上往下来封装。...还是先确定一下需求,看看需要传入什么: 1.要传入一个背景还模糊2.传入title3.传入展开高度4.播放次数5.播放全部点击回调 确定好就之后,代码如下: class PlayListAppBarWidget

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

    SliverAppBar 相信很多 Android 开发小伙伴会用到 MaterialDesign CollapsingToolbarLayout 来实现折叠头部,既然 Android 有的,那么...因为在 CustomScrollView 只允许传入 Sliver 部件,那么类似 Container 等普通部件就不可以使用了,那么这样就需要更多 Sliver 组件才能完成视图,所以为了方便,直接通过...SliverPadding 那么在 CustomScrollView 中部件之间如何设置间距呢,可能你会想到用 SliverToBoxAdapter 包裹一个 Padding 来处理,当然没问题。...X 3:用于构建 NestScrollView 头部部件,innerBoxIsScrolled 主要用来控制 SliverAppBar forceElevated 属性,当内部内容滚动,显示...分析完源码后,例子目标很明确,使用 SliverAppBar + TabBar + TabBarView,先看下最后效果图吧 ?

    2.2K30

    Flutter 首页必用组件NestedScrollView

    在普通ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...: SliverAppBar展开折叠 用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。...print('${_scrollController.position}'); }); //滚动到指定位置 _scrollController.animateTo(20.0); CustomScrollView

    4.2K10

    UITableView在Flutter是什么?

    在这个例子,我们一次性创建了6个子Widget。但是从上图运行效果可以看到,由于屏幕宽高有限,同一间用户只能看到3个Widget。...这时,各自视图滚动和布局模型就是相互独立、分离,就很难保证整个页面统一一致滑动效果。 那么,Flutter是如何解决多ListView嵌套,页面滑动效果不一致问题呢?...在Flutter,有一个专门控件CustomScrollView,用来处理多个需要自定义滚动效果Widget。...具体实现思路是: 在创建SliverAppBar,把 flexibleSpace 参数设置为悬浮头图背景。...具体示例代码如下所示: CustomScrollView( slivers: [ SliverAppBar(//SliverAppBar 作为头图控件

    5.6K10

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

    在普通ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...SliverAppBar展开折叠 用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。...print('${_scrollController.position}'); }); //滚动到指定位置 _scrollController.animateTo(20.0); CustomScrollView

    4K40

    【Flutter 专题】52 图解可折叠状态栏

    顶部状态栏在日常是必不可少,今天和尚尝试一下可折叠状态栏使用; 和尚以前在学习滑动冲突曾用过 Sliver 系列 Widget,和尚这次尝试用 SliverAppBar...elevation:滑动过程中标题栏与列表交界处; forceElevated:与 elevation 共同使用,false 不展示,true 根据 elevation 设置效果展示; 如图:...pinned:true滑动后固定折叠状态栏,false 直接滑上去; floating:滑动过程效果,通常与 snap pinned 共同使用,且 floating 为 ture ,snap 也一般为...,其中 shrikOffset 为滑动距离,直到设置折叠展开高度; maxExtent 折叠状态栏展开最大高度; minExtent 折叠状态栏收起最小高度(pinned=true);当 maxExtent...=minExtent ,状态栏不折叠; shouldRebuild 判断是否与旧不同,是否需要重绘; class MySliverAppBar extends SliverPersistentHeaderDelegate

    1.4K51

    flutter系列之:使用SliverList和SliverGird

    简介 在上一篇文章我们讲解SliverAppBar时候有提到过,Sliver组件一般都用在CustomScrollView。...除了SliverAppBar之外,我们还可以为CustomScrollView添加List或者Grid来实现更加复杂组合效果。 今天要向大家介绍就是SliverList和SliverGird。...SliverList和SliverGird使用 有了上面介绍SliverList和SliverGird构造函数,接下来我们具体来看下如何在项目中使用SliverList和SliverGird。...默认情况下SliverList和SliverGird是需要和CustomScrollView一起使用,所以我们先创建一个CustomScrollView,在它slivers属性,放入一个SliverAppBar...总结 在CustomScrollView中使用SliverList和SliverGird,可以实现灵活呈现效果

    95530

    flutter系列之:使用SliverList和SliverGird

    简介 在上一篇文章我们讲解SliverAppBar时候有提到过,Sliver组件一般都用在CustomScrollView。...除了SliverAppBar之外,我们还可以为CustomScrollView添加List或者Grid来实现更加复杂组合效果。 今天要向大家介绍就是SliverList和SliverGird。...SliverList和SliverGird使用 有了上面介绍SliverList和SliverGird构造函数,接下来我们具体来看下如何在项目中使用SliverList和SliverGird。...默认情况下SliverList和SliverGird是需要和CustomScrollView一起使用,所以我们先创建一个CustomScrollView,在它slivers属性,放入一个SliverAppBar...总结 在CustomScrollView中使用SliverList和SliverGird,可以实现灵活呈现效果

    53310

    Flutter | Slivers 系列

    概述 CustomScrollView:一个滚动容器,改组件不接受任何 child,但是你可以直接提供 Slivers 已创建各种滚动效果,例如页面中有多个可滑动列表,如 Appbar, 列表,网格...CustomScrollView 。...常用到 Sliver 有,SliverAppbar,SliverList,SliverGrid,SliverToBoxAdapter 等 由于 CustomScrollView 子组件只能是 Sliver...,就可以提升不小性能,但是在实际项目中,想要固定元素高度是非常麻烦,就算是列表元素只有一行文字,也有可能会出现问题,例如直接在系统层面修改字体大小,这也会导致高度固定导致渲染出来效果不尽人意...SliverAppbar,并没有实现任何特殊效果,默认效果如下: 可以看到在滑动过程SliverAppbar 被顶上去了,这也是非常正常

    1.5K11

    python requests 如何达到关闭强制urlencode效果

    imageMogr2/sharpen/55|imageView2/1/w/200/h/300/q/85 该请求是将指定图片进行锐化处理然后再做压缩操作,正常请求是没问题,但当使用requests库进行下载却...无功而返 纳尼,这有办法关闭吗?...参数还是直接加到url自己拼好,它都要干预一下: def prepare_url(self, url, params): """Prepares the given HTTP URL...如何能不更改requests源码而更通用解决问题呢,可能这是一个小众问题,被股哥和度姐拒绝后,我开始了研究源码,既然没有参数控制,看看能不能将requests.url修改一下,如下所示,自己设置url...,使用也很方便,但如果是多线程的话,则必须每个线程一个session,这样达不到共享连接池效果,我们可以稍作修改,线程共用session,每个线程单独保存自己trickUrl: import requests

    8.7K00

    Flutter | 滚动组件,ListView,GridVIew等

    组件; 典型,在一个懒加载列表,如果将列表包裹在 AutomaticKeepAlive ,在改了吧划出视口,他也不会被 GC 回收(垃圾回收),他会使用 KeepAliveNotification...但是在 Custom ,需要粘起来可滚动组件就是 CustomScrollView Sliver 了,如果将 ListView 或者 GridView 作为 CustomScrollView...,也正因为如此,CustomScrollView 才可以将多个 Sliver 粘在一起,这些 Sliver 共用 CustomScrollView Scrollable,所以最终才实现了统一滑动效果...,SliverAppBar 等是和可滚动组件无关,他们主要是为了配合 CustomScrollView 一起使用,这是因为 CustomScrollView 子组件都必须是 sliver 思考...:SliverAppBar 对应 AppBar,两者不同之处在于 SliverAppBar 可以集成到 CustomScrollView SliverAppBar 可以结合 FlexibleSpaceBar

    8.6K20
    领券