Flutter官方提供的UI组件有非常多，摘取常用的UI组件记录下常见的属性和用法。

基础组件

组件类别	组件名称	描述	常见属性
文本	Text	文本组件，展示文字内容	textAlign：文字对其方式; maxLine：最多显示行数; overflow：文字截断方式; textScaleFactor：文字放大系数; style：文字样式包括大小，颜色，背景，字体，装饰等; textSpan: 同一Text不同部分文字效果
按钮	ElevatedButton TextButton OutlineButton IconButton	悬浮按钮，有阴影; 文字按钮，没有阴影和背景; 边框按钮; 图标按钮	icon：接收一个Icon组件，展示图标; label：接收一个Text组件展示文字（IconButton除外） onPress: 接收一个点击事件处理器
图形	Image Icon	展示图片，可以从assert目录，本地文件或者网络上加载图片 图标，可以加载iconfont	image: 设置显示图片的提供者; width/height：设置图片的宽高; fit：缩放模式; repeat：重复模式; aligne：对齐模式; icon>color: icon的颜色
选择框	Switch Checkbox	单选开关 复选框，可以有三种状态：null false true	value：当前的值; activeColor：选中状态的颜色; onChanged：选择状态发生变化时的回调
输入	TextField Form	文本输入框 表单，可分组校验和操作	controller：编辑框控制器，获取内容以及相应操作; focusNode：控制焦点; keyboardType：键盘类型; InputDeraction：输入样式文本背景颜色提示等; form>autovalidate: 自动检验输入内容的合法性，一有错误即刻提出，否则需要调用formState.validate校验; form>onWillPop：拦截返回事件; form>onChange：每个子项发生变化时回调
指示器	LinerProgressIndicator CircleProgressIndicator	条状的进度指示器 圆形的进度指示器	value: 当前进度，不赋值时表示模糊进度; backgroundColor：背景颜色; activeColor：已完成颜色（动画）circleProgressIndicator>strokeWidth: 圆环的粗细

布局类组件

Flutter中组件类型大致为

Widget	描述	用途
LeafRenderObjectWidget	叶子节点的组件类型，没有子组件	通常用来实现基础组件
SingleChildRenderObjectWidget	包含单个子组件的组件类型	通常用来实现包含单个子组件的组件
MultiChildRenderObjectWidget	包含多个子组件的组件类型	通常用来实现包含多个子组件的组件

布局类组件都是直接或者间接继承了 SingleChildRenderObjectWidget 或者 MultiChildRenderObjectWidget;

组件类型	组件名称	描述
约束布局	ConstrainedBox	给子组件增加约束，如minWidth，maxWidth，minHeight，maxHeight等
约束布局	SizedBox	给子组件一个固定大小的约束
约束布局	unConstrainedBox	去除父组件的约束，由子组件自己决定大小
线性布局	Row	水平方向布局，主轴为水平方向，纵轴为竖直方向 MainAxisAlignment表示主轴对齐方式，CrossAxisAlignment表示纵轴对齐方式
线性布局	Column	垂直防线布局，主轴为竖直方向，纵轴为水平方向
弹性布局	Flex	允许子组件按照一定比例来分配空间，结合Expand组件使用
弹性布局	Expand	通过flex属性来分配空间占比;Expand组件只能使用在Flex（Row，Column继承自Flex组件）组件内
流式布局	Wrap	可以自动折行，direction方向，spacing，runspacing表示主纵轴间距，runAlignment 纵轴对齐方式
流式布局	Flow	用于自定义流式布局，需要自己实现FlowDelegate，指定大小，但性能好，灵活
层叠布局	Stack	堆叠布局，类似Android中的FramLayout
层叠布局	Positioned	与Stack配合使用，相对Stack的四点的位置布局
相对定位	Align	相对位置的布局，有两种实现 Alignment 和 FractionalOffset，区别在于原点位置不同
相对定位	Center	居中对齐，如果不设置widthFactor和heightFactor，那么会撑满父组件
信息组件	LayoutBuilder	获取父组件的约束条件，从而动态部署子组件

装饰类组件

这类组件通常是用来给子组件增加样式，间距，裁剪，旋转等功能

组件名称	描述	常用属性
Padding	给子组件增加留白（间距）	padding：设置四边间距
DecorationBox	装饰性组件，可在组件绘制前后增加装饰，如背景，形状，阴影等	decoration：装饰类 position: 前景还是背景
Transform	变换组件，可变换子组件的位置，旋转，大小;不影响布局只在绘制阶段生效	transform：变换矩阵 Transform.translate:位移组件 Transform.scale：缩放组件 Transform.rotate: 旋转组件
RotatedBox	旋转组件，会变换子组件的位置和大小，在布局阶段生效	quarterTurns：旋转角度（90度倍数）
Container	容器组件，包含其他各个装饰组件功能，如padding，decoration，transform等	margin：容器外间距，不属于decoration的修饰范围 constraint:容器的大小限制 fogroundDecoration:前景修饰，与背景修饰分开了
ClipOval	子组件为正方形时剪裁成内贴圆形;为矩形时，剪裁成内贴椭圆
ClipRRect	将子组件剪裁为圆角矩形	borderRadius:圆角半径
ClipRect	默认剪裁掉子组件布局空间之外的绘制内容（溢出部分剪裁）	clipper：自定义的裁剪器
ClipPath	按照自定义的路径剪裁	clipper：自定义裁剪器
FittedBox	自适应布局，去除父组件约束，根据子组件大小和适应参数绘制	fit：适配方式 aligment:对齐方式 clipBehavor: 裁剪方式
Scaffold	页面骨架，包含appbar，bottomNavigationBar，drawer，floatActionButton等	appBar：标题栏; bottomNavigationBar:底部导航栏; drawer: 抽屉菜单; floatActionButton:悬浮按钮

可滚动组件

Flutter 中的可滚动组件主要由三个角色组成：Scrollable、Viewport 和 Sliver：

• Scrollable ：用于处理滑动手势，确定滑动偏移，滑动偏移变化时构建 Viewport 。
• Viewport：显示的视窗，即列表的可视区域;
• Sliver：视窗里显示的元素。

可滚动组件的通用配置：

• scrollDireaction：设置滚动的主轴（横向还是纵向）
• reverse: 是否反方向滚动
• controller： 用来控制和监听组件滚动
• physics：滚动响应动作，如停止滚动后的动画效果，滚动到头后的效果
• cacheExtend： 组件缓存和预渲染

组件名称	描述	常用属性
SingleChildScrollView	可滚动组件，只有一个子组件，不会按需加载，用于组件内容不是很多的情况下。	primary：表示是否使用widget树中的默认的primaryScrollController
ListView	沿一个方向上线性布局的可滚动组件	itemExtent：子组件的高度或宽度，可提高性能 protoTypeItem: 子组件原型，不知道itemExtent的情况下使用 ListView.Builder: 列表项构造器，列表子组件比较多时使用 ListView.Separated: 可在列表项中添加分割线
ScrollController	滚动组件控制器，可以获取当前滚动位置，控制滚动等，组件dispose时需要调用dispose防止内存泄漏	offset：当前滚动位置; jumpTo：跳转到指定的位置; animateTo：执行一个动画效果到指定位置 addListener: 添加一个滚动监听
NotificationListener	监听滚动组件的滚动事件;可以在滚动组件与根组件之间任意位置	pixels：当前滚动长度; maxScrollExtent：最大可滚动长度; extentBefore：已滚动长度; extentInset：视窗内长度; extentAfter：还可以滚动的长度; atEdge：是否到滚动边界
AnimatedList	与ListView相似，当时在添加和移除列表项时，会执行动画效果	State.insertItem: 应用插入时执行动画; State.removeItem：应用删除时执行动画
GridView	网格布局	gridDelegate：控制网格如何布局
PageView	页面切换布局，可配合Tab使用	allowImplicitScrolling：是否允许缓存页面（前后各一页）
TabBarView	页面切换组件，封装了PageView	tabController：用于监听和控制TabBarView的页面切换
TabBar	导航标题栏组件，通常和TabBarView一起使用	tabController: 可以和TabBarView使用同一个controller tabs: 具体的每个tab内容 indicator: 指示器
CustomScrollView	将多个滚动组件统一起来，共用scrollable和viewport，包含的子组件必须都是Sliver类型组件	slivers：接收一个sliver对象的数组
NestedScrollView	嵌套滚动组件	headerSliverBuilder：构建外部滚动组件，必须时Sliver; body：内部滚动组件，与NestedScrollView共用controller

滚动组件的缓存

设置addAutomaticKeepAlives 为true时，ListView会自动为子项添加一个根组件AutomaticKeepAlives;Flutter提供了一个AutomaticKeepAliveClientMixin的混合，可以在根组件的state中混入。

class _PageState extends State<Page> with AutomaticKeepAliveClientMixin {

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用
    return Center(child: Text("${widget.text}", textScaleFactor: 5));
  }

  @override
  bool get wantKeepAlive => true; // 是否需要缓存
}

弹框组件

组件名称	描述	常用属性
AlertDialog	提示确认框	title: 对话框标题; content：对话框内容; actions：对话框操作
SimpleDialog	选择框，用于列表选择	children: 接收SimpleDialogOption，用于处理选择
Dialog	AlertDialog & SimpleDialog的基类，可用于自定义弹框

showDialog 是Material组件库里用于弹出对话框的方法。它的返回值Future为弹框操作的返回值。

Future<T?> showDialog<T>({
    required BuildContext context,
    required WidgetBuilder builder, //构建对话框内部UI
    bool barrierDismissible = true // 点击遮罩是否关闭对话框
});

ShowGeneralDialog 提供了一个弹出非Material风格的普通对话框方法。

Future<T?> showGeneralDialog<T>({
  required BuildContext context,
  required RoutePageBuilder pageBuilder, //构建对话框内部UI
  bool barrierDismissible = false, //点击遮罩是否关闭对话框
  String? barrierLabel, // 语义化标签(用于读屏软件)
  Color barrierColor = const Color(0x80000000), // 遮罩颜色
  Duration transitionDuration = const Duration(milliseconds: 200), // 对话框打开/关闭的动画时长
  RouteTransitionsBuilder? transitionBuilder, // 对话框打开/关闭的动画
  ...
})

showModalBottomSheet 提供了一个Material风格的底部弹框方法。

Future<T?> showModalBBottomSheet<T>({
    required BuildContext context,
    required WidgetBuilder builder,//构建对话框的UI
})

showDatePicker 提供了一个Materail风格的日期选择选择器