鸿蒙NEXT-Flutter（1）

一，了解Flutter

1,相关介绍

• Flutter利用Skia绘图引擎，直接通过CPU、GPU进行绘制，不需要依赖任何原生的控件
• Android操作系统中，我们编写的原生控件实际上也是依赖于Skia进行绘制，所以Flutter在某些Android操作系统上甚至还要高于原生（因为原生Android中的Skia必须随着操作系统进行更新，而Flutter SDK中总是保持最新的）
• 而类似于RN的框架，必须通过某些桥接的方式先转成原生进行调用，之后再进行渲染
• Flutter是一个UI SDK（Software Development Kit）
• 跨平台解决方案：可以实现一套代码发布移动端（iOS、Android、harmonyOS）, Web端，桌面等
• 目前很多公司都在用它，比如：Google、阿里、字节、腾讯
• 尤其是阿里的闲鱼团队，为Flutter的生态做出了很多贡献
• Flutter有着统一大前端的野望，并且它在不断蚕食iOS、Android、HarmonyOS这些原生开发

2,特点

Google公司在国内做过很多宣讲，其中多次提到Flutter的几个特点：美观 、快速 、高效 、开放

3.1 美观

使用Flutter内置美丽的Material Design和Cupertino widget、丰富的motion API、平滑而自然的滑动效果和平台感知，为您的用户带来全新体验。

3.2 快速

Flutter 的 UI渲染性能很好。在生产环境下，Flutter 将代码编译成机器码执行，并充分利用 GPU 的图形加速能力，因此使用Flutter 开发的移动应用即使在低配手机上也能实现每秒 60 帧的 U 渲染速度。

Flutter 引擎使用 C++ 编写，包括高效的 Skia 2D 渲染引擎，Dart 运行时和文本渲染库。

3.3 高效

Hot Reload (热重载)，在前端已经不是什么新鲜的东西，但在移动端之前一直是没有的

3.4 开放

Flutter 是开放的，它是一个完全开源的框架。

二，Flutter搭建鸿蒙开发环境

略；

为什么先安装Dart呢？

事实上如果提前安装了Flutter SDK，它已经内置了Dart了，我们完全可以直接使用Flutter去进行Dart的编写并且运行。

但是，如果想单独学习Dart，并且运行自己的Dart代码，最好去安装一个Dart SDK。

三，Dart核心语法

1. 认识Dart

Google为Flutter选择了Dart语言已经是既定的事实，无论你多么想用你熟悉的语言，比如JavaScript、TypeScript、ArkTS等来开发Flutter，至少目前都是不可以的。

• Dart 是由谷歌开发的计算机编程语言，它可以被应用于 Web/服务器/移动应用和物联网等领域开发。
• Dart 也是 Flutter 的基础，Dart 作为 Flutter 应用程序的编程语言，为驱动应用运行提供了环境。
• 因此, 要学习Flutter, 则首先得会Dart, Dart 目前最新稳定版本：v3.4.0

2，搭建dart开发环境

要在本地开发Dart程序, 首先需要安装Dart SDK（）

官方文档: dart.dev/get-dart , 中文文档: dart.cn/

无论是什么操作系统，安装方式都是有两种：通过工具安装和直接下载SDK，配置环境变量

直接下载SDK，配置环境变量

• 下载地址：dart.dev/tools/sdk/a...

下载较慢可以直接克隆我的仓库拿到：gitee.com/yth345345/g...

• 我采用了这个安装方式。
• 下载完成后，根据路径配置环境变量即可。

都完成后验证是否成功

dart --version

VSCode中安装常用插件

• Dart插件：可以帮助我们在VSCode中更加高效的编写Dart代码
  提供了友好的代码提示，代码高亮，以及代码的重构、运行和重载

• Flutter插件：为Flutter开发准备的

• Code Runner：可以点击右上角的按钮快速运行代码

写代码

需求：存储不可被修改的数据

实现：常量关键字：const 和 final

区别：final是运行时常量，值在运行时赋值；const是编译期常量，值在编译时赋值；

void main() {
  var count = 10;
  var count2 = 20;

  const Safe_Top_Height = 30; // 定义顶部安全区的高度
  final Safe_Bottom_Height = count + count2; // 定义底部安全区的高度
  // Safe_Top_Height = 40;
  // Safe_Bottom_Height = 50;
  // 都不能被修改
  // const 编译期运行
  // final 运行时
  // 编译- 程序- 编译过程-编译过了才可以运行
  // 运行-编译完成之后运行的代码
  print(Safe_Bottom_Height);
  // const性能更好，没运行的时候就确定了值和类型
}

数据类型总结

num（数字）

需求：存储并修改整数和小数

实现：关键字：num 、 int 、 double

void main() {
  // 前端 鸿蒙 类型注解 username: string = "张三"
  // flutter 类似java写法 String a = "11"
  // 数字类型 num(整数 + 小数) int(整数) double(小数)
  num price = 23; // 声明一个价格的变量
  print(price);
  price = ((price * 10) * (1.4 * 10)) / 100; // 处理进度
  print(price);

  // int 只能是整数
  int index = 0;
  while (index < 10) {
    print(index);
    index++;
  }
  // double带精度的数字
  double good_price = 19.99;
  print(good_price);

  // double不能给int赋值
  // int也不可以double赋值
  // double可以给num赋值
  // num不能给double赋值
  // int可以给num赋值
  price = good_price;
  print(price);

  // 如果确定是整数 用int 比如索引 比如数量
  // 如果是价格类的数据 用 double
  // 都用num不好，num占的空间更大，占了整数和小数的空间
}

String（字符串）

Dart字符串是UTF-16编码单元的序列。您可以使用单引号或双引号创建一个字符串

void main() {
  String username = "张三";
  print(username);
  username = "flutter真好学";
  print(username);

  // 前端和鸿蒙字符串 `${username}`
  // flutter不要反引号
  print('当前的用户名:$username');
  print('当前的用户名的长度:${username.length * 10}');

  // 使用\n换行符
  String poemStr = '白日依山尽\n黄河入海流\n欲穷千里目\n更上一层楼';
  print(poemStr);

  // 还有一种换行模式
  String song = '''
    Hiding from rain and snow,
    Looking at crowed from our around go
''';
  print(song);
}

bool（布尔）

需求：存储并修改真或假

实现：关键字：bool

List（列表）

需求：使用一个变量有序的存储多个值

实现：列表(数组)关键字：List

• 定义列表 List 变量名 = [元素1, 元素2, ..., 元素n];

• • 1.1 需求：按序存储数字 1 3 5 7
  • 1.2 需求：按序存储字符串 '居家' '美食' '服饰'
  • 1.3 列表中可以存储任意类型的数据

Map（字典）

需求：声明键值对的集合，并使用与之相关联的键从中获取值（类似JS中的对象）

实现：字典关键字：Map

1. 存储商品分类的编号 和 名称
2. 对字典数据进行查改增删

2.1 查询：字典[key]

2.2 修改：字典[key] = 新值

2.3 新增：字典[新key] = 新值 (注意：key必须是当前字典中不存在的key，如果key已存在就是修改)

2.4 删除：remove(key) (注意：如果key不存在，不会报错，也不会执行删除操作)

3. 遍历字典

• 定义字典语法

void main() {
  // 前端鸿蒙的对象类型 interface class 属性和类型是确定类型
  // Map Record 属于动态属性类型
  // map: Map<string, number> = new Map() get set -ComponentContent(uiContext, wrapBuilder, options）
  // key a b c d 要用Record和Map
  // username password interface class
  // 前端鸿蒙中只有两个类型能用[]取值, object 和Record
  // flutter Map
  Map goodsMap = {"goods_name": "连衣裙"}; // 类似前端 let obj = {}
  // 读取和设置属性
  goodsMap["goods_id"] = 10001; // 设置商品订单编号
  goodsMap["goods_price"] = 108.34; // 设置商品订单编号
  goodsMap["goods_count"] = 20; // 设置商品订单编号

  print(goodsMap);
  goodsMap.remove("goods_count");
  print(goodsMap);

  // 循环
  goodsMap.forEach((key, value) {
    print('当前的key:$key,当前的value:$value');
  });
}

Dart空安全机制

如何尽早的发现并解决null带来的异常？

Dart提供了健全的空安全机制，默认所有的变量都是非空的，如果某个变量得到了一个null，则代码在编译期就会报错

1. 无法正常执行的代码：在代码编译期就会报错
2. 解决办法：使用 ? 显示的指定变量可以为空
3. 使用可以为空的变量

void main() {
  // 如果在编译期间发现变量有可能为空 直接编译不过
  String? username; // username有可能为null也有可能为空字符串
  // 可以理解为 flutter String 和 null的联合类型
  // flutter 没有联合类型
  // 前端鸿蒙 avplayer: media.Avplayer | null = null
  print(username?.length);
  // ? 运行时检查和 ！非空断言
}