Flutter 页面滚动吸顶详解（NestedScrollView）

前言

在业务开发中我们经常会有滚动吸顶的效果，目前Flutter也有很多种实现方式，这里介绍一下本人在开发中使用到的基于NestedScrollView实现的滚动吸顶组件；以及中间涉及的各种定位的布局操作；

效果

NestedScrollView

首先了解一下NestedScrollView滚动组件；

NestedScrollView：支持嵌套滑动的ScrollView；

属性

属性	说明	默认值
controller	滚动监听	无
scrollDirection	滚动方向	Axis.vertical 默认垂直方向
reverse	是都倒叙	false 默认值
physics	控制用户滚动视图的交互	AlwaysScrollableScrollPhysics 总是可以滑动 NeverScrollableScrollPhysics 禁止滚动 BouncingScrollPhysics 内容超过一屏上拉有回弹效果 ClampingScrollPhysics 包裹内容不会有回弹
headerSliverBuilder	折叠头部	无
body	滚动组件实体	无

NestedScrollView折叠部分使用SliverAppBar来实现

SliverAppBar

代码示例

NestedScrollView(controller: _scrollController,headerSliverBuilder: _headerSliverBuilder,body: buildSliverBody(context)
)
///页面滚动头部处理
List<Widget> _headerSliverBuilder(BuildContext context, bool innerBoxIsScrolled) {return <Widget> [buildSliverAppBar(context)];
}
///导航部分渲染
Widget buildSliverAppBar(BuildContext context) {return SliverAppBar(//当此值为true时 SliverAppBar 会固定在页面顶部//当此值为fase时 SliverAppBar 会随着滑动向上滑动pinned: true,//滚动是是否拉伸图片stretch: true,//展开区域的高度expandedHeight: 500,//当snap配置为true时，向下滑动页面，SliverAppBar（以及其中配置的flexibleSpace内容）会立即显示出来，//反之当snap配置为false时，向下滑动时，只有当ListView的数据滑动到顶部时，SliverAppBar才会下拉显示出来。snap: false,//阴影elevation: 0,//背景颜色backgroundColor: headerWhite? Colors.white : Color(0xFFF4F5F7),//App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightnessbrightness: Brightness.light,//在标题左侧显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮leading: IconButton(icon: Image.network(backIcon, height: 22, width: 22,),onPressed: (){//TODO: 返回事件处理}),//一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样， // 可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用flexibleSpace: FlexibleSpaceBar(title: headerWhite ? Text('长津湖', style: TextStyle(color: Color(0xFF333333),fontWeight: FontWeight.w700,fontSize: 17,fontFamily: 'PingFangSC-Semibold'),) : Text(''),//标题居中centerTitle: true,background: buildAppBarBackground(context),),);
}

属性

const SliverAppBar({Key key,this.leading,         //在标题左侧显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮this.automaticallyImplyLeading = true,//? 控制是否应该尝试暗示前导小部件为nullthis.title,               //当前界面的标题文字this.actions,          //一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单this.flexibleSpace,        //一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样， // 可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用this.bottom,         //一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏this.elevation,            //阴影this.forceElevated = false, this.backgroundColor,       //APP bar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用this.brightness,   //App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightnessthis.iconTheme,  //App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData().primaryIconThemethis.textTheme,    //App bar 上的文字主题。默认值为 ThemeData（）.primaryTextThemethis.primary = true,  //此应用栏是否显示在屏幕顶部this.centerTitle,     //标题是否居中显示，默认值根据不同的操作系统，显示方式不一样,true居中 false居左this.titleSpacing = NavigationToolbar.kMiddleSpacing,//横轴上标题内容 周围的间距this.expandedHeight,     //展开高度this.floating = false,       //是否随着滑动隐藏标题this.pinned = false,  //是否固定在顶部this.snap = false,   //与floating结合使用})

flexibleSpace

flexibleSpace: FlexibleSpaceBar(//是否展示标题title: headerWhite ? Text('长津湖', style: TextStyle(color: Color(0xFF333333),fontWeight: FontWeight.w700,fontSize: 17,fontFamily: 'PingFangSC-Semibold'),) : Text(''),//标题居中centerTitle: true,//折叠部分背景图片background: Container(height: 400,width: ScreenUtil().screenWidth,decoration: BoxDecoration(image: DecorationImage(image: NetworkImage('https://p0.meituan.net/movie/0e81560dc9910a6a658a82ec7a054ceb5075992.jpg@464w_644h_1e_1c'),fit: BoxFit.fill)),),
)

展示标题如下：

不展示标题滚动到某个位置时在展示如下：

完整代码

Flutter 页面滚动吸顶详解（NestedScrollView）相关推荐

微信小程序实现滚动吸顶
1.实现效果 2.实现原理方法一:position:sticky简单粗暴,但存在部分机型不支持 1.position:sticky( position: -webkit-sticky): 类似pos ...
Vue实现滚动吸顶，文案动态更改
Vue实现滚动吸顶,文案动态更改 1.效果和代码如下 <template><div class="record"><div class="c ...
ajax 页面无刷新,Ajax的页面无刷新实现详解（附代码）
这次给大家带来Ajax的页面无刷新实现详解(附代码),Ajax页面无刷新实现的注意事项有哪些,下面就是实战案例,一起来看一下. ajax (ajax开发) AJAX即"Asynchronou ...
[html] 写一个滚动吸顶的布局
[html] 写一个滚动吸顶的布局 position: sticky; top:20px: 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与 ...
html 仿word页面,HTML+CSS入门 HTML页面仿WORD样式详解
本篇教程介绍了HTML+CSS入门 HTML页面仿WORD样式详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 要求不再浏览器中添加office插件的前提下.展示WOR ...
jquery将html转为pdf文件,HTML+CSS入门 jsPDF插件实现将HTML页面转换成PDF详解
本篇教程介绍了HTML+CSS入门 jsPDF插件实现将HTML页面转换成PDF详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.目的:在前段是 jQuery库或 ...
《微信小程序开发》页面导航最强详解 | 如何对小程序页面进行跳转？
<微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 文章目录 <微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 一.微信小程序导航二.命 ...
【Unity3D-UGUI系列】（十二）ScrollView 滚动视图组件详解
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有 ...
CSS页面布局（超详解）
目录 1 CSS页面布局概述 1.1 概述 1.2 网页栏目划分 1.3 元素类型转化 1.3.1 块元素 1.3.2 行内元素 1.3.2 块元素和行内元素的转换 1.4 定位 1.4.1 静态定位 ...