脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Flutter 组件NestedScrollView

Flutter 首页必用组件NestedScrollView的示例详解

 更新时间：2020年05月08日 08:41:01   作者：老孟Flutter  
今天介绍的组件是NestedScrollView，大部分的App首页都会用到这个组件。对Flutter 首页必用组件NestedScrollView的相关知识感兴趣的一起看看吧

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

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

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

在普通的ScrollView中， 如果有一个Sliver组件容纳了一个TabBarView，它沿相反的方向滚动（例如，允许用户在标签所代表的页面之间水平滑动，而列表则垂直滚动），则该TabBarView内部的任何列表都不会相互作用 与外部ScrollView。 例如，浏览内部列表以滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。

滚动隐藏AppBar

比如实现如下场景，当列表滚动时，隐藏AppBar，用法如下：

NestedScrollView(
 headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
  return <Widget>[SliverAppBar(
   title: Text('脚本之家'),
  )];
 },
 body: ListView.builder(itemBuilder: (BuildContext context,int index){
  return Container(
   height: 80,
   color: Colors.primaries[index % Colors.primaries.length],
   alignment: Alignment.center,
   child: Text(
    '$index',
    style: TextStyle(color: Colors.white, fontSize: 20),
   ),
  );
 },itemCount: 20,),
)

效果如下：

SliverAppBar展开折叠

用法如下：

NestedScrollView(
 headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
  return <Widget>[SliverAppBar(
   expandedHeight: 230.0,
   pinned: true,
   flexibleSpace: FlexibleSpaceBar(
    title: Text('复仇者联盟'),
    background: Image.network(
     'http://img.haote.com/upload/20180918/2018091815372344164.jpg',
     fit: BoxFit.fitHeight,
    ),
   ),
  )];
 },
 body: ListView.builder(itemBuilder: (BuildContext context,int index){
  return Container(
   height: 80,
   color: Colors.primaries[index % Colors.primaries.length],
   alignment: Alignment.center,
   child: Text(
    '$index',
    style: TextStyle(color: Colors.white, fontSize: 20),
   ),
  );
 },itemCount: 20,),
)

效果如下：

与TabBar配合使用

用法如下：

NestedScrollView(
 headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
  return <Widget>[
   SliverAppBar(
    expandedHeight: 230.0,
    pinned: true,
    flexibleSpace: Padding(
     padding: EdgeInsets.symmetric(vertical: 8),
     child: PageView(),
    ),
   ),
   SliverPersistentHeader(
    pinned: true,
    delegate: StickyTabBarDelegate(
     child: TabBar(
      labelColor: Colors.black,
      controller: this._tabController,
      tabs: <Widget>[
       Tab(text: '资讯'),
       Tab(text: '技术'),
      ],
     ),
    ),
   ),
  ];
 },
 body: TabBarView(
  controller: this._tabController,
  children: <Widget>[
   RefreshIndicator(
    onRefresh: (){
     print(('onRefresh'));
    },
    child: _buildTabNewsList(_newsKey, _newsList),
   ),

   _buildTabNewsList(_technologyKey, _technologyList),
  ],
 ),
)

StickyTabBarDelegate 代码如下：

class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
 final TabBar child;

 StickyTabBarDelegate({@required this.child});

 @override
 Widget build(
   BuildContext context, double shrinkOffset, bool overlapsContent) {
  return Container(
   color: Theme.of(context).backgroundColor,
   child: this.child,
  );
 }

 @override
 double get maxExtent => this.child.preferredSize.height;

 @override
 double get minExtent => this.child.preferredSize.height;

 @override
 bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
  return true;
 }
}

效果如下：

其他属性

通过scrollDirection和reverse参数控制其滚动方向，用法如下：

NestedScrollView(
 scrollDirection: Axis.horizontal,
 reverse: true,
 ...
)

scrollDirection滚动方向，分为垂直和水平方向。

reverse参数表示反转滚动方向，并不是由垂直转为水平，而是垂直方向滚动时，默认向下滚动，reverse设置false，滚动方向改为向上，同理水平滚动改为水平向左。

controller为滚动控制器，可以监听滚到的位置，设置滚动的位置等，用法如下：

_scrollController = ScrollController();

//监听滚动位置
  _scrollController.addListener((){
   print('${_scrollController.position}');
  });
  //滚动到指定位置
  _scrollController.animateTo(20.0);

CustomScrollView(
	controller: _scrollController,
	...
)

physics表示可滚动组件的物理滚动特性，具体查看ScrollPhysics

交流

Flutter博客地址（近200个控件用法）：http://laomengit.com

总结

到此这篇关于Flutter 首页必用组件NestedScrollView的文章就介绍到这了,更多相关Flutter 首页必用组件NestedScrollView内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Android利用传感器仿微信摇一摇功能

    Android利用传感器仿微信摇一摇功能

    这篇文章主要为大家详细介绍了Android利用传感器仿微信摇一摇功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Android设置重复文字水印背景的方法

    Android设置重复文字水印背景的方法

    这篇文章主要为大家详细介绍了Android设置重复文字水印背景的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • Android编程获取设备MAC地址的实现方法

    Android编程获取设备MAC地址的实现方法

    这篇文章主要介绍了Android编程获取设备MAC地址的实现方法,涉及Android针对硬件设备的操作技巧,需要的朋友可以参考下
    2017-01-01
  • 利用Android 防止系统字体变化、显示大小变化影响

    利用Android 防止系统字体变化、显示大小变化影响

    这篇文章主要介绍了利用Android 防止系统字体变化、显示大小变化影响方法的相关资料,需要的朋友可以参考下面文章的具体内容，希望对你有所帮助
    2021-10-10
  • Android开发Kotlin DSL使用技巧掌握

    Android开发Kotlin DSL使用技巧掌握

    这篇文章主要为大家介绍了Android开发Kotlin DSL使用技巧的掌握，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • Android 资源混淆的方案及注意事项

    Android 资源混淆的方案及注意事项

    资源混淆有助于减小包体积，也可以提高被反编译后阅读代码的难度。还可以应对一些安全检测机构对于资源混淆要求。本文基于微信的Android资源混淆工具，实现资源混淆
    2021-05-05
  • Android自定义View实现APP启动页倒计时效果

    Android自定义View实现APP启动页倒计时效果

    这篇文章主要为大家详细介绍了Android自定义View实现APP启动页倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Android实现Service获取当前位置(GPS+基站)的方法

    Android实现Service获取当前位置(GPS+基站)的方法

    这篇文章主要介绍了Android实现Service获取当前位置(GPS+基站)的方法,较为详细的分析了Service基于GPS位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • Android 访问文件权限的四种模式介绍

    Android 访问文件权限的四种模式介绍

    这篇文章主要介绍了Android 访问文件权限的四种模式介绍的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • android中RecyclerView自定义分割线实现

    android中RecyclerView自定义分割线实现

    本篇文章主要介绍了android中RecyclerView自定义分割线实现，由于RecyclerView的布局方式多种多样，所以它的分割线也根据布局的不同有所差异，本文只针对LinearLayoutManager线性布局。
    2017-03-03

最新评论