开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天，点击查看活动详情
Flutter中的组件样式很多，需要一个个去熟悉每个的使用方法，常用的属性和每个组件的作用。这里先把目前常用的组件大概的统计一遍，方便后面系统性的学习。
基础组件
- Text-文本及样式：类似于iOS中的Label，用于显示文本及文本颜色、字体、样式等
- Button-按钮： 类似于iOS中的UIButton，不过这里按钮的种类较多，比如：ElevatedButton、TextButton、OutlineButton、IconButton等。
- Image：
ImageProvider，通过抽象协议定义的load()获取不同数据源的图片。
Image，通过asset或者网络加载图片直接返回一个展示图片的Widget。
使用api：
Image(
image: AssetImage("images/avatar.png"),
width: 100.0
);
Image.asset("images/avatar.png",
width: 100.0,
)
Image(
image: NetworkImage(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
width: 100.0,
)
Image.network(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
width: 100.0,
)
- ICON： 通常用于加载一些字体或者一些矢量图片：比如iconfont
- Switch: 单选开关 类似于iOS的UISwitch
- Checkbox：复选框 感觉就是一个类似UIButton的封装
- TextField: 类似于iOS的UITextField和UITextView的功能集合，当然属性和一些特征还是有很大区别的。
- Form :可校验的输入框，更加灵活，API更加丰富，后面再详细介绍。
- LinearProgressIndicator 线性进度指示器
- CircularProgressIndicator 圆形进度指示器
布局类组件
布局类组件主要是用于Widget的布局，iOS是通过Frame或者Masonry等进行布局，Flutter则通过布局组件。先介绍下有哪些组件，后面再研究每个类的用法及布局原理。
- 线性布局：Row和Colum，和SwiftUI是不是有点像，哈哈。
- 弹性布局：Flex和Expanded 。
- 流式布局：Wrap和Flow。
- 层叠布局：Stack和Positioned
- 对齐于相对定位：Align
- LayoutBuilder：在布局过程中传递信息布局，有点类似于iOS 的自定义UICollectionLayout
容器类组件
容器类组件是为了便于开发者进行UI布局和展示组件，它提供一些已经定义好规则的Widget，方便我们开发。
- 填充-Padding
- 装饰容器-DecoratedBox
- 变换- Transform
- 容器组件- Container
- 剪裁-Clip
- 空间适配-FitterBox
- 页面骨架-Scaffold
可滚动组件
- SingleChildScrollView- 类似于iOS的UIScrollView
- ListView-类似于UITableView
- AnimatedList-和ListView差不多，多了一些动画效果。
- GridView：类似于UICollectionView
- PageView：类似于UIPageViewController
- TabBarView:可以理解为系统封装好的多页面滑动组件，封装了PageView，使其功能多了很多。
- CustomScrollView 和Slivers： 系统提供的高度自定义的可滑动组件
- NestedScrollView：系统封装的多个滑动组件嵌套组合组件。
常用的组件大概就这么多，在此记录方便查询，后面把对应组件的用法链接附上。
