使用 Flutter 的一套的视觉、结构、平台、和交互式的 widgets,快速创建漂亮的 APP。
目录:
- 基础组件
- Material Components
- Cupertino (iOS 风格的 widget)
- Layout
- Text
- Assets、图片、Icons
- 动画和 Motion
- 交互模型
- 样式
- 绘制和效果
- Async
- 滚动
- 辅助功能
- 路由和导航
1. 基础组件
在构建你的第一个 Flutter 应用程序之前,你绝对需要了解这些 widget。
2. Material Components
实现了Material Design 指南的视觉、效果、motion-rich 的 widget。
- 2.1 App 结构和导航
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 |
- 2.2 按钮
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 |
- 2.3 输入框和选择框
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 |
- 2.4 对话框、Alert、Panel
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 |
- 2.5 信息展示
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 |
- 2.6 布局
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。
4. Layout
排列其它 widget 的 columns、rows、grids 和其它的 layouts。
- 4.1 拥有单个子元素的布局 widget
- 4.2 拥有多个子元素的布局 widget
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 |
- 4.3 Layout helpers
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
在你的应用中使用动画。
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 将视觉效果应用到其子组件,而不改变它们的布局、大小和位置。
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. 滚动
滚动一个拥有多个子组件的父组件。
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文档。在那里,你将了解各种路由、命名路由、路由过度等。