1.2　Flutter的架构

Flutter的架构是什么样的，以及它的核心概念是什么？使用Flutter构建好App后，你会发现App只是一个小部件树，可以将其视为应用程序中的UI元素，整个应用程序是一个UI元素，它包含子元素，例如导航栏；或者是一些文字，又或者是用户的输入框，也可以是一个按钮。我们可以把这些小部件放到可视化的小部件中，例如行小部件、列小部件，然后对行和列进行排列组合的布局。Flutter是拥抱差异的，这意味着你可以使用一种编程语言编写运行在iOS和Android平台的应用。同时你也可以根据iOS和Android平台的差异，去分别开发各自平台的代码，这就是Flutter很核心的一个概念。

图1.2　一切都是小部件

在Flutter中一切都是小部件，如图1.2所示的就是开发完成后的一个页面，在这个页面中，使用了大量的小部件，但实际上比这里标示的还要多，例如按钮是一个小部件，它上面的文字是另外一个小部件，整个页面也是一个小部件，这样就形成了一个小部件树。应用是一个小部件，它包含了不同的页面，然后每个页面也是小部件，页面中包含的内容也是小部件，页面和页面之间还可以切换。

下一个核心的问题是怎样把Flutter中的Dart编码转换成原生应用的代码。我们使用Dart语言编写代码，然后借助Flutter API编写自己的小部件。那么怎样才能编译成iOS和Android的原生代码呢？Flutter SDK帮助我们完成这项工作，你不必编写任何原生的代码，你只需要用Dart语言编写，使用Flutter的功能，然后Flutter SDK就会完成代码的编译工作，以上就是Flutter提供给我们的全部功能，如图1.3所示。下面我们就可以搭建开发环境，开发我们的第一个Flutter应用程序了，并把它运行到模拟器上。

图1.3　Dart编码转换成原生应用的代码