基础篇

第1章　基础布局

1.1　什么是组件

组件（Widget，也常被译作控件或小部件等）是Flutter框架的基石。Flutter作为现代的UI框架，从React框架获得灵感(1)，通过定义一个个相对独立的小组件，再利用组件与组件之间的嵌套与配合，逐步搭建出复杂的用户界面。Flutter框架自带了大量的组件，其中大部分组件主要负责渲染用户界面，例如文本框或图片等，也有一部分组件负责处理人机交互，例如触摸事件监听或识别拖放操作等，还有一些功能性组件，例如媒体查询组件等，可以获得当前设备的尺寸及屏幕亮度等信息。

在Flutter框架中，组件不可变（immutable），即一旦被创建就不可以再修改其中的内容，但通常一个应用程序在运行时会有不少动态内容需要随时改变，包括显示不同的数据，跳转页面，甚至动画等，因此每当程序内部数据发生改变或因动画效果而导致用户界面需要更新时，所有涉及的组件都会被摧毁并重制。Flutter框架对组件摧毁和重制的过程优化到极致，所以并不需要过度担心性能问题。

图1-1　新建Flutter项目时自动生成的计数器程序

以每次新建Flutter项目时自动生成的计数器程序为例，屏幕正中央有2个文本框，其中一个显示固定文案，译作“你已单击按钮这么多次”，另一个则用数字显示用户究竟单击了多少次按钮。这里按钮指的就是程序右下角的那个悬浮按钮，用户单击后可观察到计数器加1。读者应该对该程序并不陌生，运行效果如图1-1所示。

不考虑程序的总体页面结构，如导航条等，这个程序至少有3个核心组件，分别为2个渲染文字的Text组件，以及1个悬浮按钮组件。它需要实现的功能是当用户单击按钮后改变第2个Text组件中的文本。在传统框架，如桌面开发、原生App开发或者不用框架的JavaScript中，常见思路是在“单击按钮”事件中编写代码，先修改存储数字的变量，再利用已知控件名，配合findViewById或者getElementById等办法找到负责渲染数字的那个控件，接着修改该控件的.text或者.value等属性，使其显示新的变量值，而Flutter框架则省去了后几步，在按钮单击事件中修改变量，之后可直接通过调用setState方法通知Flutter引擎“部分数据发生了变化，用户界面不一样了，请重新绘制”。整个过程不需要开发者具体说明是哪部分数据发生了变化，导致了哪些界面需要重绘。Flutter引擎会刷新整个界面，通常在1ms内完成一切重绘。

本书先为读者介绍3个负责渲染界面的组件，分别是FlutterLogo、PlaceHolder和Container组件，以加深读者对组件和模块化布局的认识，同时也为以后的内容和概念打下基础。