Flutter构建部件其实是从React获取的灵感，其核心思想是用部件构建UI。部件描述在给定当前配置和状态的情况下，它们的视图应该是什么样子。当部件的状态发生变化时，部件将重新构建其描述，框架将其与之前的描述进行区分，以便确定从一种状态转换到下一种状态所需的并且最小更改的底层呈现树。
Hello Worldimport 'package:flutter/material.dart';
void main() {
runApp(
const Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
runApp()函数接受给定的Widget，并将其作为Widget树的根。在本例中，部件树由两个部件组成，Center部件及其子部件Text部件。框架强制根部件覆盖屏幕，这意味着文本“Hello, world”最终位于屏幕中央。其中textDirection指定文本显示方向。
在编写应用程序时，您通常会创建新的部件，这些小部件是StatelessWidget或statfulwidget的子类，这取决于您的部件是否管理任何状态。部件的主要工作是实现build()函数，该函数用其他较低级别的部件来描述小部件。框架依次构建这些部件，直到生成表示底层RenderObject的部件，后者计算并描述部件的几何形状。
基本部件Flutter附带了一套功能强大的基本部件，其中以下是常用的:
Text
Text部件允许您在应用程序中创建一系列有样式的文本。
Row, Column
以上两个部件允许您在水平(Row)和垂直(Column)方向上创建灵活的布局。这些对象的设计是基于web的flex布局模型。
Stack
Stack小部件允许您按照绘制顺序将小部件放在彼此的顶部，而不是线性定向(水平或垂直)。然后，您可以在Stack的子节点上使用Positioned部件，将它们相对于Stack部件的顶部、右侧、底部或左侧边缘进行定位。Stack部件是基于web的绝对定位布局模型。
Container
Container部件允许您创建一个矩形的可视元素。容器可以使用BoxDecoration进行装饰，例如背景、边框或阴影。Container还可以对其大小设置边距、内边距和约束。此外，可以使用矩阵在三维空间中变换Container。
Material DesignFlutter提供了许多部件，可以帮助您构建Material设计的应用程序。一个Material应用程序从MaterialApp部件开始，它在应用程序的根处构建了许多有用的部件，包括一个Navigator，它管理一堆由字符串标识的小部件，也称为“路由”。Navigator允许您在应用程序的屏幕之间平滑地切换。MaterialApp部件是完全可选的，我们可以根据自己的需要选择是否使用。接下来通过一段代码来属性一下MaterialApp部件：
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
title: 'Flutter Tutorial',
home: TutorialHome(),
),
);
}
class TutorialHome extends StatelessWidget {
const TutorialHome({super.key});
@override
Widget build(BuildContext context) {
// Scaffold is a layout for
// the major Material Components.
return Scaffold(
appBar: AppBar(
leading: const iconButton(
icon: Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null,
),
title: const Text('Example title'),
actions: const [
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
// body is the majority of the screen.
body: const Center(
child: Text('Hello, world!'),
),
floatingActionButton: const FloatingActionButton(
tooltip: 'Add', // used by assistive technologies
onPressed: null,
child: Icon(Icons.add),
),
);
}
}
运行结果：
大多数应用程序都包含与系统的某种形式的用户交互。构建交互式应用程序的第一步是检测输入手势。接下来通过创建一个简单的按钮，来了解它是如何工作的:
import 'package:flutter/material.dart';
class MyButton extends StatelessWidget {
const MyButton({super.key});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print('MyButton was tapped!');
},
child: Container(
height: 50,
padding: const EdgeInsets.all(8),
margin: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.lightGreen[500],
),
child: const Center(
child: Text('Engage'),
),
),
);
}
}
void main() {
runApp(
const MaterialApp(
home: Scaffold(
body: Center(
child: MyButton(),
),
),
),
);
}
GestureDetector部件没有视觉表示，而是检测用户做出的手势。当用户点击Container时，GestureDetector调用它的onTap()回调函数，在本例中向控制台打印一条消息。您可以使用GestureDetector来检测各种输入手势，包括点击、拖动和缩放。
许多部件使用手势检测器为其他小部件提供可选的回调。例如，IconButton、ElevatedButton和FloatingActionButton小部件都有onPressed()回调函数，当用户点击部件时触发。
状态到目前为止，页面都只使用了无状态部件。无状态部件从它们的父部件接收参数，这些参数存储在final成员变量中。当一个部件被请求build()时，它使用这些存储的值为它创建的部件派生新的参数。
为了构建更复杂的体验——例如，以更有趣的方式对用户输入做出反应——应用程序通常会携带一些状态。Flutter使用StatefulWidgets来捕捉这个State。StatefulWidgets是一种特殊的部件，它知道如何生成State对象，然后使用State对象来保存状态。考虑这个基本的例子，使用前面提到的ElevatedButton:
import 'package:flutter/material.dart';
class Counter extends StatefulWidget {
const Counter({super.key});
@override
State<Counter> createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int _counter = 0;
void _increment() {
setState(() {
_counter ;
});
}
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: _increment,
child: const Text('Increment'),
),
const SizedBox(width: 16),
Text('Count: $_counter'),
],
);
}
}
void main() {
runApp(
const MaterialApp(
home: Scaffold(
body: Center(
child: Counter(),
),
),
),
);
}
上面的示例接受用户输入，并在build()方法中直接使用结果，每次点击按钮，Count中的值就会递增。
生命周期
Flutter 中的生命周期，包含以下几个阶段：
- createState 该函数为 StatefulWidget 中创建 State 的方法，当 StatefulWidget 被调用时会立即执行 createState 。
- initState该函数为State初始化调用，因此可以在此期间执行 State 各变量的初始赋值，同时也可以在此期间与服务端交互，获取服务端数据后调用 setState 来设置 State。
- didChangeDependencies 当State对象的依赖发生变化时会被调用；例如：在build() 中包含了一个InheritedWidget，然后在之后的build() 中InheritedWidget发生了变化，那么此时InheritedWidget的子widget的didChangeDependencies()回调都会被调用。典型的场景是当系统语言Locale或应用主题改变时，Flutter framework会通知widget调用此回调。
- build 主要是返回需要渲染的 Widget ，由于 build 会被调用多次，因此在该函数中只能做返回 Widget 相关逻辑，避免因为执行多次导致状态异常。在 build 之后还有个回调 addPostFrameCallback，在当前帧绘制完成后会回调，注册之后不能被解注册并且只会回调一次；addPostFrameCallback是 SchedulerBinding 的方法；由于 mixin WidgetsBinding on SchedulerBinding，所以添加这个回调有两种方式：SchedulerBinding.instance.addPostFrameCallback((_) => {});或者WidgetsBinding.instance.addPostFrameCallback((_) => {});
- reassemble在 debug 模式下，每次热重载都会调用该函数，因此在 debug 阶段可以在此期间增加一些 debug 代码，来检查代码问题。
- didUpdateWidget 在widget重新构建时，Flutter framework会调用Widget.canUpdate来检测Widget树中同一位置的新旧节点，然后决定是否需要更新，如果Widget.canUpdate返回true则会调用此回调。正如之前所述，Widget.canUpdate会在新旧widget的key和runtimeType同时相等时会返回true，也就是说在在新旧widget的key和runtimeType同时相等时didUpdateWidget()就会被调用。父组件发生 build 的情况下，子组件该方法才会被调用，其次该方法调用之后一定会再调用本组件中的 build 方法。
- deactivate 在组件被移除节点后会被调用，如果该组件被移除节点，然后未被插入到其他节点时，则会继续调用 dispose 永久移除。
- dispose 永久移除组件，并释放组件资源。
Flutter 生命周期的整个过程可以分为四个阶段：
- 初始化阶段：createState 和 initState
- 组件创建阶段：didChangeDependencies 和 build
- 触发组件 build：didChangeDependencies、setState 或者didUpdateWidget 都会引发的组件重新 build
- 组件销毁阶段：deactivate 和 dispose
在部件重建时，使用Keys来控制框架将哪些部件与其他部件匹配。默认情况下，框架根据它们的运行时间类型和它们出现的顺序来匹配当前和以前构建中的部件。对于Keys，框架要求两个部件具有相同的key和相同的runtimeType。
当我们修改一组保持某种状态的相同类型的部件时，通常会使用Keys。大多数情况下，我们将它们应用于数据不断变化的部件子部件，如Listview或Stateful部件。
Flutter在重新呈现前检查前一个小部件的状态，如果前一个小部件与新小部件的类型相同，它将保持旧状态。如果数据发生变化，我们不希望出现引用旧数据这种情况。因此，我们需要Keys来唯一地标识部件。这是因为新的部件将具有与前一个不同的密钥，因此旧的部件将被销毁。
Global keys全局键可以用于从部件树的任何位置访问另一个部件的状态，但是它的成本很高，同时可能在代码的不同部分引入一些耦合，而且有更好的方法可以做到这一点，比如Providers, Inherited Widgets等。
GlobalKey通常与GlobalKey<FormState>一起使用。例如，当处理表单时，它允许您访问表单的状态并执行诸如表单验证和提交之类的操作。
