首页
学习
活动
专区
工具
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控件可以实现页面头部区域展开、折叠的效果,类似于Android中的CollapsingToolbarLayout。 先看下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...例如,浏览内部列表以滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。...: SliverAppBar展开折叠 用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动时,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。...print('${_scrollController.position}'); }); //滚动到指定位置 _scrollController.animateTo(20.0); CustomScrollView

    4.3K10

    UITableView在Flutter中是什么?

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

    5.6K10

    【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,可以实现灵活的呈现效果。

    99930

    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,可以实现灵活的呈现效果。

    55210

    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.8K00

    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.7K20
    领券