使用 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 将视觉效果应用到其子组件，而不改变它们的布局、大小和位置。
| 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. 滚动
滚动一个拥有多个子组件的父组件。
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文档。在那里，你将了解各种路由、命名路由、路由过度等。
4104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
