flutter 小部件知多少？

大家好，我是坚果，我的公众号“坚果前端”，

了解小部件

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 进行一些优化。