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

基础组件

布局类组件

Flutter中组件类型大致为

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

装饰类组件

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

可滚动组件

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

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

可滚动组件的通用配置：

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

滚动组件的缓存

设置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; // 是否需要缓存
}

弹框组件

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风格的日期选择选择器