前言

之前的文章主要是介绍了Flutter的整体架构以及Dart语言相关，有了前面的知识铺垫，我们就能更好的使用Flutter SDK进行UI开发了。

随着互联网的发展，目前不管是开发移动端还是web端，都提倡进行组件化编程。那么什么是组件化呢？其实组件化可以理解成，对通用功能性UI进行封装，封装之后的UI其实就是一个组件，方便应用其他模块进行统一调用和维护，有效的降低项目代码重复性以及维护复杂度。

那么Flutter作为一个UI框架，其实将组件的概念实践的更彻底，在Flutter中所有的东西都是部件(UI、手势、主题、文字、样式......)。这里的部件其实可以理解成组件，只是在我们日常开发中并不会把所有部件都做成通用性组件。

Flutter 部件介绍

Flutter部件是使用一个现代框架构建的，它的灵感来自React，如果之前对React有一定的开发基础的话，后续会发现Flutter的很多功能设计基本与React一样。

Flutter的中心思想是用小部件构建UI，小部件描述它们的视图在给定当前配置和状态的情况下的UI。当小部件的状态发生变化时，小部件将重新构建，而底层渲染树会比较和决定从一个状态转换到下一个状态所需的最小更改。

HelloWorld

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

以上是一段完整的HelloWorld代码块，runApp()函数接受给定的小部件，并使其成为小部件树的根。小部件树由两个小部件组成，Center小部件及其子部件Text小部件，textDirection用于指定文本显示方向。运行之后我们就可以在手机屏幕中间看见Hello, world!，运行截图：

StatelessWidget、StatefulWidget

我们在项目中进行实际开发的时候，通常会编写StatelessWidget或StatefulWidget的子类，具体取决于小部件是否需要管理状态。

• StatelessWidget

不需要维护可变状态的小部件。

应用场景：

当用户界面部分不依赖于对象本身的配置信息和widget所在的BuildContext之外的任何内容时。

• StatefulWidget

有状态组件

应用场景：

如果我们想改变页面中的数据的话，这个时候就需要用到 StatefulWidget