Flutter入门03 -- Widget的整体结构

• Flutter 的所有类都可以看做是 Widget，大部分的类都是继承自 Widget 类，所以学习和了解 Flutter 有哪些 Widget、怎么分类的，对我们后续快速学习非常有用，也可以对 Flutter 的结构层级有一个大致的了解；

Flutter的整体结构层级

• Flutter的Framework的结构层级，如下所示：

image.png

• Flutter的整体结构分为三层，分别为Framework 层，Engine 底层，Embedder层，当然我们最常接触和调用 API 的层级当然就是 Framework 层级了，所以对 Engine 层我们先大体了解下就可以了；
• Flutter SDK 源码里的结构层级，如下所示：

image.png

• 在Flutter SDK 的src文件路径下，包含了以下不同的模块：
  • Foundation模块：包含了注解、断言、基础类型父类、集合、绑定、更新通知、key、编码等等基础部分；
  • Animation模块：主要是放置一些 Flutter 动画相关的Widget类，例如animation、animation_controller(动画控制类)，curves，tween；
  • Painting模块：主要是一些边框绘制、颜色、裁剪图像处理、画笔、插值器等跟绘制、图像、装饰相关的类，例如：Alignment，BoxDecoration，BoxBorder，Color，EdgeInsets，TextStyle等等；
  • Gestures 模块：主要是手势处理相关的 Widget 类，基本上涵盖拖拽操作 Widget、事件类、长按、触摸、放大，例如：Drag；
  • Rendering 模块：可以看做是渲染库，是 Widget的父类基础，里面涵盖一些渲染树；
  • Widget模块：Widget 层是依赖 Rendering 层进行构建的，包含了众多的Widget组件，Widget 组件是 Flutter 的核心；
  • Material模块：包含了Android 平台的风格的 Material Widget，例如Scaffold，AppBar，BottomNavigationBar，Icons，TextField，Card，Theme，Dialog，InkWell等等；
  • Cupertino模块：包含了 iOS 平台风格的扁平化 Widget，例如：CupertinoActionSheet，CupertinoTextField等等；
• 注意到Material与Cupertino中有同名的组件，一般属于iOS风格的在组件名称前加上Cupertino，不加的默认为Material模块中的属于Android风格的组件；

Widget组件分类

基础组件类(Basics)

• 包括有：Text、Image、Icon、Button、TextField，Divider

App结构和导航类

• 包括有：Scaffold、Appbar、BottomNavigationBar、TabBar、TabBarView、MaterialApp、WidgetsApp、Drawer、SliverAppBar

输入和选择类

• 包括有：TextField、Checkbox、Raido、Switch、Slider、Date&Time Pickers

单个子元素的布局类

• 包括有：Container、Padding、Center、Align、FittedBox、AspectRatio、ConstrainedBox、Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth、LimitedBox、Offstage、OverflowBox、SizedBox、SizedOverflowBox、Transform、CustomSingleChildLayout

多个子元素的布局类

• 包括有：Row、Column、Stack、IndexedStack、GridView、Flow、Table、Wrap、ListBody、CustomMultiChildLayout、LayoutBuilder、ListView、Expanded

滚动类

• 包括有：GridView、ListView、NestedScrollView、SingleChildScrollView、Scrollable、Scrollbar、CustomScrollView、NotificationListener、ScrollConfiguration、RefreshIndicator、PageView

Input 输入类：

• 包括有：Form、FormField、RawKeyboardListener

动画和Motion类：

• 包括有：AnimatedContainer、AnimatedCrossFade、Hero、AnimatedBuilder、DecoratedBoxTransition、FadeTransition、PositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition、AnimatedDefaultTextStyle、AnimatedListState、AnimatedModalBarrier、AnimatedOpacity、AnimatedPhysicalModel、AnimatedPositioned、AnimatedSize、AnimatedWidget、AnimatedWidgetBaseState

交互模型类

• 触摸交互，包括有：
  • Draggable、LongPressDraggable、GestureDetector、DragTarget、Dismissible、IgnorePointer、AbsorbPointer、Scrollable
• 路由导航，包括有：
  • Hero、Navigator

绘制和效果类：

• 包括有：Transform、Opacity、DecoratedBox、FractionalTranslation、RotatedBox、ClipOval、ClipPath、ClipRect、CustomPaint、BackdropFilter

对话框类

• 包括有：SimpleDialog、AlertDialog、BottomSheet、ExpansionPanel、SnackBar

Cupertino(iOS-style widgets)类

• 包括有：CupertinoActionSheet、CupertinoActivityIndicator、CupertinoAlertDialog、CupertinoButton、CupertinoDatePicker、CupertinoDialog、CupertinoDialogAction、CupertinoFullscreenDialogTransition、CupertinoPageScaffold、CupertinoPageTransition、CupertinoPicker、CupertinoPopupSurface、CupertinoSegmentedControl、CupertinoSlider、CupertinoSwitch、CupertinoNavigationBar、CupertinoTabBar、CupertinoTabScaffold、CupertinoTabView、CupertinoTextField、CupertinoTimerPicker