flutter小部件知多少?

1,348 阅读2分钟

这是我参与11月更文挑战的第16天,活动详情查看:2021最后一次更文挑战 大家好,我是坚果,我的公众号“坚果前端”,

jianguo.gif

了解小部件

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