floatingfloating是一个非常重要的属性，因为对于SliverAppBar来说，当界面向远离SliverAppBar的方向滚动的时候，SliverAppBar会隐藏或者缩写为status bar...pinned表示SliverAppBar在滚动的过程中是否会固定在界面的边缘。...snapsnap是和floating一起使用的属性，snap表示当向SliverAppBar滚动的时候，SliverAppBar是否立即展示完全。...最后运行可以得到下面的界面：默认情况下SliverAppBar是展开状态，如果我们将下面的SliverList向上滑动，flexibleSpace就会被隐藏，我们可以得到下面的界面：当我们向上慢慢滑动的时候...总结简单点说，SliverAppBar就是一个在滑动中可变大小的AppBar,我们可以通过设置不同的参数来实现不同的效果。
floating floating是一个非常重要的属性，因为对于SliverAppBar来说，当界面向远离SliverAppBar的方向滚动的时候，SliverAppBar会隐藏或者缩写为status...pinned 表示SliverAppBar在滚动的过程中是否会固定在界面的边缘。...snap snap是和floating一起使用的属性，snap表示当向SliverAppBar滚动的时候，SliverAppBar是否立即展示完全。...最后运行可以得到下面的界面： 默认情况下SliverAppBar是展开状态，如果我们将下面的SliverList向上滑动，flexibleSpace就会被隐藏，我们可以得到下面的界面： 当我们向上慢慢滑动的时候...总结 简单点说，SliverAppBar就是一个在滑动中可变大小的AppBar,我们可以通过设置不同的参数来实现不同的效果。
title → Widget - Toolbar 中主要内容，通常显示为当前界面的标题文字。...elevation → double - 控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当 SliverAppBar 和内容同级的时候，该值为 0， 当内容滚动 SliverAppBar...flexibleSpace → Widget - 一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用。...iconTheme → IconThemeData - Appbar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme。...toolbarOpacity → double 3.代码 // 返回每个隐藏的菜单项 SelectView(IconData icon, String text, String id) {
今天介绍的组件是NestedScrollView，大部分的App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图的组件，其滚动位置是固有链接的。...在普通的ScrollView中， 如果有一个Sliver组件容纳了一个TabBarView，它沿相反的方向滚动（例如，允许用户在标签所代表的页面之间水平滑动，而列表则垂直滚动），则该TabBarView...例如，浏览内部列表以滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。...滚动隐藏AppBar 比如实现如下场景，当列表滚动时，隐藏AppBar，用法如下： NestedScrollView( headerSliverBuilder: (BuildContext context...reverse参数表示反转滚动方向，并不是由垂直转为水平，而是垂直方向滚动时，默认向下滚动，reverse设置false，滚动方向改为向上，同理水平滚动改为水平向左。
在普通的ScrollView中， 如果有一个Sliver组件容纳了一个TabBarView，它沿相反的方向滚动（例如，允许用户在标签所代表的页面之间水平滑动，而列表则垂直滚动），则该TabBarView...例如，浏览内部列表以滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。...滚动隐藏AppBar 比如实现如下场景，当列表滚动时，隐藏AppBar，用法如下： NestedScrollView( headerSliverBuilder: (BuildContext context...) { return <Widget [SliverAppBar( expandedHeight: 230.0, pinned: true, flexibleSpace: FlexibleSpaceBar...reverse参数表示反转滚动方向，并不是由垂直转为水平，而是垂直方向滚动时，默认向下滚动，reverse设置false，滚动方向改为向上，同理水平滚动改为水平向左。
SliverAppBar控件可以实现页面头部区域展开、折叠的效果，类似于Android中的CollapsingToolbarLayout。 先看下SliverAppBar实现的效果，效果图如下： ?...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
先来简单看下部分效果图： 本文内容可能有点多，但是都很简单，配上效果图味道更佳~ 什么是SliverAppBar SliverAppBar 类似于Android中的CollapsingToolbarLayout...常用属性 const SliverAppBar({ Key key, this.leading,//左侧的图标或文字，多为返回箭头 this.automaticallyImplyLeading...this.flexibleSpace,//可以理解为SliverAppBar的背景内容区 this.bottom,//SliverAppBar的底部区 this.elevation...要加载本地图片，还需要在pubspec.yaml 文件中配置一下 assets: - images/a.jpg 修改flexibleSpace flexibleSpace...添加TabBar 在SliverAppBar的bottom属性中添加TabBar，直接改造源码中的例子 var _tabs = []; _tabs = [
如下所示，我定义了一组列表项组件，并将他们放在了垂直滚动的ListView中： ListView( children: [ //设置ListView组件的标题与图标...在这个例子中，我们一次性创建了6个子Widget。但是从上图的运行效果可以看到，由于屏幕的宽高有限，同一时间用户只能看到3个Widget。...以一个有着封面头图的列表为例，我们希望封面头图和列表这两层视图的滚动联动起来，当用户滚动列表时，头图会根据用户的滚动手势，进行缩小与展开。...具体的实现思路是： 在创建SliverAppBar时，把 flexibleSpace 参数设置为悬浮头图背景。...flexibleSpace 可以让背景图显示在SliverAppBar下方，高度和SliverAppBar一样； 而在创建SliverList时，通过 SliverChildBuilderDelegate
以下是我们将介绍的内容： Flutter 中的 AppBar 是什么？ 应用栏布局 自定义 AppBar Flutter 中的 AppBar 是什么？...Flutter AppBar 布局 leading leading 接受一个小部件，可以分配任何东西——文本、图标，甚至一行中的多个小部件。.../配合leading使用 this.title,//标题文本 this.actions,//右侧item this.flexibleSpace,//显示在 AppBar 下方的控件...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件的 z 坐标顺序，默认值 4，对于可滚动的 SliverAppBar，当 SliverAppBar...和内容同级的时候，该值为 0， // 当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值。
因为是MD中Card的样式，所以需要在最外层包裹一层Card 同时，图中未标注的是，padding的部分。在Flutter中，要实现padding,只要在它包裹在外面一层布局下就可以了。...结合SliverAppBar和SliverGrid来进行整体的绘制。 CustomScrollView 使用它，可以结合Sliver来创造自定义的滚动效果。...SliverAppBar中的flexibleSpace来存放appBar内显示的其他控件 默认的 SliverAppBar的pined为false，故他会跟着滚上去。...22.gif 仔细看，有两点效果还是不满足我们预期的效果。 FloatingActionButton，需要压住一点上面的图片。 滚动时，我们不需要图片进行透明度的渐变。...我们这里需要根据滚动的量去改变FlexibleSpaceBar内我们创建的logo和图标的大小。
一、老套路，先看样式 右侧图是我的实际开发中业务界面，用作展示而已 二、讲解（后附源码） 1.这里主要是用户AppBar组件 /** AppBar({ Key key, this.leading...,//Toolbar 中主要内容，通常显示为当前界面的标题文字 this.actions,//一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton...来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单 this.flexibleSpace,//一个显示在 AppBar 下方的控件，高度和 AppBar...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当...SliverAppBar 和内容同级的时候，该值为 0， 当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值 this.backgroundColor
一、老套路，先看样式 右侧图是我的实际开发中业务界面，用作展示而已 ? ?...来显示为三个点，点击后弹出二级菜单 this.flexibleSpace,//一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当...SliverAppBar 和内容同级的时候，该值为 0， 当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值 this.backgroundColor...如果leading属性未设置，且Scaffold设置了Drawer则显示打开Drawer的图标 如果leading属性未设置，Scaffold也未设置Drawer，此时如果有前一个路由，则显示BackButton
Flutter NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景，如向上滑动视图时，要折叠隐藏一部分内容，这时候就需要使用到 NestedScrollView 与 SliverAppBar...在本节中是使用 NestedScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 实现的折叠头部效果undefined 【x1】微信公众号的每日提醒 随时随记...: true, ///SliverAppBar展开的高度 expandedHeight: 200, flexibleSpace: buildFlexibleSpaceBar...是配置在 SliverAppBar 中的 bottom 属性下，通过 buildTabBar 方法来封装的， 代码如下： TabBar buildTabBar() { return TabBar(...，是在 SliverAppBar 的 flexibleSpace 属性中配置的，当然就是使用了 FlexibleSpaceBar，代码如下： String imageUrl = "https:
来把未填满的补上，就是首尾都会留空白。...SliverPersistentHeader Flutter 中，为我们提供了这么一个作为头部的部件 SliverPersistentHeader，这个部件可以根据滚动的距离缩小高度，有点类似 SliverAppBar...糟透了的翻译 X 1：一个内部能够嵌套其他滚动部件，并使其滚动位置联结到一起的滚动部件 /// The most common use case for this widget is a scrollable...X 3：用于构建 NestScrollView 的头部部件，innerBoxIsScrolled 主要用来控制 SliverAppBar 的 forceElevated 属性，当内部内容滚动时，显示...接着请注意代码中的那段 assert 中的文字 糟透了的翻译 X 5：sliverOverlapAbsorberHandleFor 传入的参数 context 中必须包含 NestedScrollView
概述 CustomScrollView：一个滚动的容器，改组件不接受任何 child，但是你可以直接提供 Slivers 已创建各种滚动效果，例如页面中有多个可滑动的列表，如 Appbar， 列表，网格...在 slivers 系列中，SliverAppbar 可以说是使用频率比较高的组件了，SliverAppbar 为应用栏提供了自定义滚动行为，下面我们来看一下 class _MyHomePageState...SliverAppbar，并没有实现任何特殊效果，默认的效果如下： 可以看到在滑动的过程中，SliverAppbar 被顶上去了，这也是非常正常的。...( title: Text("Sliver AppBar"), snap: true, floating: true, ) flexibleSpace：可展开拉伸的部分 SliverAppBar...hasScrollBody: false, child: Center( child: CircularProgressIndicator(), ), ) 复制代码 hasScrollBody ：当前组件中是否有可滚动的组件
Drawer, 这是一个垂直面板，通常使用drawer属性显示在身体的左侧（通常隐藏在手机上）....对于可滚动的应用程序栏，请参阅SliverAppBar，该应用程序将AppBar嵌入长条中以用于CustomScrollView。...如果指定了一个flexibleSpace部件，那么它将堆叠在工具栏和底部部件的后面。下图显示了当书写语言是从左到右（例如英语）时，每个插槽出现在工具栏中的位置： ?...FlexibleSpaceBar, 当应用栏可以展开和折叠时，它与flexibleSpace一起使用. material.google.com/layout/structure.html#structure-toolbars...也可以看看: IconTheme, 为图标提供环境配置. Icon, 用于显示图标材质设计图标库. ImageIcon,用于显示来自AssetImages或其他ImageProviders的图标.
在前面的文章中我们将到了Appbar的用户，它类似于Android中的toolbar，但是熟悉Android开发的童鞋应该知道在Android中还有个Collapsing Toolbar的东西，就是一个可以折叠的标题栏效果...首先我们使用了NestedScrollView中的headerSliverBuilder属性添加了SliverAppBar 然后我们设置展开的高度为200，不让标题栏随着滑动滚动出可视区域 我们使用flexibleSpace...来构建了一个可以滚动的区域 最后我们给NestedScrollView的body加了一个ListView 然后我们来看下效果： ?...当然我们是希望这个TabBar在SliverAppBar下方，并且随着SliverAppBar滚动的，但是我们还是来看下效果吧 ?...但是有童鞋就问问了，我们怎么让这个SliverPersistentHeader中的内容（TabBar）不随着ListView的滚动而滑动呢？
顶部状态栏在日常中是必不可少的，今天和尚尝试一下可折叠状态栏的使用； 和尚以前在学习滑动冲突时曾用过 Sliver 系列的 Widget，和尚这次尝试用 SliverAppBar...来处理； SliverAppBar 源码分析 const SliverAppBar({ Key key, this.leading, this.automaticallyImplyLeading...pinned：true滑动后固定折叠状态栏，false 直接滑上去； floating：滑动过程中效果，通常与 snap pinned 共同使用，且 floating 为 ture 时，snap 也一般为...true；官方推荐的样例视频很好的诠释出滑动过程中列表的滑动与顶部状态栏滑动变化； floating: false, pinned: false, snap: false floating: true...； maxExtent 折叠状态栏展开的最大高度； minExtent 折叠状态栏收起的最小高度(pinned=true)；当 maxExtent=minExtent 时，状态栏不折叠； shouldRebuild
时，需要给GridView指定高度，但我们希望高度随内容而变化（不指定），ListView和GridView作为整体滚动效果。...，AppBar具有吸顶效果，此效果也是我们经常遇到的，用法如下： CustomScrollView( slivers: [ SliverAppBar( pinned...reverse参数表示反转滚动方向，并不是垂直转为水平，而是垂直方向滚动时，默认向下滚动，reverse设置false，滚动方向改为向上，同理水平滚动改为水平向左。...primary设置为true时，不能设置controller，因为primarytrue时，controller使用PrimaryScrollController，这种机制带来的好处是父组件可以控制子树中可滚动组件的滚动行为...，例如，Scaffold正是使用这种机制在iOS中实现了点击导航栏回到顶部的功能。
(BuildContext context, BoxConstraints constraints) { //因为发现当滚动成column时，上面有statusBar高度的...CustomMultiChildLayout中的，子节点，都必须用LayoutId来包裹！！！ 然后，我还要处理两个细节。 一个是当滚动到中间位置后，就不能左右切换了。...，会有一个粘性的效果 这个效果是整个SliverAppBar来提供的。...当滚动的距离大于一办时，判断对应的滚动反向，来创造对应simulation class _SnappingScrollPhysics extends ClampingScrollPhysics {...添加PageScrolPhysics，这样就是按照页面滚动。添加BounceScrollPhysics,就实现ios中的弹性滚动了。 好的。这边文章，我们就暂时到这里。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
