如何使用颤振首页必用组件NestedScrollView

这篇文章主要为大家展示了如何使用颤振首页必用组件NestedScrollView,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。

昨天颤振1.17版本重磅发布,新的版本主要是优化性能,修复错误,有人觉得此版本毫无亮点,但也从另一方面体现了颤振目前针对移动端已经较为完善,想了解具体内容,文末有链接,如果你想升级到最新版本,建议慎重,有些人升级后项目无法运行。

今天介绍的组件是NestedScrollView,大部分的应用首页都会用到这个组件。

可以在其内部嵌套其他滚动视图的滚动视图,其滚动位置是固有链接的。

在普通的<代码>滚动视图> TabBarView> TabBarView> 滚动视图> 滚动视图> SliverAppBar 折叠以展开。

比如实现如下场景,当列表滚动时,隐藏<代码> AppBar> NestedScrollView ( 　　headerSliverBuilder:(BuildContext上下文,bool innerBoxIsScrolled) { 　　返回& lt; Widget> [SliverAppBar ( 　　标题:文本(& # 39;& # 39;), 　　)); 　　}, 　　身体:列表视图。构建器(itemBuilder:(BuildContext上下文,int指数){ 　　返回容器( 　　身高:80, 　　颜色:颜色。初选(指数% Colors.primaries.length), 　　对齐:Alignment.center, 　　孩子:文本( 　　& # 39;指数# 39;美元, 　　风格:TextStyle(颜色:颜色。白色,字形大小:20), 　　), 　　）; 　　},itemCount: 20日), 　　)

效果如下:

用法如下:

NestedScrollView ( 　　headerSliverBuilder:(BuildContext上下文,bool innerBoxIsScrolled) { 　　返回& lt; Widget> [SliverAppBar ( 　　expandedHeight: 230.0, 　　固定:没错, 　　flexibleSpace: FlexibleSpaceBar ( 　　标题:文本(& # 39;复仇者联盟& # 39;), 　　背景:Image.network ( 　　& # 39;http://img.haote.com/upload/20180918/2018091815372344164.jpg& # 39; 　　适合:BoxFit.fitHeight, 　　), 　　), 　　)); 　　}, 　　身体:列表视图。构建器(itemBuilder:(BuildContext上下文,int指数){ 　　返回容器( 　　身高:80, 　　颜色:颜色。初选(指数% Colors.primaries.length), 　　对齐:Alignment.center, 　　孩子:文本( 　　& # 39;指数# 39;美元, 　　风格:TextStyle(颜色:颜色。白色,字形大小:20), 　　), 　　）; 　　},itemCount: 20日), 　　)

效果如下:

与TabBar配合使用

用法如下:

NestedScrollView ( 　　headerSliverBuilder:(BuildContext上下文,bool innerBoxIsScrolled) { 　　返回& lt; Widget> ( 　　SliverAppBar ( 　　expandedHeight: 230.0, 　　固定:没错, 　　flexibleSpace:填充( 　　填充:EdgeInsets。对称(垂直:8), 　　孩子:页面浏览人数(), 　　), 　　), 　　SliverPersistentHeader ( 　　固定:没错, 　　代表:StickyTabBarDelegate ( 　　孩子:TabBar ( 　　labelColor: Colors.black, 　　控制器:this._tabController, 　　标签:& lt; Widget> ( 　　选项卡(文本:& # 39;资讯& # 39;), 　　选项卡(文本:& # 39;技术& # 39;), 　　]， 　　), 　　), 　　), 　　]; 　　}, 　　身体:TabBarView ( 　　控制器:this._tabController, 　　孩子们:& lt; Widget> ( 　　RefreshIndicator (>类StickyTabBarDelegate延伸SliverPersistentHeaderDelegate { 　　最后TabBar孩子; 　　 　　StickyTabBarDelegate ({@ required this.child}); 　　 　　@override 　　小部件构建( 　　BuildContext上下文、双shrinkOffset bool overlapsContent) { 　　返回容器( 　　颜色:Theme.of .backgroundColor(上下文), 　　孩子:this.child, 　　）; 　　} 　　 　　@override 　　双得到maxExtent=比;this.child.preferredSize.height; 　　 　　@override 　　双得到minExtent=比;this.child.preferredSize.height; 　　 　　@override 　　bool shouldRebuild (SliverPersistentHeaderDelegate oldDelegate) { 　　返回true; 　　} 　　}

效果如下:

如何使用颤振首页必用组件NestedScrollView