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

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

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

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

我安装的插件

image.pngimage.png

运行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);
}

image.png

自己点击Run


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


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

main(){  } 程序主入口

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

image.png


final和const

image.png

类似C#的readonly和 const


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

image.png

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

image.png

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


函数这块

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

image.png

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

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

bool isNoble (int atomicNumber)=> true ;   

还可以和js一样

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

作为参数传递

image.png


下面两个知识点很重要

可选的位置参数

可选的命名参数

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


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

image.png

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


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

image.png

image.png


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

image.png


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

image.png

哈,有点像分布类,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

image.png

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


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


image.png


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 则不具有这个能力。


image.png



学习思路:

官网:阅读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,它也是混合开发框架的核心

image.png






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



推荐您阅读更多有关于“flutter,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

抖音:wpfui 工作wpf

目前在合肥企迈科技公司上班,加我QQ私聊

2023年11月网站停运,将搬到CSDN上

AYUI8全源码 Github地址:前往获取

杨洋(AaronYang简称AY,安徽六安人)AY唯一QQ:875556003和AY交流

高中学历,2010年开始web开发,2015年1月17日开始学习WPF

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

标签列表