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

Flutter SliverAppBar和FlexibleSpaceBar,在向上滚动时呈现与FlexibleSpaceBar的标题参数不同的小部件

Flutter SliverAppBar是Flutter框架中的一个组件,用于创建一个可滚动的应用栏。它通常与CustomScrollView一起使用,以实现灵活的滚动效果。

SliverAppBar具有以下特点:

  1. 可以在应用栏中显示标题、图标、操作按钮等内容。
  2. 在向上滚动时,可以通过设置滚动效果来隐藏或收缩应用栏。
  3. 可以根据滚动位置动态改变应用栏的高度、背景颜色等属性。
  4. 可以与其他滚动组件(如SliverList、SliverGrid)一起使用,实现复杂的滚动布局。

FlexibleSpaceBar是SliverAppBar的一个参数,用于定义应用栏的可伸缩空间。它通常包含一个背景图像、标题和其他自定义小部件。

在向上滚动时,SliverAppBar和FlexibleSpaceBar可以呈现不同的小部件。例如,当滚动到顶部时,可以显示一个收起的标题,而在向上滚动时,可以显示一个展开的标题和其他内容。

Flutter中的推荐使用的相关组件和产品是:

  • SliverAppBar:Flutter框架中提供的用于创建可滚动应用栏的组件。详细介绍请参考:SliverAppBar
  • FlexibleSpaceBar:Flutter框架中SliverAppBar的一个参数,用于定义应用栏的可伸缩空间。详细介绍请参考:FlexibleSpaceBar
  • CustomScrollView:Flutter框架中用于创建自定义滚动布局的组件。可以与SliverAppBar和其他滚动组件一起使用。详细介绍请参考:CustomScrollView

以上是关于Flutter SliverAppBar和FlexibleSpaceBar的概念、分类、优势、应用场景以及推荐的相关组件和产品的介绍。

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

相关·内容

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

题记 —— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。 *** Flutter是谷歌推出的最新的移动开发框架。...Flutter NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景,如向上滑动视图时,要折叠隐藏一部分内容,这时候就需要使用到 NestedScrollView 与 SliverAppBar...在本节中是使用 NestedScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 实现的折叠头部效果undefined 【x1】微信公众号的每日提醒 随时随记...是配置在 SliverAppBar 中的 bottom 属性下,通过 buildTabBar 方法来封装的, 代码如下: TabBar buildTabBar() { return TabBar(...,是在 SliverAppBar 的 flexibleSpace 属性中配置的,当然就是使用了 FlexibleSpaceBar,代码如下: String imageUrl = "https:

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

    首先看下 SliverAppBar 的源码吧,其实和 AppBar 的参数差不多,只是多了一些比较特殊的属性 const SliverAppBar({ Key key, this.leading...SliverPersistentHeader Flutter 中,为我们提供了这么一个作为头部的部件 SliverPersistentHeader,这个部件可以根据滚动的距离缩小高度,有点类似 SliverAppBar...糟透了的翻译 X 1:一个内部能够嵌套其他滚动部件,并使其滚动位置联结到一起的滚动部件 /// The most common use case for this widget is a scrollable...X 3:用于构建 NestScrollView 的头部部件,innerBoxIsScrolled 主要用来控制 SliverAppBar 的 forceElevated 属性,当内部内容滚动时,显示..._absorberHandle; } 请注意到中间的注释 糟透了的翻译 X 4:这个方法返回的值对于 SliverOverlapAbsorber 和 SliverOverlapInjector 部件是非常重要的参数

    2.2K30

    Flutter 组件集录 | FlexibleSpaceBar 组件是怎么炼成的

    前言: 问题引入 FlexibleSpaceBar 是一个和 SliverAppBar 共生的组件,一般不单独使用。...探索: FlexibleSpaceBar 组件的标题如何实现缩放? 在滑动中,title 组件的内容有缩放效果是实事,这说明在组件的 构建逻辑 中必然存在缩放的变换。...探索: FlexibleSpaceBar 组件是如何感知滑动数据的? 从上面效果中可以看出,SliverAppBar 滑动距离和剩余空间的比值,会作为缩放数值的依据。...当 t 为 0 时,表示完全展开的状态;t 为 1 时,表示 SliverAppBar 剩余空间完全收起: ---- 4....另外,FlexibleSpaceBar 状态类的构建逻辑在处理变换时是比较死的,没有暴露给使用者可操作性的空间。

    1K30

    Flutter之SliverAppBar

    控件 ], ) SliverAppBar和其他slivers控件的结构如下: ?...SliverAppBar中有一个非常重要的参数flexibleSpace,flexibleSpace是SliverAppBar中展开和折叠区域,flexibleSpace与expandedHeight一起使用..."返回"图标 title 标题,通常为Text控件 actions 右侧控件 flexibleSpace 展开和折叠区域 bottom 底部控件 elevation‍ 阴影 expandedHeight...展开区域的高度‍‍ floating 设置为true时,向下滑动时,即使当前CustomScrollView不在顶部,SliverAppBar也会跟着一起向下出现 pinned 设置为true时,当SliverAppBar...内容滑出屏幕时,将始终渲染一个固定在顶部的收起状态 snap 设置为true时,当手指放开时,SliverAppBar会根据当前的位置进行调整,始终保持展开或收起的状态,此效果在floating=true

    1.4K30

    Flutter | 滚动组件,ListView,GridVIew等

    可滚动组件 当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter 就会提示 Overflow 错误,为此,Flutter 提供了多种可滚动组件,用于显示列表和长布局; 可滚动组件都直接或间接的包含一个...默认情况下,Flutter 会根据具体的平台分别使用不同的 ScrollPhysics 对象,应用不同的显示效果,在 IOS 上会出现弹性效果,而在 android 上则会出现微光效果,如果你想在所有的平台下使用同一个效果...当 ListView 在一个无边界(滚动方向上)的容器中时, shrinkWrap 必须为 true addAutomaticKeepAlives:该属性表示是否将列表项(子组件) 包裹在 AutomaticKeepAlive...,效果如下: 总结 上面主要介绍了 ListView 的公共参数和构造函数,不同的构造对应了不同列表的生成模型,如果需要自定义列表生成模型,可以通过 ListView.custom 来定义,他需要实现一个...:SliverAppBar 对应 AppBar,两者不同之处在于 SliverAppBar 可以集成到 CustomScrollView 中,SliverAppBar 可以结合 FlexibleSpaceBar

    8.7K20

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

    顶部状态栏在日常中是必不可少的,今天和尚尝试一下可折叠状态栏的使用; 和尚以前在学习滑动冲突时曾用过 Sliver 系列的 Widget,和尚这次尝试用 SliverAppBar...title:顶部标题 Widget 常见的是文字标题等; centerTitle:true 为标题 Widget 居中,false 默认居左; actions:顶部右侧菜单组,可设置多个菜单按钮等;...elevation:滑动过程中标题栏与列表交界处; forceElevated:与 elevation 共同使用,false 时不展示,true 时根据 elevation 设置效果展示; 如图:...true;官方推荐的样例视频很好的诠释出滑动过程中列表的滑动与顶部状态栏滑动变化; floating: false, pinned: false, snap: false floating: true...判断是否与旧的不同,是否需要重绘; class MySliverAppBar extends SliverPersistentHeaderDelegate { final double expandedHeight

    1.4K51

    Flutter 粘合剂CustomScrollView控件

    时,需要给GridView指定高度,但我们希望高度随内容而变化(不指定),ListView和GridView作为整体滚动效果。...相互嵌套场景 在实际业务场景中经常见到这样的布局,顶部是网格布局(GridView),然后是列表布局(ListView),滚动的时候做为一个整体,此场景是无法使用GridView+ListView来实现的...滚动方向,分为垂直和水平方向。...reverse参数表示反转滚动方向,并不是垂直转为水平,而是垂直方向滚动时,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。...primary设置为true时,不能设置controller,因为primarytrue时,controller使用PrimaryScrollController,这种机制带来的好处是父组件可以控制子树中可滚动组件的滚动行为

    2K20

    Flutter | Slivers 系列

    最主要的原因就是可以在 slives 中添加多个组件,如在列表的上面和下面添加更多的内容。...在 SliverPrototypeExtentList 中,可以通过 prototypeItem 来传入一个原型,这个原型并不会渲染到屏幕上,在运行的过程中,Flutter 会将原型的尺寸计算出来,之后就会把所有的元素尺寸设置成这个原型的尺寸...在 slivers 系列中,SliverAppbar 可以说是使用频率比较高的组件了,SliverAppbar 为应用栏提供了自定义滚动行为,下面我们来看一下 class _MyHomePageState...SliverAppbar,并没有实现任何特殊效果,默认的效果如下: 可以看到在滑动的过程中,SliverAppbar 被顶上去了,这也是非常正常的。...区别就是在滑动的时候 SliveAppbar 的底部会有一点点影子 snap:在滑动停止之后,导航会自动全部显示出来,需要注意的是必须搭配 floating 一起使用,如下: SliverAppBar

    1.5K11

    flutter仿boss直聘,一个比较完整的例子(一)

    基于Flutter1.0的最新版本来了,请前往查看flutter仿BOSS直聘(二),大前端技术实现. 简介:2年前,RN刚出来时做了个仿拉钩的demo,react-native-lagou....这次flutter来了,想感受一下,索性用目前flutter的版本写的一个仿boss直聘应用。 时间有限,没完全仿照,去掉了一些功能,但是界面风格一致,有参考价值。...QQ技术交流群:468010872 感悟 与一些文章里介绍的非常相似,如果会RN,那么学起来会很快,flutter借鉴了RN的组件化思想,路由机制,状态机等。...可以同时在android和ios运行。 性能很快,超过RN,因为没有bridge层。 还是要多看官方文档和源码,才能碰到问题解决。 IDE还不是很友好,hot reload有时无效。...先上效果 16224a4ce65ff0df.gif 部署到手机 确保flutter正确安装之后,进入目录运行flutter run --release 环境问题 如果flutter环境有问题,在.bash_profile

    1.5K30

    Flutter可滑动组件

    在Flutter中,我们也有对应的列表Widget,就是ListView。 注意:在Flutter里面想要实现滑动效果,都需要在组件外部包裹滚动的视图。...在Flutter中我们可以使用GridView来实现,使用方式和ListView也比较相似。...2.2 默认构造函数 使用默认构造函数来创建GridView时,和ListView相比,需要传入一个特殊的参数:gridDelegate。...4.滚动事件监听 4.1 滚动事件监听介绍 对于滚动的视图,我们经常需要监听它的一些滚动事件,在监听到滚动事件时执行对应的操作。...比如视图滚动到底部时,我们可能希望做上拉加载更多;比如滚动到一定位置时显示一个回到顶部的按钮,点击回到顶部的按钮,回到顶部;比如监听滚动什么时候开始,什么时候结束; 在Flutter中监听滚动相关的内容由两部分组成

    7.2K30

    6详解AppBar小部件

    由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。 在本教程中,我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。...AppBar 标题图片 默认情况title下,根据 Material 指南与 AppBar 的左侧对齐。...), Flutter AppBar 中心标题 actions actions是与 AppBar 右侧对齐的小部件列表。我们通常在用作按钮的应用程序中看到它们来触发下拉菜单、个人资料头像等。...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件的 z 坐标顺序,默认值 4,对于可滚动的 SliverAppBar,当 SliverAppBar...和内容同级的时候,该值为 0, // 当内容滚动 SliverAppBar 变为 Toolbar 的时候,修改 elevation 的值。

    16.4K10

    flutter 起步

    比如 Navigator.pushNamed(context, '/');当部件Widget在StatelessWidget.build函数被返回时,这个部件会成为父部件。...所以这意味着StatelessWidget.build方法中的context和函数内部部件Widegt的context不是同一个上下文。所以它们两个不同上下文能够调用的方法是有区别的。...19. checkerboardRasterCacheImages当为true时,打开光栅缓存图像的棋盘格20. checkerboardOffscreenLayers当为true时,打开呈现到屏幕位图的层的棋盘格...elevation → double - 控件的 z 坐标顺序,默认值为 4,对于可滚动的 SliverAppBar,当 SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar...flexibleSpace → Widget - 一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用。

    4.5K20
    领券