当前位置：网站首页 / flutter / 正文

ay开发flutter3程序学习笔记 1 -dart笔记

时间：2023年04月03日 | 作者 : aaronyang | 分类 : flutter | 浏览: 210次 | 评论 0 人

这里AY 杨洋使用的是window10系统，配合vscode最新的版本，平时测试先用 Chrome浏览器测试

我安装的插件

运行dart，我们需要安装code runner，基础学下语法

C++那些可以暂时不装

====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========

这里假设你很精通C#了，以前写过一些js或者nodejs 的代码的，理解就很简单了，我也会粘贴官方代码，不要吐槽。教你怎么自学的

详情链接：1.4 Dart语言简介 | 《Flutter实战·第二版》 (flutterchina.club)

新建一个文本文件，名字叫 1.dart

dynamic a;
Object b = "";
main() {
  a = "";
  printLengths();
}

printLengths() {
  // 正常
  print(a.length);
  // 报错 The getter 'length' is not defined for the class 'Object'
  //print(b.length);
}

自己点击Run

你可以理解dart就是我们的C#，一开始学C#的时候，都是先从控制台开始的，然后基于C#，我们可以开发winform，wpf，web，u3d一样。

dynamic就是动态推算类型的，而Object就是所有的父类，var你类似javascript那种用法，但是dart中确定后类型，就不能改了。

main(){ } 程序主入口

输入ay在合肥这个字符串的长度是 5

final和const

类似C#的readonly和 const

空安全，在C#8.0以上也有，基本一致，只是我们C#的if判断了某个变量不为null，然后方法体里面就可以放心的用了，但是dart中，还是要

如下面的 !() 就是和我们C#不一样的，需要显式告诉预处理器

你也可以使用fun?.call() 类似我们C#的 fun.Invoke()

函数这块

js中，使用function标记，dart如果不写function，返回值为dynamic类型，如下图第4行代码

这里第一行代码，类似C语言定义个函数，也可以理解C#的委托，这里可以传递一个方法，dart中方法也是对象，所以可以当做参数传递

也可以像C#一样使用匿名函数

bool isNoble (int atomicNumber)=> true ;

还可以和js一样

var say = (str){
  print(str);
};
say("hi world");

作为参数传递

下面两个知识点很重要

可选的位置参数

可选的命名参数

为了实现方法重载的，dart中随处可见

1 可选的位置参数，类似C#的方法重载

方括号，在C#中可就要写2个同名方法了

你可以选择需要的代码，或者不选代码，默认全部， Ctrl+Alt+N

2 可选的命名参数，类似C# 参数默认值，不过它用花括号

dart和C#不支持多继承，但是支持mixin，就是组合多个类

哈，有点像分布类，C#的partial的小作用

我们定义了几个 mixin，然后通过 with 关键字将它们组合成不同的类。有一点需要注意：如果多个mixin 中有同名方法，with 时，会默认使用最后面的 mixin 的，mixin 方法中可以通过 super 关键字调用之前 mixin 或类中的方法。我们这里只介绍 mixin 最基本的特性，关于 mixin 更详细的内容读者可以自行百度

接下来就是异步的东西，dart中用future，C#中叫Task，思路基本一致，也和async和 await关键字一起用

先了解基础的语法

void f1() {
  Future.delayed(Duration(seconds: 2), () {
    return "hello world!";
  }).then((data) {
    print(data);
  });
}

延迟2秒，打印hello world

先输出结束，后输出hello world，说明异步的

void f2() {
  Future.delayed(Duration(seconds: 2), () {
    //return "hi world!";
    throw AssertionError("Error");
  }).then((data) {
    //执行成功会走到这里
    print("success");
  }).catchError((e) {
    //执行失败会走到这里
    print(e);
  });
}

whencomplete 无论成功与否都进入，类似try catch finally的finally

void f3() {
  Future.delayed(Duration(seconds: 2), () {
    //return "hi world!";
    throw AssertionError("Error");
  }).then((data) {
    //执行成功会走到这里
    print(data);
  }).catchError((e) {
    //执行失败会走到这里
    print(e);
  }).whenComplete(() {
    //无论成功或失败都会走到这里
  });
}

wait方法，类似C#的Task.WhenAll

void f4() {
  Future.wait([
    // 2秒后返回结果
    Future.delayed(Duration(seconds: 2), () {
      return "hello";
    }),
    // 4秒后返回结果
    Future.delayed(Duration(seconds: 4), () {
      return " world";
    })
  ]).then((results) {
    print(results[0] + results[1]);
  }).catchError((e) {
    print(e);
  });
}

关于async和await，和javascript的一样的

如下代码，Future如果换成C#的Task，基本是一样的。

//先分别定义各个异步任务
Future<String> login(String userName, String pwd){
    //用户登录
};
Future<String> getUserInfo(String id){

    //获取用户信息 
};
Future saveUserInfo(String userInfo){
  // 保存用户信息 
};

login("alice","******").then((id){
 //登录成功后通过，id获取用户信息    
 getUserInfo(id).then((userInfo){
    //获取用户信息后保存 
    saveUserInfo(userInfo).then((){
       //保存用户信息，接下来执行其他操作
    });
  });
})

这种回调太多了，专业名叫回调地狱（Callback Hell）。

而解决回调地狱的两大神器正是 ECMAScript6 引入了Promise，以及ECMAScript7 中引入的async/await。而在 Dart 中几乎是完全平移了 JavaScript 中的这两者：Future相当于Promise，而async/await连名字都没改。接下来我们看看通过Future和async/await如何消除上面示例中的嵌套问题。

使用Future消除Callback Hell (Future 的所有API的返回值仍然是一个Future对象)

login("alice","******").then((id){
    return getUserInfo(id);
}).then((userInfo){
    return saveUserInfo(userInfo);
}).then((e){
   //执行接下来的操作 
}).catchError((e){
  //错误处理  
  print(e);
});

使用 async/await 消除 callback hell

task() async {
   try{
    String id = await login("alice","******");
    String userInfo = await getUserInfo(id);
    await saveUserInfo(userInfo);
    //执行接下来的操作   
   } catch(e){
    //错误处理   
    print(e);  
   }  
}

其实，无论是在 JavaScript 还是 Dart 中，async/await 都只是一个语法糖，编译器或解释器最终都会将其转化为一个 Promise（Future）的调用链

Stream 这个我也是第一次用

Stream 也是用于接收异步事件数据，和 Future 不同的是，它可以接收多个异步操作的结果（成功或失败）。也就是说，在执行异步任务时，可以通过多次触发成功或失败事件来传递结果数据或错误异常。 Stream 常用于会多次读取数据的异步任务场景，如网络内容下载、文件读写等。举个例子：

void f5() {
  Stream.fromFutures([
    // 1秒后返回结果
    Future.delayed(Duration(seconds: 1), () {
      return "hello 1";
    }),
    // 抛出一个异常
    Future.delayed(Duration(seconds: 2), () {
      throw AssertionError("Error");
    }),
    // 3秒后返回结果
    Future.delayed(Duration(seconds: 3), () {
      return "hello 3";
    })
  ]).listen((data) {
    print(data);
  }, onError: (e) {
    print(e.message);
  }, onDone: () {});
}

既然 Stream 可以接收多次事件，那能不能用 Stream 来实现一个订阅者模式的事件总线

正因如此，在 Flutter中，Dart 几乎放弃了脚本语言动态化的特性，如不支持反射、也不支持动态创建函数等。并且 Dart 从 2.0 开始强制开启了类型检查（Strong Mode），原先的检查模式（checked mode）和可选类型（optional type）将淡出，所以在类型安全这个层面来说，Dart 和 TypeScript、CoffeeScript 是差不多的，所以单从动态性来看，Dart 并不具备什么明显优势，但综合起来看，Dart 既能进行服务端脚本、App 开发、Web 开发，这就有优势了！

Dart 运行时和编译器支持 Flutter 的两个关键特性的组合：

基于 JIT 的快速开发周期：Flutter 在开发阶段采用，采用 JIT 模式，这样就避免了每次改动都要进行编译，极大地节省了开发时间；

基于 AOT 的发布包: Flutter 在发布时可以通过 AOT 生成高效的机器码以保证应用性能。而 JavaScript 则不具有这个能力。

学习思路：

官网：阅读Flutter官网的资源是快速入门的最佳方式，同时官网也是了解最新Flutter发展动态的地方，由于目前 Flutter 仍然处于快速发展阶段，所以建议读者还是时不时的去官网看看有没有新的动态。

源码及注释：源码注释应作为学习 Flutter 的第一文档，Flutter SDK 的源码是包含在 Flutter 工程中的的，并且注释非常详细且有很多示例，我们可以通过 IDE 的跳转功能快速定位到源码。实际上，Flutter 官方的组件文档就是通过注释生成的。根据笔者经验，源码结合注释可以帮我们解决大多数问题。

Github：如果遇到的问题在StackOverflow上也没有找到答案，可以去 Github flutter 项目下提 issue。

Gallery源码：Gallery 是 Flutter 官方示例 APP，里面有丰富的示例，读者可以在网上下载安装。Gallery 的源码在 Flutter 源码 “examples” 目录下。

StackOverflow： StackOverflow 是目前全球最大的程序员问答社区，现在也是活跃度最高的 Flutter 问答社区。StackOverflow 上面除了世界各地的 Flutter开发者会在上面交流之外，Flutter 开发团队的成员也经常会在上面回答问题。

跨平台分类：

H5 + 原生（Cordova、Ionic、微信小程序）

JavaScript 开发 + 原生渲染（React Native、Weex）

自绘UI + 原生 (Qt for mobile、Flutter)

1.1 移动开发技术简介 | 《Flutter实战·第二版》 (flutterchina.club)

AY总结：虚拟DOM给浏览器，虚拟DOM给原生（自己实现控件可能比较麻烦），纯原生

混合框架一般都会在原生代码中预先实现一些访问系统能力的 API ，然后暴露给 WebView 以供 JavaScript 调用。这样一来，WebView 中 JavaScript 与原生 API 之间就需要一个通信的桥梁，主要负责 JavaScript 与原生之间传递调用消息，而消息的传递必须遵守一个标准的协议，它规定了消息的格式与含义，我们把依赖于 WebView 的用于在 JavaScript 与原生之间通信并实现了某种消息传输协议的工具称之为 WebView JavaScript Bridge , 简称 JsBridge，它也是混合开发框架的核心