Flutter第一天

最新推荐文章于 2023-08-22 09:45:15 发布

daidaicoco

最新推荐文章于 2023-08-22 09:45:15 发布

阅读量209

点赞数

分类专栏： flutter学习

flutter学习专栏收录该内容

4 篇文章

订阅专栏

@摘录Flutter中文网

Flutter

Flutter在开发阶段采用，采用JIT模式，发布包时基于AOT。

框架

在这里插入图片描述

Flutter Framework

底下两层（Foundation和Animation、Painting、Gestures）也被称为dart UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层UI库，提供动画、手势及绘制能力.
Rendering层，这一层是一个抽象的布局层，它依赖于dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上.
Widgets层是Flutter提供的的一套基础组件库，在基础组件库之上，Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。而我们Flutter开发的大多数只是和这两层打交道。

Flutter Engine

这是一个纯 C++实现的 SDK，其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时，调用最终会走到Engine层，然后实现真正的绘制逻辑。

变量

var

// An highlighted block
var t;
t = "hi world";
// 下面代码在dart中会报错，因为变量t的类型已经确定为String，
// 类型一旦确定后则不能再更改其类型。类型语言
t = 1000;

dynamic和Object

Object：是Dart所有对象的根基类，也就是说所有类型都是Object的子类(包括Function和Null)，所以任何类型的数据都可以赋值给Object声明的对象。
dynamic：与var一样都是关键词,声明的变量可以赋值任意对象。
- 相同:变量可以在后期改变赋值类型如：

dynamic t;
 Object x;
 t = "hi world";
 x = 'Hello Object';
 //下面代码没有问题
 t = 1000;
 x = 1000;

不同的是,dynamic声明的对象编译器会提供所有可能的组合, 而Object声明的对象只能使用Object的属性与方法, 否则编译器会报错。如:


main() {
  dynamic a ='123';
  Object b ='13';
   // no warning
   print(a.length);
   // warning:
   // The getter 'length' is not defined for the class 'Object'
   print(b.length);
}

final和const

如果您从未打算更改一个变量，那么使用 final 或 const,一个 final 变量只能被设置一次.
区别：const 变量是一个编译时常量，final变量在第一次使用时被初始化.

函数

Dart是一种真正的面向对象的语言，函数也是对象，并且有一个类型Function。这意味着函数可以赋值给变量或作为参数传递给其他函数，这是函数式编程的典型特征。

函数声明

代码片段1

bool isNoble(int atomicNumber) {
  return _nobleGases[atomicNumber] != null;
}

代码片段2

typedef bool CALLBACK();

//不指定返回类型，此时默认为dynamic，不是bool
isNoble(int atomicNumber) {
  return _nobleGases[atomicNumber] != null;
}

void test(CALLBACK cb){
   print(cb()); 
}
//报错，isNoble不是bool类型
test(isNoble);

对于只包含一个表达式的函数，可以使用简写语法

  bool isNo11 (int num) => num ==11;
  print(isNo11(11));

函数作为变量

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

函数作为参数传递

void execute(var callback) {
    callback();
}
execute(() => print("xxx"))

可选的位置参数,用[]标记为可选位置参数

String say(String from, String msg, [String device]) {
  var result = '$from says $msg';
  if (device != null) {
    result = '$result with a $device';
  }
  return result;
}
 print(sayMM('美女', 'hello'));//结果是： Bob says Howdy
 print(sayMM('美女', 'hello','smoke signal'));//结果是：Bob says Howdy with a smoke signal

可选的命名参数,定义函数时，使用{param1, param2, …}，用于指定命名参数。

  //定义函数时，使用{param1, param2, …}，用于指定命名参数。例如：
  String sayGG({String from, String msg,String device}) {
    var result = '$from says $msg';
    if (device != null) {
      result = '$result with a $device';
    }
    return result;
  }

    //调用函数时，可以使用指定命名参数。例如：paramName: value
    print(sayGG(from:'帅哥', msg :'hello'));
    print(sayGG(from:'帅哥', msg :'hello',device:'smoke signa'));

异步支持

Dart类库有非常多的返回Future或者Stream对象的异步函数.它们只会在设置好一些耗时操作之后返回，比如像 IO操作
async和await关键词支持了异步编程

Future

Future 的所有API的返回值仍然是一个Future对象，所以可以很方便的进行链式调用.

Future.then

Future.delayed 创建了一个耗时任务，然后在then中接收异步结果并打印结果

Future.catchError

异步任务发生错误，我们可以在catchError中捕获错误

	//延时两s执行的任务
   Future.delayed(new Duration(seconds: 2), () {
   		// return '延迟2s';
   		// print(data);
      throw new AssertionError("error");
    }).then((data) {
      //执行成功会走到这里
      print("success");
    }).catchError((e) {
      //执行失败会走到这里  
      print("failed");
      print(e);
    });

then方法还有一个可选参数onError，也可以它来捕获异常

    Future.delayed(new Duration(seconds: 2), () {
      throw new AssertionError("error");
    }).then((data) {
      //执行成功会走到这里
      print("success");
    }, onError: (e) {
      print("failed onError");
      print(e);
    });

Future.whenComplete

无论异步任务执行成功或失败都需要做一些事的场景,相当于fianlly

  Future.delayed(new Duration(seconds: 2), () {
      throw new AssertionError("error");
    }).then((data) {
      //执行成功会走到这里
      print("success");
    }, onError: (e) {
      print("failed onError");
      print(e);
    }).whenComplete((){
      print("finally");
    });

Future.wait

等待多个异步任务都执行结束后才进行一些操作

    Future.wait([
      Future.delayed(new Duration(seconds: 4), () {
        return "9s任务";
      }),
      Future.delayed(new Duration(seconds: 1), () {
        return "1s任务";
      })
    ]).then((result) {
      print(result[0]+result[1]);
    }).catchError((e) {
      print(e);
    });

Async/await

需求：
在这里插入图片描述
普通写法(回调地狱)

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

使用Future消除Callback Hell（回调地狱）

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

使用async/await消除callback hell

// async用来表示函数是异步的，定义的函数会返回一个Future对象，可以使用then方法添加回调函数。
task() async {
   try{
   //await 后面是一个Future，表示等待该异步任务完成，异步完成后才会往下走；await必须出现在 async 函数内部
    String id = await login("alice","******");
    String userInfo = await getUserInfo(id);
    await saveUserInfo(userInfo);
    //执行接下来的操作   
   } catch(e){
    //错误处理   
    print(e);   
   }  
}

Stream

用于会多次读取数据的异步任务场景，如网络内容下载、文件读写。与future不同：会多次返回一部结果

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

});

输出结果

I/flutter (17666): hello 1
I/flutter (17666): Error
I/flutter (17666): hello 3