flutter CustomScrollView多个滑动组件嵌套
CustomScrollView是使用Sliver组件创建自定义滚动效果的滚动组件。使用场景:
- ListView和GridView相互嵌套场景,ListView嵌套GridView时,需要给GridView指定高度,但我们希望高度随内容而变化(不指定),ListView和GridView使用同一个滚动效果。
- 一个页面顶部是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),
)
],
)
效果如下:
通过scrollDirection
和reverse
参数控制其滚动方向,用法如下:
CustomScrollView(
scrollDirection: Axis.horizontal,
reverse: true,
...
)
scrollDirection
滚动方向,分为垂直和水平方向。
reverse
参数表示反转滚动方向,并不是垂直转为水平,而是垂直方向滚动时,默认向下滚动,reverse
设置false,滚动方向改为向上,同理水平滚动改为水平向左。
primary
设置为true时,不能设置controller
,因为primary
true时,controller
使用PrimaryScrollController,这种机制带来的好处是父组件可以控制子树中可滚动组件的滚动行为,例如,Scaffold正是使用这种机制在iOS中实现了点击导航栏回到顶部的功能。
controller
为滚动控制器,可以监听滚到的位置,设置滚动的位置等,用法如下:
_scrollController = ScrollController(); //监听滚动位置
_scrollController.addListener((){
print('${_scrollController.position}');
});
//滚动到指定位置
_scrollController.animateTo(20.0); CustomScrollView(
controller: _scrollController,
...
)
physics
表示可滚动组件的物理滚动特性,具体查看ScrollPhysics
flutter CustomScrollView多个滑动组件嵌套的更多相关文章
- 组件嵌套+Mixin函数demo
非DOM属性:1.dangerouslysetInnerHTML(xxs跨站攻击) 2.key 3.ref 编写组件嵌套 <!DOCTYPE html><html> < ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- 一个H5的3D滑动组件实现(兼容2D模式)
起由 原始需求来源于一个项目的某个功能,要求实现3D图片轮播效果,而已有的组件大多是普通的2D图片轮播,于是重新造了一个轮子,实现了一个既支持2D,又支持3D的滑动.轮播组件. 实现思路 刚一开始肯定 ...
- iSlider手机平台JS滑动组件
iSlider手机平台JS滑动组件,无任何插件依赖.它能够处理任何元素,例如图片或者DOM元素.它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你 ...
- React入门---组件嵌套-5
组件嵌套 我们现在需要组件嵌套,所以要创建其他组件,目前有一个头部组件,在./components/header.js; 接下来在components文件中创建:底部组件footer.js 和主体组件 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- 组件嵌套时报:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
在组件嵌套的过程中,报了一个错误: 这里报错的原因是:vue的组件(模板)只能有一个根节点,即.vue文件中的<template>标签下只能有一个子元素. 因此,建议大家在写.vue组件的 ...
- vue-父子组件嵌套的示例
组件注册: // 注册组件 Vue.component('my-component', { template: '<div>A custom component!</div>' ...
- 5. React 组件的协同使用 组件嵌套和Mixin
组件是React的核心,构建大型项目时多个组件之间需要进行协同使用.可以从横向和纵向两个角度来实现组件的协同使用,纵向的协同使用就是组件嵌套,横向的协同使用就是Mixin(抽取公共方法 ...
- vue基础——组件(组件嵌套)
介绍 vue中页面是由组件组成的,即以.vue结尾的文件. .vue文件由三部分组成,分别是template.script.style. 分别写html.js.css代码. 组件之间可以互相嵌套.所以 ...
随机推荐
- UBUNTU18.04安装CUDA
1.官方教程https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html#ubuntu-installation 2.在h ...
- Vue3 中的组件 provide和inject 传值、获取组件实例的方法getCurrentInstance()
一. provide和inject(依赖注入) 1:在父级组件中提供数据 语法:provide('提供给子组件的变量名',提供给子组件的数据) 2: 在子级组件中获取收据 ...
- Nginx基础02:配置文件nginx.conf(Part1)
我们使用Nginx主要是通过其配置文件nginx.conf来实现的.按照一定的规则,编写特定的指令,可以帮助我们实现对Web服务的控制!所以,学习Nginx的用法,几乎就是学习nginx.conf! ...
- Vulhub 漏洞学习之:Discuz
Vulhub 漏洞学习之:Discuz 目录 Vulhub 漏洞学习之:Discuz 1 Discuz 7.x/6.x 全局变量防御绕过导致代码执行 1.1 漏洞利用过程 2 Discuz!X ≤3. ...
- 自己从零写操作系统GrapeOS系列教程——4.GrapeOS开发环境介绍
1. 开发环境简介 为了减少开发过程中不必要的麻烦,希望大家的开发环境尽量与我的保持一致. 我的开发环境如下: Windows10电脑一台 Visual Studio Code(最好是最新版) Vir ...
- 3D数字孪生场景编辑器介绍
1.背景 数字孪生的建设流程涉及建模.美术.程序.仿真等多种人才的协同作业,人力要求高,实施成本高,建设周期长.如何让小型团队甚至一个人就可以完成数字孪生的开发,是数字孪生工具链要解决的重要问题.目前 ...
- Echarts —自定义label标签的样式(formatter,rich,添加图标等操作)
最近公司项目中在使用 Echarts 绘制图表时,由于默认的 label 标签不能满足设计稿需求,所以研究了对 label标签进行格式化的方案,了解到可以使用 formatter 内容格式器对标签内容 ...
- 剖析flutter_download_manager学习如何做下载管理,暂停和取消
前言 内容类应用中图片或文件下载,一般应用中应用更新和升级,这些都是经典的下载场景.下载是项目中基础且重要的模块. 从代码逻辑复用性和人力成本考虑,一直想实现一个纯Dart实现的下载库,作为技术储备. ...
- LeetCode-432 全O(1)的数据结构
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/all-oone-data-structure 题目描述 请你设计一个用于存储字符串计数的数据结构 ...
- axios 进行同步请求(async+await+promise)
axios 进行同步请求(async+await+promise) 遇到的问题介绍 将axios的异步请求改为同步请求想到了async 和await.Promise axios介绍 Axios 是一个 ...