3.4 Flutter 组件化
Flutter 的面向对象编程方式借鉴了React 的组件化编程思维。Flutter 中的所有类都可以看成组件，大部分类都继承自Widget 类。本节主要介绍Flutter 整体架构层级和Flutter 组件分类，同时会覆盖一些其他关于组件的知识点。
3.4.1 架构层级
前面的章节中介绍过Flutter 的架构，这里再来回顾一下。Flutter 架构整体分为两层：Engine层和Framework 层，如图3-19 所示。我们最常接触和调用API 的层级就是Framework 层，所以本节主要分析Framework 层。
图3-19 Flutter 架构
Framework 层中的底层是Foundation 层，核心是foundation 模块，其中包含绑定和注解等基础功能类。从foundation 模块中包含的类可以看出，foundation 模块主要负责一些基础操作，如注解、断言、绑定、更新通知、编码等。
Foundation 层的上一层有三个部分，核心分别为animation、painting、gestures 模块。
animation 模块主要用于放置一些与动画相关的API 组件，如animation.dart、curves.dart、animation_controller.dart、tween.dart 等都非常常用。
painting 模块主要用于存放边框绘制、裁剪图像处理、插值器等与绘制、装饰相关的组件， 如 alignment.dart 、 box_decoration.dart 、 decoration.dart 、 edge_insets.dart 、image_provider.dart、colors.dart、text_style.dart、text_painter.dart 等。
gestures 模块，顾名思义，里面存放了与手势处理相关的组件，基本涵盖了拖曳、长按、触摸、放大等各种功能组件，如drag.dart、events.dart、long_press.dart、multidrag.dart、multitap.dart、tag.dart、scale.dart。
继续往上一层看——Rendering 层。其核心rendering 模块可以看作渲染库，是组件的父类基础库，里面涵盖了一些渲染树，如flex.dart、flow.dart、image.dart、sliver.dart、stack.dart、table.dart、view.dart 等。
再往上看，Rendering 层的上一层是Widgets 层，Widgets 层依赖于Rendering 层进行构建，里面的功能组件非常多，因为Flutter 里所有的类都可以看作组件，常用的有app.dart、container.dart、bottom_navigation_bar_item.dart、editable_text.dart、form.dart、gesture_detector.dart、icon.dart、image.dart、navigator.dart、page_view.dart、routes.dart、scroll_view.dart、sliver.dart、spacer.dart、text.dart 等。
最后，我们来看一下Framework 层的顶层，顶层对应material 和cupertino 模块。这两个模块分别对应Android 平台风格的Material 组件和iOS 平台风格的扁平化组件。我们可以直接使用这两套风格的组件去构建符合Android 和iOS 平台风格的应用。
material 模块里的组件非常多，大部分是我们常用的，如app_bar.dart、button.dart、card.dart、bottom_app_bart.dart、bottom_navigation_bar.dart、colors.dart、data_table.dart、dialog.dart、icons.dart、snack_bar.dart、scaffold.dart、text_field.dart、theme.dart 等。
cupertino 模块里的组件目前并不多，常用的如action_sheet.dart、bottom_tab_bar.dart、button.dart、colors.dart、dialog.dart、icons.dart、nav_bar.dart、page_scaffold.dart、tab_scaffold.dart、tab_view.dart、text_field.dart、theme.dart 等。
3.4.2 组件分类
介绍了Flutter 整体架构层次后，我们着重看一下Flutter 的核心，即组件分类。图3-20 是Flutter 官方给出的组件分类结构图。
图3-20 Flutter 官方给出的组件分类结构图
可以看出，组件主要分为StatelessWidget 和StatefulWidget 两类，分别表示无状态组件和有状态组件。无状态组件主要是指那些无须更新页面显示状态的、无可变状态维护功能的组件，如AssetImage、Text 等。有状态组件主要是指那些可以自己维护状态、更新渲染内容的组件，如Scrollable、Animatable 等。
Flutter 官方将组件分为以下几类。
基础组件（WidgetBasics）：Container、Row、Column、Image、Text、Icon、RaisedButton、Scaffold、Appbar、FlutterLogo、Placeholder。
Material 组件类
● App 结构和导航类：Scaffold、Appbar、BottomNavigationBar、TabBar 等。
● 按钮类：RaisedButton、FloatingActionButton、FlatButton、IconButto 等。
● 输入和选择类：TextField、Checkbox、Raido、Switch、Slider 等。
● 对话框和控制面板类：SimpleDialog、AlertDialog、BottomSheet 等。
● 信息显示类：Image、Icon、Chip、Tooltip、DataTable 等。
● 布局类：ListTile、Stepper、Divider。
Cupertino 组件类：CupertinoActionSheet、CupertinoAlertDialog、CupertinoButton、CupertinoDatePicker、CupertinoDialog、CupertinoDialogAction 等。
Layout 布局组件类
● 单个子元素布局组件：Container、Padding、Center、Align、FittedBox 等。
● 多个子元素布局组件：Row、Column、Stack、IndexedStack、GridView 等。
Text 文本显示类：Text、RichText、DefaultTextStyle。
Assets、图片、Icons 类：Image、Icon、RawImage、AssetBundle。
Input 输入类：Form、FormField、RawKeyboardListener。
动画和Motion 类：AnimatedContainer、AnimatedCrossFade、Hero、AnimatedBuilder、DecoratedBoxTransition、FadeTransition、PositionedTransition、RotationTransition 等。
交互模型类
● 触摸交互：Draggable、LongPressDraggable、GestureDetector、DragTarget 等。
● 路由导航：Hero、Navigator。
样式类：Padding、Theme、MediaQuery。
绘制和效果类：Transform、Opacity、DecoratedBox、RotatedBox、ClipOval、ClipPath、ClipRect、CustomPaint、BackdropFilter 等。
Async 异步模型类：FutureBuilder、StreamBuilder。
滚动类：GridView、ListView、NestedScrollView、SingleChildScrollView 等。
辅助功能类：Semantics、MergeSemantics、ExcludeSemantics。
本节主要介绍Flutter 的组件分类，为后续的Flutter 开发奠定基础，熟悉组件的分类会更利于我们掌握组件的用法。