老孟导读:快乐的51假期结束了,切换为努力模式,今天给大家分享CustomScrollView组件,此组件在以后的项目中会经常用到,CustomScrollView就像一个粘合剂,将多个组件粘合在一起,具统一的滚动效果。

CustomScrollView

CustomScrollView是使用Sliver组件创建自定义滚动效果的滚动组件。使用场景:

  1. ListView和GridView相互嵌套场景,ListView嵌套GridView时,需要给GridView指定高度,但我们希望高度随内容而变化(不指定),ListView和GridView使用同一个滚动效果。
  2. 一个页面顶部是AppBar,然后是GridView,最后是ListView,这3个区域以整体来滚动,AppBar具有吸顶效果。

CustomScrollView就像一个粘合剂,将多个组件粘合在一起,具统一的滚动效果。

Sliver系列组件有很多,比如SliverList、SliverGrid、SliverFixedExtentList、SliverPadding、SliverAppBar等。

相互嵌套场景

在实际业务场景中经常见到这样的布局,顶部是网格布局(GridView),然后是列表布局(ListView),滚动的时候做为一个整体,此场景是无法使用GridView+ListView来实现的,而是需要使用CustomScrollView+SliverGrid+SliverList来实现,实现代码如下:

CustomScrollView(
slivers: <Widget>[
SliverGrid.count(crossAxisCount: 4,children: List.generate(8, (index){
return Container(
color: Colors.primaries[index%Colors.primaries.length],
alignment: Alignment.center,
child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
);
}).toList(),),
SliverList(
delegate: SliverChildBuilderDelegate((content, index) {
return Container(
height: 85,
alignment: Alignment.center,
color: Colors.primaries[index % Colors.primaries.length],
child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
);
}, childCount: 25),
)
],
)

效果如下:

顶部是AppBar场景

实际项目中页面顶部是AppBar,然后是GridView,最后是ListView,这3个区域以整体来滚动,AppBar具有吸顶效果,此效果也是我们经常遇到的,用法如下:

CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
expandedHeight: 230.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('复仇者联盟'),
background: Image.network(
'http://img.haote.com/upload/20180918/2018091815372344164.jpg',
fit: BoxFit.fitHeight,
),
),
),
SliverGrid.count(crossAxisCount: 4,children: List.generate(8, (index){
return Container(
color: Colors.primaries[index%Colors.primaries.length],
alignment: Alignment.center,
child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
);
}).toList(),),
SliverList(
delegate: SliverChildBuilderDelegate((content, index) {
return Container(
height: 85,
alignment: Alignment.center,
color: Colors.primaries[index % Colors.primaries.length],
child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
);
}, childCount: 25),
)
],
)

效果如下:

通过scrollDirectionreverse参数控制其滚动方向,用法如下:

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

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

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

primary设置为true时,不能设置controller,因为primarytrue时,controller使用PrimaryScrollController,这种机制带来的好处是父组件可以控制子树中可滚动组件的滚动行为,例如,Scaffold正是使用这种机制在iOS中实现了点击导航栏回到顶部的功能。

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

_scrollController = ScrollController();

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

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

交流

老孟Flutter博客地址(近200个控件用法):http://laomengit.com

欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:

Flutter 粘合剂CustomScrollView控件的更多相关文章

  1. Flutter 的基本控件

    文本控件 Text 支持两种类型的文本展示,一个是默认的展示单一样式文本 Text,另一个是支持多种混合样式的富文本 Text.rich. 单一样式文本 Text 单一样式文本 Text 的初始化,是 ...

  2. Flutter 拖拽控件Draggable

    Flutter提供了强大的拖拽控件,可以灵活定制,并且非常简单.下面作一个拖拽的案例. Draggable Widget Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就 ...

  3. Flutter 拖拽控件Draggable看这一篇就够了

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Draggable系列组件可以让我们拖动组件. Dragg ...

  4. Flutter 标签类控件大全Chip

    老孟导读:Flutter内置了多个标签类控件,但本质上它们都是同一个控件,只不过是属性参数不同而已,在学习的过程中可以将其放在放在一起学习,方便记忆. RawChip Material风格标签控件,此 ...

  5. Flutter 布局控件完结篇

    本文对Flutter的29种布局控件进行了总结分类,讲解一些布局上的优化策略,以及面对具体的布局时,如何去选择控件. 1. 系列文章 Flutter 布局详解 Flutter 布局(一)- Conta ...

  6. Flutter学习指南:UI布局和控件

    Flutter学习指南:UI布局和控件 - IT程序猿  https://www.itcodemonkey.com/article/11041.html

  7. flutter控件之ListView滚动布局

    ListView即滚动列表控件,能将子控件组成可滚动的列表.当你需要排列的子控件超出容器大小,就需要用到滚动块. import 'package:flutter/material.dart'; cla ...

  8. Flutter 控件之 AppBar 和 SliverAppBar

    AppBar 和 SliverAppBar 是纸墨设计中的 App Bar,也就是 Android 中的 Toolbar,关于 Toolbar 的设计指南请参考纸墨设计中 Toolbar 的内容. A ...

  9. flutter Draggable Widget拖拽控件

    Draggable Widget Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就是可以拖动的,子元素可以实容器,可以是图片.用起来非常的灵活. 参数说明: data: ...

随机推荐

  1. 四、华为VRP平台介绍和常用配置

    一.华为VRP平台 华为现用的平台是VRP(Versatile Routing Platform)是华为公司数据通信产品的通用操作系统平台. 包含华为产品中的路由.交换.安全.无线等等 二.华为设备管 ...

  2. 小程序后台隐藏后 socket 无法重新连接

    小程序后台隐藏后 socket 无法重新连接 连接时 fail 回调函数的事件参数:connectSocket:fail:jsapi has no permission,event=createSoc ...

  3. https的秘钥公钥以及之间的会话流程

      一 共享秘钥 1.1 概念 共享秘钥和我们生活中同一把锁的钥匙概念类似,对同一把锁来说,加锁时使用什么钥匙,解锁也必须使用同样的钥匙. 1.2 共享秘钥在HTTP传输中的缺点 以共享密钥方式加密时 ...

  4. js使用经验--遍历

    目的 在平常的前端开发中,一般需要处理数据(数组和对象居多),特别是复杂功能的页面,通常是一到两个对象数组(有时数组里面还有数组).大多数前端开发的难点就是这里,耗时大.以前我在工作中,遇到的支付方式 ...

  5. 数据结构(C语言版)---线性表链式存储表示

    1.单链表:线性表的链式存储. 1)特点:用一组任意的存储单元存储数据元素(存储单元可以连续,也可以不连续),逻辑上相邻的元素存储位置不一定相邻. 2)结点包括两个域:数据域(存储数据元素信息).指针 ...

  6. L3 多层感知机

    **本小节用到的数据下载 1.涉及语句 import d2lzh1981 as d2l 数据1 : d2lzh1981 链接:https://pan.baidu.com/s/1LyaZ84Q4M75G ...

  7. MySQL主从复制,主主复制,半同步复制

    实验环境: 系统:CentOS Linux release 7.4.1708 (Core) mariadb:mariadb-server-5.5.56-2.el7.x86_64 node1:172.1 ...

  8. SpringCloud-Config 配置中心

    概述 分布式系统面临的问题 微服务意味着要将单体应用中的业务拆分成一个个的子服务,这些服务都需要必要的配置信息才能运行,如果有上百个微服务,上百个配置文件,管理起来是非常困难的,这时候,一套集中式的. ...

  9. jquery动态live绑定toggle事件

    $(".btn").live("click",function(){ $(this).toggle( function () { //事件 1 console. ...

  10. javascript-网页尺寸

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...