flutter中创建小部件【Flutter专题9】

了解小部件

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