使用 Flutter 的一套的视觉、结构、平台、和交互式的 widgets,快速创建漂亮的 APP。
目录:
1. 基础组件
在构建你的第一个 Flutter 应用程序之前,你绝对需要了解这些 widget。
Widget | 描述 | 文档 |
---|---|---|
Container | 一个拥有绘制、定位、调整大小的 widget | https://docs.flutter.io/flutter/widgets/Container-class.html |
Row | 在水平方向上排列子 widget 的列表 | https://docs.flutter.io/flutter/widgets/Row-class.html |
Column | 在垂直方向上排列子 widget 的列表 | https://docs.flutter.io/flutter/widgets/Column-class.html |
Image | 一个显示图片的 widget | https://docs.flutter.io/flutter/widgets/Image-class.html |
Text | 单一格式的文本 | https://docs.flutter.io/flutter/widgets/Text-class.html |
Icon | A Material Design icon | https://docs.flutter.io/flutter/widgets/Icon-class.html |
RaisedButton | Material Design 中的 button, 一个凸起的材质矩形按钮 | https://docs.flutter.io/flutter/material/RaisedButton-class.html |
Scaffold | Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet的 API | https://docs.flutter.io/flutter/material/Scaffold-class.html |
Appbar | 一个 Material Design 应用程序栏,由工具栏和其他可能的 widget(如 TabBar 和FlexibleSpaceBar)组成 | https://docs.flutter.io/flutter/material/AppBar-class.html |
FlutterLogo | Flutter logo, 以 widget 形式. 这个 widget 遵从IconTheme | https://docs.flutter.io/flutter/material/FlutterLogo-class.html |
Placeholder | 一个绘制了一个盒子的 widget,代表日后有widget 将会被添加到该盒子中 | https://docs.flutter.io/flutter/widgets/Placeholder-class.html |
2. Material Components
实现了Material Design 指南的视觉、效果、motion-rich 的 widget。
Widget | 描述 | 文档 |
---|---|---|
Scaffold | Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet的 API | https://docs.flutter.io/flutter/material/Scaffold-class.html |
Appbar | 一个 Material Design 应用程序栏,由工具栏和其他可能的 widget(如 TabBar 和 FlexibleSpaceBar)组成 | https://docs.flutter.io/flutter/material/AppBar-class.html |
BottomNavigationBar | 底部导航条,可以很容易地在 tap 之间切换和浏览顶级视图 | https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html |
TabBar | 一个显示水平选项卡的 Material Design widget | https://docs.flutter.io/flutter/material/TabBar-class.html |
MaterialApp | 一个方便的 widget,它封装了应用程序实现 Material Design 所需要的一些widget | https://docs.flutter.io/flutter/material/MaterialApp-class.html |
WidgetsApp | 一个方便的类,它封装了应用程序通常需要的一些 widget | https://docs.flutter.io/flutter/widgets/WidgetsApp-class.html |
Drawer | 从 Scaffold 边缘水平滑动以显示应用程序中导航链接的 Material Design 面板 | https://docs.flutter.io/flutter/material/Drawer-class.html |
Widget | 描述 | 文档 |
---|---|---|
RaisedButton | Material Design 中的 button, 一个凸起的材质矩形按钮 | https://docs.flutter.io/flutter/material/RaisedButton-class.html |
FloatingActionButton | 一个圆形图标按钮,它悬停在内容之上,以展示应用程序中的主要动作。FloatingActionButton 通常用于Scaffold.floatingActionButton 字段 | https://docs.flutter.io/flutter/material/FloatingActionButton-class.html |
FlatButton | 一个扁平的 Material 按钮 | https://docs.flutter.io/flutter/material/FlatButton-class.html |
IconButton | 一个 Material 图标按钮,点击时会有水波动画 | https://docs.flutter.io/flutter/material/IconButton-class.html |
PopupMenuButton | 当菜单隐藏式,点击或调用 onSelected时显示一个弹出式菜单列表 | https://docs.flutter.io/flutter/material/PopupMenuButton-class.html |
ButtonBar | 水平排列的按钮组 | https://docs.flutter.io/flutter/material/ButtonBar-class.html |
Widget | 描述 | 文档 |
---|---|---|
TextField | 文本输入框 | https://docs.flutter.io/flutter/material/TextField-class.html |
Checkbox | 复选框,允许用户从一组中选择多个选项 | https://docs.flutter.io/flutter/material/Checkbox-class.html |
Radio | 单选框,允许用户从一组中选择一个选项 | https://docs.flutter.io/flutter/material/Radio-class.html |
Switch | On/off 用于切换一个单一状态 | https://docs.flutter.io/flutter/material/Switch-class.html |
Slider | 滑块,允许用户通过滑动滑块来从一系列值中选择 | https://docs.flutter.io/flutter/material/Slider-class.html |
Date & Time Pickers | 日期&时间选择器 | https://docs.flutter.io/flutter/material/showDatePicker.html |
Widget | 描述 | 文档 |
---|---|---|
SimpleDialog | 简单对话框可以显示附加的提示或操作 | https://docs.flutter.io/flutter/material/SimpleDialog-class.html |
AlertDialog | 一个会中断用户操作的对话款,需要用户确认 | https://docs.flutter.io/flutter/material/AlertDialog-class.html |
BottomSheet | BottomSheet 是一个从屏幕底部滑起的列表(以显示更多的内容)。你可以调用showBottomSheet() 或 showModalBottomSheet() 弹出 | https://docs.flutter.io/flutter/material/BottomSheet-class.html |
ExpansionPanel | Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component | https://docs.flutter.io/flutter/material/ExpansionPanel-class.html |
SnackBar | 具有可选操作的轻量级消息提示,在屏幕的底部显示 | https://docs.flutter.io/flutter/material/SnackBar-class.html |
Widget | 描述 | 文档 |
---|---|---|
Image | 一个显示图片的widget | https://docs.flutter.io/flutter/widgets/Image-class.html |
Icon | A Material Design icon | https://docs.flutter.io/flutter/widgets/Icon-class.html |
Chip | 标签,一个 Material widget。 它可以将一个复杂内容实体展现在一个小块中,如联系人 | https://docs.flutter.io/flutter/material/Chip-class.html |
Tooltip | 一个文本提示工具,帮助解释一个按钮或其他用户界面,当 widget 长时间按下时(当用户采取其他适当操作时)显示一个提示标签 | https://docs.flutter.io/flutter/material/Tooltip-class.html |
DataTable | 数据表显示原始数据集。它们通常出现在桌面企业产品中。DataTable Widget 实现这个组件 | https://docs.flutter.io/flutter/material/DataTable-class.html |
Card | 一个 Material Design 卡片。拥有一个圆角和阴影 | https://docs.flutter.io/flutter/material/Card-class.html |
LinearProgressIndicator | 一个线性进度条,另外还有一个圆形进度条 CircularProgressIndicator | https://docs.flutter.io/flutter/material/LinearProgressIndicator-class.html |
Widget | 描述 | 文档 |
---|---|---|
ListTile | 一个固定高度的行,通常包含一些文本,以及一个行前或行尾图标 | https://docs.flutter.io/flutter/material/ListTile-class.html |
Stepper | 一个 Material Design 步骤指示器,显示一系列步骤的过程 | https://docs.flutter.io/flutter/material/Stepper-class.html |
Divider | 一个逻辑1像素厚的水平分割线,两边都有填充 | https://docs.flutter.io/flutter/material/Divider-class.html |
3. Cupertino (iOS 风格的 widget)
用于当前 iOS 设计语言的美丽和高保真 widget。
Widget | 描述 | 文档 |
---|---|---|
CupertinoActivityIndicator | 一个 iOS 风格的 loading 指示器。显示一个圆形的转圈菊花 | https://docs.flutter.io/flutter/cupertino/CupertinoActivityIndicator-class.html |
CupertinoAlertDialog | iOS 风格的 alert dialog | https://docs.flutter.io/flutter/cupertino/CupertinoAlertDialog-class.html |
CupertinoButton | iOS 风格的 button | https://docs.flutter.io/flutter/cupertino/CupertinoButton-class.html |
CupertinoDialog | iOS 风格的对话框 | https://docs.flutter.io/flutter/cupertino/CupertinoDialog-class.html |
CupertinoDialogAction | 通常用于 CupertinoAlertDialog的一个 button | https://docs.flutter.io/flutter/cupertino/CupertinoDialogAction-class.html |
CupertinoSlider | 从一个范围中选一个值 | https://docs.flutter.io/flutter/cupertino/CupertinoSlider-class.html |
CupertinoSwitch | iOS 风格的开关. 用于单一状态的开/关 | https://docs.flutter.io/flutter/cupertino/CupertinoSwitch-class.html |
CupertinoPageTransition | 提供 iOS 风格的页面过度动画 | https://docs.flutter.io/flutter/cupertino/CupertinoPageTransition-class.html |
CupertinoFullscreenDialogTransition | 一个 iOS 风格的过渡,用于调用全屏对话框 | https://docs.flutter.io/flutter/cupertino/CupertinoFullscreenDialogTransition-class.html |
CupertinoNavigationBar | iOS 风格的导航栏. 通常和CupertinoPageScaffold一起使用 | https://docs.flutter.io/flutter/cupertino/CupertinoNavigationBar-class.html |
CupertinoTabBar | iOS 风格的底部选项卡。 通常和CupertinoTabScaffold一起使用 | https://docs.flutter.io/flutter/cupertino/CupertinoTabBar-class.html |
CupertinoPageScaffold | 一个 iOS 风格的页面的基本布局结构。包含内容和导航栏 | https://docs.flutter.io/flutter/cupertino/CupertinoPageScaffold-class.html |
CupertinoTabScaffold | 标签式 iOS 应用程序的结构。将选项卡栏放在内容选项卡之上 | https://docs.flutter.io/flutter/cupertino/CupertinoTabScaffold-class.html |
CupertinoTabView | 支持选项卡间并行导航项卡的根内容。通常与CupertinoTabScaffolde一起使用 | https://docs.flutter.io/flutter/cupertino/CupertinoTabView-class.html |
4. Layout
排列其它 widget 的 columns、rows、grids 和其它的 layouts。
Widget | 描述 | 文档 |
---|---|---|
Container | 一个拥有绘制、定位、调整大小的 widget | https://docs.flutter.io/flutter/widgets/Container-class.html |
Padding | 一个 widget, 会给其子 widget 添加指定的填充 | https://docs.flutter.io/flutter/widgets/Padding-class.html |
Center | 将其子 widget 居中显示在自身内部的 widget | https://docs.flutter.io/flutter/widgets/Center-class.html |
Align | 一个 widget,它可以将其子 widget 对齐,并可以根据子 widget 的大小自动调整大小 | https://docs.flutter.io/flutter/widgets/Align-class.html |
FittedBox | 按自己的大小调整其子 widget 的大小和位置 | https://docs.flutter.io/flutter/widgets/FittedBox-class.html |
AspectRatio | 一个 widget,试图将子 widget 的大小指定为某个特定的长宽比 | https://docs.flutter.io/flutter/widgets/AspectRatio-class.html |
ConstrainedBox | 对其子项施加附加约束的 widget | https://docs.flutter.io/flutter/widgets/ConstrainedBox-class.html |
Baseline | 根据子项的基线对它们的位置进行定位的widget | https://docs.flutter.io/flutter/widgets/Baseline-class.html |
FractionallySizedBox | 一个 widget,它把它的子项放在可用空间的一小部分。关于布局算法的更多细节,见RenderFractionallySizedOverflowBox | https://docs.flutter.io/flutter/widgets/FractionallySizedBox-class.html |
IntrinsicHeight | 一个 widget,它将它的子 widget 的高度调整其本身实际的高度 | https://docs.flutter.io/flutter/widgets/IntrinsicHeight-class.html |
IntrinsicWidth | 一个 widget,它将它的子 widget 的宽度调整其本身实际的宽度 | https://docs.flutter.io/flutter/widgets/IntrinsicWidth-class.html |
LimitedBox | 一个当其自身不受约束时才限制其大小的盒子 | https://docs.flutter.io/flutter/widgets/LimitedBox-class.html |
Offstage | 一个布局 widget,可以控制其子 widget的显示和隐藏 | https://docs.flutter.io/flutter/widgets/Offstage-class.html |
OverflowBox | 对其子项施加不同约束的 widget,它可能允许子项溢出父级 | https://docs.flutter.io/flutter/widgets/OverflowBox-class.html |
SizedBox | 一个特定大小的盒子。这个 widget 强制它的孩子有一个特定的宽度和高度。如果宽度或高度为 NULL,则此 widget 将调整自身大小以匹配该维度中的孩子的大小 | https://docs.flutter.io/flutter/widgets/SizedBox-class.html |
SizedOverflowBox | 一个特定大小的 widget,但是会将它的原始约束传递给它的孩子,它可能会溢出 | https://docs.flutter.io/flutter/widgets/SizedOverflowBox-class.html |
Transform | 在绘制子 widget 之前应用转换的 widget | https://docs.flutter.io/flutter/widgets/Transform-class.html |
CustomSingleChildLayout | 一个自定义的拥有单个子 widget 的布局 widget | https://docs.flutter.io/flutter/widgets/CustomSingleChildLayout-class.html |
Widget | 描述 | 文档 |
---|---|---|
Row | 在水平方向上排列子 widget 的列表 | https://docs.flutter.io/flutter/widgets/Row-class.html |
Column | 在垂直方向上排列子 widget 的列表 | https://docs.flutter.io/flutter/widgets/Column-class.html |
Stack | 可以允许其子 widget 简单的堆叠在一起 | https://docs.flutter.io/flutter/widgets/Stack-class.html |
IndexedStack | 从一个子 widget 列表中显示单个孩子的 Stack | https://docs.flutter.io/flutter/widgets/IndexedStack-class.html |
Flow | 一个实现流式布局算法的 widget |
https://docs.flutter.io/flutter/widgets/Flow-class.html |
Table | 为其子 widget 使用表格布局算法的widget | https://docs.flutter.io/flutter/widgets/Table-class.html |
Wrap | 可以在水平或垂直方向多行显示其子widget | https://docs.flutter.io/flutter/widgets/Wrap-class.html |
ListBody | 一个 widget,它沿着一个给定的轴,顺序排列它的子元素 | https://docs.flutter.io/flutter/widgets/ListBody-class.html |
ListView | 可滚动的列表控件。ListView 是最常用的滚动 widget,它在滚动方向上一个接一个地显示它的孩子。在纵轴上,孩子们被要求填充ListView | https://docs.flutter.io/flutter/widgets/ListView-class.html |
CustomMultiChildLayout | 使用一个委托来对多个孩子进行设置大小和定位的小部件 | https://docs.flutter.io/flutter/widgets/CustomMultiChildLayout-class.html |
Widget | 描述 | 文档 |
---|---|---|
LayoutBuilder | 构建一个可以依赖父窗口大小的 widget 树 | https://docs.flutter.io/flutter/widgets/LayoutBuilder-class.html |
5. Text
文本显示和样式。
Widget | 描述 | 文档 |
---|---|---|
Text | 单一格式的文本 | https://docs.flutter.io/flutter/widgets/Text-class.html |
RichText | 一个富文本 Text,可以显示多种样式的 text | https://docs.flutter.io/flutter/widgets/RichText-class.html |
DefaultTextStyle | 文字样式,用于指定 Text widget 的文字样式 | https://docs.flutter.io/flutter/widgets/DefaultTextStyle-class.html |
6. Assets、图片、Icons
管理 assets, 显示图片和 Icon。
Widget | 描述 | 文档 |
---|---|---|
Image | 一个显示图片的 widget | https://docs.flutter.io/flutter/widgets/Image-class.html |
Icon | A Material Design icon | https://docs.flutter.io/flutter/widgets/Icon-class.html |
RawImage | 一个直接显示 dart:ui.Image 的 widget |
https://docs.flutter.io/flutter/widgets/RawImage-class.html |
AssetBundle | 包含应用程序可以使用的资源,如图像和字符串。对这些资源的访问是异步,所以他们可以来自网络(例如,从 NetworkAssetBundle)或从本地文件系统,这并不会挂起用户界面 | https://docs.flutter.io/flutter/services/AssetBundle-class.html |
7. 动画和 Motion
在你的应用中使用动画。
Widget | 描述 | 文档 |
---|---|---|
AnimatedContainer | 在一段时间内逐渐改变其值的容器 | https://docs.flutter.io/flutter/widgets/AnimatedContainer-class.html |
AnimatedCrossFade | 一个 widget,在两个孩子之间交叉淡入,并同时调整他们的尺寸 | https://docs.flutter.io/flutter/widgets/AnimatedCrossFade-class.html |
Hero | 将其子项标记为 hero 动画候选的widget | https://docs.flutter.io/flutter/widgets/Stack-class.html |
AnimatedBuilder | 用于构建动画的通用小部件。AnimatedBuilder 在有多个 widget 希望有一个动画作为一个较大的建造函数部分时会非常有用 | https://docs.flutter.io/flutter/widgets/AnimatedBuilder-class.html |
DecoratedBoxTransition | DecoratedBox 的动画版本,可以给它的 Decoration 不同属性使用动画 | https://docs.flutter.io/flutter/widgets/DecoratedBoxTransition-class.html |
FadeTransition | 对透明度使用动画的 widget | https://docs.flutter.io/flutter/widgets/FadeTransition-class.html |
PositionedTransition | Positioned 的动画版本,它需要一个特定的动画来将孩子的位置从动画的生命周期的起始位置移到结束位置 | https://docs.flutter.io/flutter/widgets/PositionedTransition-class.html |
RotationTransition | 对 widget 使用旋转动画 | https://docs.flutter.io/flutter/widgets/RotationTransition-class.html |
ScaleTransition | 对 widget 使用缩放动画 | https://docs.flutter.io/flutter/widgets/ScaleTransition-class.html |
SizeTransition | Animates its own size and clips and aligns the child | https://docs.flutter.io/flutter/widgets/SizeTransition-class.html |
SlideTransition | 对相对于其正常位置的某个位置之间使用动画 | https://docs.flutter.io/flutter/widgets/SlideTransition-class.html |
AnimatedDefaultTextStyle | 在文本样式切换时使用动画 | https://docs.flutter.io/flutter/widgets/AnimatedDefaultTextStyle-class.html |
AnimatedListState | 动画列表的 state | https://docs.flutter.io/flutter/widgets/AnimatedListState-class.html |
AnimatedModalBarrier | 一个阻止用户与 widget 交互的widget | https://docs.flutter.io/flutter/widgets/AnimatedModalBarrier-class.html |
AnimatedOpacity | Opacity 的动画版本,在给定的透明度变化时,自动地在给定的一段时间内改变孩子的 Opacity | https://docs.flutter.io/flutter/widgets/AnimatedOpacity-class.html |
AnimatedPhysicalModel | PhysicalModel 的动画版本 | https://docs.flutter.io/flutter/widgets/AnimatedPhysicalModel-class.html |
AnimatedPositioned | 动画版本的 Positioned,每当给定位置的变化,自动在给定的时间内转换孩子的位置 | https://docs.flutter.io/flutter/widgets/AnimatedPositioned-class.html |
AnimatedSize | 动画 widget,当给定的孩子的大小变化时,它自动地在给定时间内转换它的大小 | https://docs.flutter.io/flutter/widgets/AnimatedSize-class.html |
AnimatedWidget | 当给定的 Listenable 改变值时,会重新构建该 widget | https://docs.flutter.io/flutter/widgets/AnimatedWidget-class.html |
AnimatedWidgetBaseState | 具有隐式动画的 widget 的基类 | https://docs.flutter.io/flutter/widgets/AnimatedWidgetBaseState-class.html |
8. 交互模型
响应触摸事件并将用户路由到不同的页面视图(View)。
Widget | 描述 | 文档 |
---|---|---|
LongPressDraggable | 可以使其子 widget 在长按时可拖动 | https://docs.flutter.io/flutter/widgets/LongPressDraggable-class.html |
GestureDetector | 一个检测手势的 widget | https://docs.flutter.io/flutter/widgets/GestureDetector-class.html |
DragTarget | 一个拖动的目标 widget,在完成拖动时它可以接收数据 | https://docs.flutter.io/flutter/widgets/DragTarget-class.html |
Dismissible | 可以在拖动时隐藏的 widget | https://docs.flutter.io/flutter/widgets/Dismissible-class.html |
IgnorePointer | 在 hit test 中不可见的 widget。当ignoring为true时,此widget及其子树不响应事件。但它在布局过程中仍然消耗空间,并像往常一样绘制它的孩子 | https://docs.flutter.io/flutter/widgets/IgnorePointer-class.html |
AbsorbPointer | 在 hit test 期间吸收(拦截)事件。当absorbing 为 true 时,此小部件阻止其子树通过终止命中测试来接收指针事件。它在布局过程中仍然消耗空间 | https://docs.flutter.io/flutter/widgets/AbsorbPointer-class.html |
Navigator | 导航器,可以在多个页面(路由)栈之间跳转 | https://docs.flutter.io/flutter/widgets/Navigator-class.html |
Scrollable | 实现了可滚动 widget 的交互模型,但不包含 UI 显示相关的逻辑 | https://docs.flutter.io/flutter/widgets/Scrollable-class.html |
9. 样式
管理应用的主题,使应用能够响应式的适应屏幕尺寸或添加填充。
Widget | 描述 | 文档 |
---|---|---|
Padding | 一个 widget, 会给其子 widget 添加指定的填充 | https://docs.flutter.io/flutter/widgets/Padding-class.html |
Theme | 将主题应用于子 widget。主题描述了应用选择的颜色和字体 | https://docs.flutter.io/flutter/material/Theme-class.html |
MediaQuery | 建立一个子树,在树中媒体查询解析不同的给定数据 | https://docs.flutter.io/flutter/widgets/MediaQuery-class.html |
10. 绘制和效果
Widget 将视觉效果应用到其子组件,而不改变它们的布局、大小和位置。
Widget | 描述 | 文档 |
---|---|---|
Opacity | 使其子 widget 透明的 widget | https://docs.flutter.io/flutter/widgets/Opacity-class.html |
Transform | 在绘制子 widget 之前应用转换的 widget | https://docs.flutter.io/flutter/widgets/Transform-class.html |
DecoratedBox | 在孩子绘制之前或之后绘制装饰的 widget | https://docs.flutter.io/flutter/widgets/DecoratedBox-class.html |
FractionalTranslation | 绘制盒子之前给其添加一个偏移转换 | https://docs.flutter.io/flutter/widgets/FractionalTranslation-class.html |
RotatedBox | 可以延顺时针以90度的倍数旋转其子widget | https://docs.flutter.io/flutter/widgets/RotatedBox-class.html |
ClipOval | 用椭圆剪辑其孩子的 widget | https://docs.flutter.io/flutter/widgets/ClipOval-class.html |
ClipPath | 用 path 剪辑其孩子的 widget | https://docs.flutter.io/flutter/widgets/ClipPath-class.html |
ClipRect | 用矩形剪辑其孩子的 widget | https://docs.flutter.io/flutter/widgets/ClipRect-class.html |
CustomPaint | 提供一个画布的 widget,在绘制阶段可以在画布上绘制自定义图形 | https://docs.flutter.io/flutter/widgets/CustomPaint-class.html |
BackdropFilter | 一个 widget,它将过滤器应用到现有的绘图内容,然后绘制孩子。这种效果是比较昂贵的,尤其是如果过滤器是 non-local,如 blur | https://docs.flutter.io/flutter/widgets/BackdropFilter-class.html |
11. Async
Flutter 应用的异步模型。
Widget | 描述 | 文档 |
---|---|---|
FutureBuilder | 基于与 Future 交互的最新快照来构建自身的widget | https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html |
StreamBuilder | 基于与流交互的最新快照构建自身的 widget | https://docs.flutter.io/flutter/widgets/StreamBuilder-class.html |
12. 滚动
滚动一个拥有多个子组件的父组件。
Widget | 描述 | 文档 |
---|---|---|
ListView | 一个可滚动的列表 | https://docs.flutter.io/flutter/widgets/ListView-class.html |
NestedScrollView | 一个可以嵌套其它可滚动 widget 的widget | https://docs.flutter.io/flutter/widgets/NestedScrollView-class.html |
GridView | 一个可滚动的二维空间数组 | https://docs.flutter.io/flutter/widgets/GridView-class.html |
SingleChildScrollView | 有一个子 widget 的可滚动的 widget,子内容超过父容器时可以滚动 | https://docs.flutter.io/flutter/widgets/SingleChildScrollView-class.html |
Scrollable | 实现了可滚动 widget 的交互模型,但不包含 UI 显示相关的逻辑 | https://docs.flutter.io/flutter/widgets/Scrollable-class.html |
Scrollbar | 一个 Material Design 滚动条,表示当前滚动到了什么位置 | https://docs.flutter.io/flutter/material/Scrollbar-class.html |
CustomScrollView | 一个使用 slivers 创建自定义的滚动效果的 ScrollView | https://docs.flutter.io/flutter/widgets/CustomScrollView-class.html |
NotificationListener | 一个用来监听树上冒泡通知的 widget | https://docs.flutter.io/flutter/widgets/NotificationListener-class.html |
ScrollConfiguration | 控制可滚动组件在子树中的表现行为 | https://docs.flutter.io/flutter/widgets/ScrollConfiguration-class.html |
RefreshIndicator | Material Design 下拉刷新指示器,包装一个可滚动 widget | https://docs.flutter.io/flutter/material/RefreshIndicator-class.html |
13. 辅助功能
给你的 App 添加辅助功能(这是一个正在进行的工作)。
Widget | 描述 | 文档 |
---|---|---|
Semantics | 一个 widget,用以描述 widget 树的具体语义。使用辅助工具、搜索引擎和其他语义分析软件来确定应用程序的含义 | https://docs.flutter.io/flutter/widgets/Semantics-class.html |
MergeSemantics | 合并其后代语义的 widget | https://docs.flutter.io/flutter/widgets/MergeSemantics-class.html |
ExcludeSemantics | 删除其后代所有语义的 widget | https://docs.flutter.io/flutter/widgets/ExcludeSemantics-class.html |
14. 路由和导航
大多数应用程序具有多个页面或视图,并且希望将用户从页面平滑过渡到另一个页面。Flutter 的路由和导航功能可帮助你管理应用中屏幕之间的命名和过渡。
管理多个页面时有两个核心概念和类:Route 和 Navigator。 一个 route 是一个屏幕或页面的抽象,Navigator 是管理 route 的Widget。Navigator 可以通过 route 入栈和出栈来实现页面之间的跳转。
要开始使用,建议你阅读 Navigator的API文档。在那里,你将了解各种路由、命名路由、路由过度等。