前言

当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter则会提示Overflow错误。为此,Flutter提供了多种可滚动组件(Scrollable Widget)用于显示列表和长布局。

可滚动组件都直接或间接包含一个Scrollable组件,它们包括一些共同的属性,接口如下:

Scrollable({
...
// 滚动方向
this.axisDirection = AxisDirection.down,
// 此属性接受一个ScrollController对象。ScrollController的主要作用是控制滚动位置和监听滚动事件。
// 默认情况下,Widget树中会有一个默认的PrimaryScrollController,如果子树中的可滚动组件没有显式的指定controller,并且primary属性值为true时(默认就为true),
// 可滚动组件会使用这个默认的PrimaryScrollController。这种机制带来的好处是父组件可以控制子树中可滚动组件的滚动行为,
// 例如,Scaffold正是使用这种机制在iOS中实现了点击导航栏回到顶部的功能。
this.controller,
// 此属性接受一个ScrollPhysics类型的对象,它决定可滚动组件如何响应用户操作,比如用户滑动完抬起手指后,继续执行动画;或者滑动到边界时,如何显示。
// 默认情况下,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,应用不同的显示效果,如当滑动到边界时,继续拖动的话,在iOS上会出现弹性效果,而在Android上会出现微光效果。
// 如果想在所有平台下使用同一种效果,可以显式指定一个固定的ScrollPhysics,Flutter SDK中包含了两个ScrollPhysics的子类。
this.physics,
@required this.viewportBuilder, //后面介绍
})

Scrollbar

Scrollbar是一个Material风格的滚动指示器(滚动条),如果要给可滚动组件添加滚动条,只需将Scrollbar作为可滚动组件的任意一个父级组件即可。例如:

Scrollbar(
child: SingleChildScrollView(
...
),
);

Scrollbar和CupertinoScrollbar都是通过监听滚动通知来确定滚动条位置的。

ViewPort视口

在很多布局系统中都有ViewPort的概念,在Flutter中,术语ViewPort(视口),如无特别说明,则是指一个Widget的实际显示区域。例如,一个ListView的显示区域高度是800像素,虽然其列表项总高度可能远远超过800像素,但是其ViewPort仍然是800像素。

基于Sliver的延迟构建

通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大;如果要一次性将子组件全部构建出将会非常昂贵!为此,Flutter中提出一个Sliver(中文为“薄片”的意思)概念,如果一个可滚动组件支持Sliver模型,那么该滚动可以将子组件分成好多个“薄片”(Sliver),只有当Sliver出现在视口中时才会去构建它,这种模型也称为“基于Sliver的延迟构建模型”。可滚动组件中有很多都支持基于Sliver的延迟构建模型,如ListView、GridView,但是也有不支持该模型的,如SingleChildScrollView。

主轴和纵轴

在可滚动组件的坐标描述中,通常将滚动方向称为主轴,非滚动方向称为纵轴。由于可滚动组件的默认方向一般都是沿垂直方向,所以默认情况下主轴就是指垂直方向,水平方向同理。

【Flutter】可滚动组件简介的更多相关文章

  1. 【Flutter学习】可滚动组件之ScrollView

    一,概述 ScrollView 是一个带有滚动的视图组件. 二,组成部分 ScrollView 由三部分组成: Scrollable - 它监听各种用户手势并实现滚动的交互设计.可滚动Widget都直 ...

  2. 【Flutter】可滚动组件之滚动控制和监听

    前言 可以用ScrollController来控制可滚动组件的滚动位置. 接口描述 ScrollController({ // 初始滚动位置 double initialScrollOffset = ...

  3. 【Flutter】可滚动组件之CustomScrollView

    前言 CustomScrollView是可以使用Sliver来自定义滚动模型(效果)的组件.它可以包含多种滚动模型,举个例子,假设有一个页面,顶部需要一个GridView,底部需要一个ListView ...

  4. 【Flutter】可滚动组件之ListView

    前言 它可以沿一个方向线性排布所有子组件,并且它也可以支持基于Sliver的延迟构建模型. 接口描述 ListView({ Key key, // 可滚动widget公共参数 Axis scrollD ...

  5. 【Flutter】可滚动组件之SingleChildScrollView

    前言 SingleChildScrollView类似于Android中的ScrollView,它只能接收一个子组件. 接口描述 const SingleChildScrollView({ Key ke ...

  6. Netty 源码(一)Netty 组件简介

    Netty 源码(一)Netty 组件简介 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) 一.Netty 架构 Core: ...

  7. amazeui学习笔记二(进阶开发2)--Web组件简介Web Component

    amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...

  8. Flutter 父子组件传值

    Flutter 父子组件传值 一父传子: 父中: void onButtonChange(val1,val2,val3){ print('============================子向父 ...

  9. flutter Container组件和Text组件

    在开始之前,我们先写一个最简单的入口文件:     后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...

随机推荐

  1. unity入门—五分钟制作一个理论上的游戏

    unity入门 前言:这可不是标题党,虽然都是基础的操作,不过含括了基本的流程,比起脑海中的五花八门的画面,入门还是这个现实一点. 这里插两句,unity国外官网下载会推荐你看一个简短的视频,国内官网 ...

  2. C# 继承类的值赋

    C# 继承类的值赋 /// <summary> /// 将父类的值赋值到子类中 /// </summary> /// <typeparam name="TPar ...

  3. Win10新增API

    Win10新增API为以下一些方面: Windows.AI Windows.ApplicationModel Windows.Devices Windows.Globalization Windows ...

  4. ARC109F - 1D Kingdom Builder

    一行格子,其中小于\(0\)的格子为白色,大于\(n\)的格子为黑色,中间的格子颜色由题目给出. 有一些格子需要被标记.标记按照以下规则进行:选择一个颜色\(c\),找到一个未标记的 旁边有标记点的 ...

  5. 汉化gitlab

    一.,基于 Larry Li 版汉化指南 修改 (以9-0-stable-zh分支为例) 源码安装汉化 推荐按照 gitlab-ce 源代码中 doc/install/installation.md ...

  6. 【Pyhton 】 装饰器

    # -*- coding:utf8 -*-# Author : Mr·Yang''' 装饰器,带参数装饰器,装饰器中带参数''' import time# 普通装饰器'''def time_decor ...

  7. Java 8 新特性:日期处理

    1.  Java 8 日期处理新特性 Java 8基于ISO标准日期系统,提供了java.time包来处理时间日期,且该包下的所有类都是不可变类型而且线程安全. 2.  关键类 Instant:瞬时实 ...

  8. BullseyeCoverage——C/C++代码覆盖率分析工具

    安装 官网下载地址: https://www.bullseye.com/cgi-bin/download 安装过程中需要License, 可以申请评估版本的key或者直接从官网渠道购买. Ubuntu ...

  9. Centos上配置nginx+uwsgi+负载均衡配置

    负载均衡在服务端开发中算是一个比较重要的特性.因为Nginx除了作为常规的Web服务器外,还会被大规模的用于反向代理后端,Nginx的异步框架可以处理很大的并发请求,把这些并发请求hold住之后就可以 ...

  10. Dovecot邮件服务器的正确安装方法

    Dovecot邮件服务器的正确安装方法 apt remove dovecot-coredpkg -P dovecot-core sudo apt install dovecot-imapd dovec ...