简介

一个可以使内容滚动的Widget

可滚动的 widget 包含三部分

• 一个Scrollable的widget，可以用来监听用户的一些手势事件
• 例如Viewport和ShrinkWrappingViewport的视图widget，可以通过在滚动视图中仅展示部分widget来进行可视化设计
• 一个或者多个组件，可以通过组合来实现各种滚动效果。例如列表、网格等

基本用法

ScrollView 属于抽象类，不能直接实例化.

例如ListView widget是通过继承 BoxScrollView 然后BoxScrollView通过继承ScrollView来实现继承

• ListView ：...

阅读全文...

简介

属于 Material 风格下的一个widget

• 如果同时给Tab传入icon和text，text将会被展现在icon的下面

基本用法

通常需要配合TabBar TabBarView使用

• TabBar中的children和TabBarView中的数组成一一对应关系
• TabController 可以协调TabBarView和Tab之间的选择和个数等

实例演示

import 'package:flutter/material.dart';

class TabDemo extends StatelessWidget {
  @override
  Widget ...

阅读全文...

简介

确定滚动组件的物理属性

• 例如，确定当用户达到最大滚动范围或者停止滚动时，Scrollable的一些滚动行为
• 当启动物理 https://docs.flutter.io/flutter/physics/Simulation-class.html 时，当前滚动位置和速度将作为初始条件。
• 使用simulation中的模拟移动来确定widget的滚动位置

基本用法

该widget不能赋值给参数类型为Widget的组件

• 下方Demo，我们设置PageView的physics属性，滑动感受下下方小字自定义的滚动

实例演示

import 'package:flutter/mate...

阅读全文...

简介

用于绘制滚动条的CustomPainter。

• 与CustomPainter子类化的CustomPainters不同，只有当shouldRepaint返回true时才重绘
• 当滚动条消失和滚动位置发生变化的时候painter需要重绘而不是重新构建

基本使用

当ScrollbarPainter不再使用的时候，必须在ScrollbarPainter上调用dispose

• 除非自定制Scrollbar的需求，基本上我们都可以使用Scrollbar
• Scrollbar的源码其实就是基于ScrollbarPainter封装的
• demo中将Scrollbar源码进行提取使用
• Cupertino...

阅读全文...

简介

包含当前ViewPort及滚动位置等信息

• pixels：当前滚动位置
• maxScrollExtent：最大可滚动长度。
• extentBefore：滑出ViewPort顶部的长度；
• extentInside：ViewPort内部长度；此示例中屏幕显示的列表部分的长度
• extentAfter：列表中未滑入ViewPort部分的长度；此示例中列表底部未显示到屏幕范围部分的长度
• atEdge：是否滑到了Scrollable Widget的边界

基本用法

抽象类，不可被实例化

• FixedScrollMetrics，它是实现此接口的不可变对象
• 下方Demo中，在接收到滚动事件时，参数类型...

阅读全文...

简介

一个可以嵌在另一个滚动视图中的Scroll view，本质上，他们的滚动是连接着的

• 最常见的用例就是一个可滚动的视图，包含一个 flexible SliverAppBar，并且包含TabBar和TabBarView
• 在普通的ScrollView中包含一系列 slivers ，会出现滚动冲突的问题
• NestedScrollView 通过为外部ScrollView和内部的ScrollViews提供自定义的ScrollController来解决滚动冲突的问题，将他们“连接”起来，以便他们滚动时看起来更像是一个整体

基本用法

Demo演示NestedScrollView最常见的使用实例...

阅读全文...

简介

一个可以使内容滚动的Widget

• 实现了可滚动widget的交互模型，但不包含UI显示相关的逻辑
• 很难直接构造Scrollable。当然，我们可以考虑使用ListView或者GridView，他们结合了滚动、视口以及布局模型。如果需要自定义布局模型，可以考虑使用 CustomScrollView 。

基本用法

• 静态方法 Scrollable.of 和 Scrollable.ensureVisible 通常用于ListView或者GridView中的Scrollable小部件进行交互
• 你可以提供自定义的ScrollController，以创建自定义ScrollPosition子...

阅读全文...

简介

使用单个子布局模型的ScrollView

• ListView：一个使用的线性布局的BoxScrollView
• GridView：一个使用二维布局模型的BoxScrollView
• CustomScrollView：可以将多个子布局模型组合到一个滚动视图中

基本用法

由于是抽象类，所以不能直接实例化

• 如上简介，我们可以写一个类继承BoxScrollView
• Demo中，演示ListView的部分源码，用以实现继承BoxScrollView的代码编写，效果和ListView并无两样

实例演示

import 'package:flutter/material.dart'...

阅读全文...

简介

使用Slivers创建自定义滚动效果的ScrollView

• CustomScrollView 主要是配合Slivers大家族使用，创建自定义的滚动效果
• 如果需要创建可展开的AppBar，后跟list和grid，可使用这三种Slivers：SliverAppBar、SliverList和SliverGrid
• 这些Slivers必须生成RenderSliver对象

基本用法

配合 Slivers使用

• slivers 属性中我们添加SliverAppBar
• SliverAppBar下方放置SliverFixedExtentList，注意此处并没有滚动冲突

实例演示

import ...

阅读全文...

简介

Scaffold的State对象

通常用来控制SnackBars和BottomSheets和Drawer的显示与隐藏.

基本用法

• 通过为Scaffold定义key属性, 声明_scaffoldState, 通过_scaffoldState直接调用scaffoldState方法
• 当组件无法直接为Scaffold定义key属性时, 可以通过 Context与Scaffold.of获取父级scaffoldState

实例演示

import 'package:flutter/material.dart';

class ScaffoldStateDemo extends...

阅读全文...