了解小部件
Flutter 应用程序的几乎每个元素都是一个小部件。小部件被设计为不可变的或不可更改的,因为使用不可变的小部件有助于保持应用程序 UI 的轻量级。您可以将小部件想象成可以说明 UI 外观的蓝图。不同的外观需要不同的蓝图。
您将使用两种基本类型的小部件:
- Stateless:仅依赖于它们自己的配置信息的小部件,例如图像视图中的静态图像。
- Stateful:需要维护动态信息的小部件。它们通过与 State 对象交互来实现。
每当 Flutter 框架告诉它们时,无状态和有状态小部件都会重绘。不同之处在于有状态小部件将它们的配置委托给一个State
对象。
创建小部件
要制作自己的小部件,请转到 main.dart 的底部并开始输入 stful,这是“stateful”的缩写。这将为您提供类似于以下内容的弹出窗口:
按回车键选择第一个选项。
VS Code 将帮助您使用多个游标填写名称。写 JGFlutter:
import 'package:flutter/material.dart'; class JGFlutter extends StatefulWidget { JGFlutter({Key? key}) : super(key: key); @override _JGFlutterState createState() => _JGFlutterState();} class _JGFlutterState extends State<JGFlutter> { @override Widget build(BuildContext context) { return Container(); }}
复制代码
这里有一些注意事项:
- 您已经创建了一个
StatefulWidget
名为JGFlutter
. - 您正在重写
createState
以创建有状态小部件的状态对象。 _JGFlutterState
是状态类的名称。前面的下划线_JGFlutterState
表示这个类是文件私有的。它不能导入到其他文件中。build
是您构建小部件的主要位置。Container
默认情况下,此当前返回空值。接下来你会用别的东西换掉它。
将整个build
方法替换_JGFlutterState
为以下内容:
注意:const
您有时会在小部件和变量前面看到的关键字表示编译时常量。添加 并不总是可能或必要const
,但这样做可以让 Flutter 进行一些优化。