Flutter

Flutter 基础知识

xmamiga

Flutter 是谷歌的移动UI框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。

一、Flutter 中的生命周期

Flutter 中的生命周期

  • initState() 表示当前 State 将和一个 BuildContext 产生关联，但是此时BuildContext 没有完全装载完成，如果你需要在该方法中获取 BuildContext ，可以 new Future.delayed(const Duration(seconds: 0, (){//context}); 一下。

  • didChangeDependencies() 在 initState() 之后调用，当 State 对象的依赖关系发生变化时，该方法被调用，初始化时也会调用。

  • deactivate() 当 State 被暂时从视图树中移除时，会调用这个方法，同时页面切换时，也会调用。

  • dispose() Widget 销毁了，在调用这个方法之前，总会先调用 deactivate()。

  • didUpdateWidge 当 widget 状态发生变化时，会调用。



Flutter 中 runApp 启动入口其实是一个 WidgetsFlutterBinding ，它主要是通过 BindingBase 的子类 GestureBinding 、ServicesBinding 、 SchedulerBinding 、PaintingBinding 、SemanticsBinding 、 RendererBinding 、WidgetsBinding 等，通过 mixins 的组合而成的。

二、Flutter 中存在四大线程

Flutter 中存在四大线程，分别为 UI Runner、GPU Runner、IO Runner， Platform Runner （原生主线程） ，同时在 Flutter 中可以通过 isolate 或者 compute 执行真正的跨线程异步操作。

三、Dart 基础

  • Dart 属于是强类型语言 ，但可以用 var 来声明变量，Dart 会自推导出数据类型，var 实际上是编译期的“语法糖”。dynamic 表示动态类型， 被编译后，实际是一个 object 类型，在编译期间不进行任何的类型检查，而是在运行期进行类型检查。

  • Dart 中 if 等语句只支持 bool 类型，switch 支持 String 类型。

  • Dart 中数组和 List 是一样的。

  • Dart 中，Runes 代表符号文字 , 是 UTF-32 编码的字符串, 用于如 Runes input = new Runes('\u{1f596} \u{1f44d}');

  • 赋值操作符
    比较有意思的赋值操作符有：

AA ?? "999"  ///表示如果 AA 为空，返回999
AA ??= "999" ///表示如果 AA 为空，给 AA 设置成 999
AA ~/999 ///AA 对于 999 整除

  • 可选方法参数
    Dart 方法可以设置 参数默认值 和 指定名称 。
    比如： getDetail(Sting userName, reposName, {branch = "master"}){} 方法，这里 branch 不设置的话，默认是 “master” 。参数类型 可以指定或者不指定。调用效果： getRepositoryDetailDao(“aaa", "bbbb", branch: "dev"); 。

  • 作用域
    Dart 没有关键词 public 、private 等修饰符，_ 下横向直接代表 private ，但是有 @protected 注解 。

  • 构造方法
    Dart 中的多构造方法，可以通过命名方法实现。
    默认构造方法只能有一个，而通过 Model.empty() 方法可以创建一个空参数的类，其实方法名称随你喜欢，而变量初始化值时，只需要通过 this.name 在构造方法中指定即可：

class ModelA {
  String name;
  String tag;

  //默认构造方法，赋值给name和tag
  ModelA(this.name, this.tag);

  //返回一个空的ModelA
  ModelA.empty();

  //返回一个设置了name的ModelA
  ModelA.forName(this.name);
}
  • getter setter 重写
    Dart 中所有的基础类型、类等都继承 Object ，默认值是 NULL， 自带 getter 和 setter ，而如果是 final 或者 const 的话，那么它只有一个 getter 方法，Object 都支持 getter、setter 重写：
  @override
  Size get preferredSize {
    return Size.fromHeight(kTabHeight + indicatorWeight);
  }

  • Assert(断言)
    assert 只在检查模式有效，在开发过程中，assert(unicorn == null); 只有条件为真才正常，否则直接抛出异常，一般用在开发过程中，某些地方不应该出现什么状态的判断。

  • 类、接口、继承
    Dart 中没有接口，类都可以作为接口，把某个类当做接口实现时，只需要使用 implements ，然后复写父类方法即可。
    Dart 中支持 mixins ，按照出现顺序应该为extends 、 mixins 、implements 。

四、Dart 基础数据类型

Dart Android iOS
null null nil(NSNull when nested) | 0
bool java.lang.Boolean NSNumber numberWithBool:
int java.lang.Integer NSNumber numberWithInt:
int,if 32 bits not enough java.lang.Long NSNumber numberWithLong:
int,if 64 bits not enough java.math.BigInteger
double java.lang.Double NSNumber numberWithDouble:
String java.lang.String NSString
Uint8List byte[]
Int32List int[]
Int64List long[]
Float64List double[]
List java.util.ArrayList NSArray
Map java.util.HashMap NSDictionary

Dart 中 number 类型分为 int 和 double ，没有 float 类型。

五、Zone

Dart 中可通过 Zone 表示指定代码执行的环境，类似一个沙盒概念，在 Flutter 中 C++ 运行 Dart 也是在 _runMainZoned 内执行 runZoned 方法启动，而我们也可以通过 Zone ，在运行环境内捕获全局异常等信息:

  runZoned(() {
    runApp(FlutterReduxApp());
  }, onError: (Object obj, StackTrace stack) {
    print(obj);
    print(stack);
  });

同时可以给 runZoned 注册方法，在需要时执行回调，如下代码所示，这样的在一个 Zone 内任何地方，只要能获取 onData 这个 ZoneUnaryCallback，就都可以调用到 handleData

///最终需要处理的地方
handleData(result) {
  print("VVVVVVVVVVVVVVVVVVVVVVVVVVV");
  print(result);
}

///返回得到一个 ZoneUnaryCallback 
var onData = Zone.current.registerUnaryCallback<dynamic, int>(handleData);

///执行 ZoneUnaryCallback 返回数据
Zone.current.runUnary(onData, 2);

异步逻辑可以通过 scheduleMicrotask 可以插入异步执行方法：

Zone.current.scheduleMicrotask((){
  //todo something
});

六、十大特性

编程语言总是朝着轻便化前进， Dart 也不例外。

6.1 字符串插值（字符串运算+替换）

print('${3 + 2}')  // '5'
print('${"word".toUpperCase()}')  // 'WORD'
print('$myObject')  // The value of myObject.toString()

6.2 ？？ 和 ？？= 运算符

”a ??= b“: 先判断变量 a 是否为 null,如果为 null 则将b的值赋予a,否则跳过； 
”a ?? b“ 这里的a和b针对的是表达式， 当表达式a不为null， 返回a； 如果a为null， 返回b。其实 ?? 和 ??= 差不多， 只不过 ?? 第一个值为表达式，而 ??= 第一个值为变量。
“a ? b :c” 三元表达式
“?.” ： 看下面的例子

int a; // Dart变量初始值为null，不为0或者其他值
a ??= 3;
print(a); // 3.

a ??= 5;
print(a); // a 的值仍然为 3.

print(1 ?? 3); // 打印 1.
print(null ?? 12); // 打印 12.

myObject?.someProperty   
等价于
(myObject != null) ? myObject.someProperty : null

6.3 箭头函数（=>）

当函数的返回语句只有一句时，可以用箭头函数代替，算是 Dart 里面最常用的了

void main() {
  void helloWorld() => print("hello world");
  helloWorld();

  /*
    等价于
    void helloWorld() {
      print("hello world");
    }
  */
}

6.4 级联器（..）

class Rectangle {
  int width;
  int height;
  // 等价于 int area() => width * height;
  int area() {
    return this.width * this.height;
  }
}

void main() {
  // 初始化一个对象
  Rectangle r = Rectangle()
  ..width = 10
  ..height = 20;

  /*
    等价于
    Rectangle r = Rectangle();
    r.width = 10;
    r.height = 20;  
  */

  print(r.area());  // 200
  print(r..area()); // Instance of 'Rectangle'

  // 看不到东西，但实际上执行了area函数
  Rectangle()
  ..width = 20
  ..height = 20
  ..area();
}

6.5 getter 和 setter 选择器

class MyClass {
  int _aProperty = 0;

  int get aProperty => _aProperty;

  set aProperty(int value) {
    if (value >= 0) {
      _aProperty = value;
    }
  }
}

等价于

class MyClass2 {
  int _aProperty = 0;

  int getAProperty() {
    return _aProperty;
  }

  void setAProperty(int value) {
    if (value >= 0) {
      _aProperty = value;
    }
  }
}

6.6 可选参数

// Dart有两种形式的可选参数，第一种是可选位置参数，另一种是可选命名参数（用得比较多）
- 位置参数： [String param1, String param2]
- 命名参数: {String param1, String param2}

两者选其一

// 必选参数
int sum(int a, int b) {
  return a + b;
}
print(sum(1, 2));  // 3

// 可选位置参数
int sum(int a, int b, [int c]) {
  if (c != null) { 
    return a + b + c;
  }
  return a + b;
}
print(sum(1, 2));  // 3
print(sum(1, 2, 3));  // 6

// 可选命名参数
int sum(int a, int b, {int c}) {
  if (c != null) { 
    return a + b + c;
  }
  return a + b;
}
print(sum(1, 2));  // 3
print(sum(1, 2, c: 3));  // 6

6.7 构造器简便写法

class MyColor {
  int red;
  int green;
  int blue;

  MyColor(this.red, this.green, this.blue);
  /* 等价于
  MyColor() {
      this.red = red;
      this.green = green;
      this.blue = blue;
  } */

}

final color = MyColor(80, 80, 128);

6.8 Initializer lists

序列化和反序列化

class User {
  String user;
  String pwd;

  User();
  // fromJson构造器，用于赋初值（Initializer lists）, 并对传入的值进行校验（这部分可省略）
  User.fromJson(Map<String, dynamic> json):
    assert(json['user'] != ""), assert(json['pwd'] != ""),
    user = json['user'], pwd = json['pwd'];
  /*
    等价于
    static User fromJson(Map<String, dynamic> json){
      User u = new User();
      u.user = json['user'];
      u.pwd = json['pwd'];
      return u;
    }
  */

  // 这个例子其实就是Dart中json数据的序列化和反序列化， fromJson是序列化，toJson是反序列化
  Map<String, dynamic> toJson() => {
    'user': user,
    'pwd': pwd,
  };

  /*
    等价于
    Map<String, dynamic> toJson() {
      var map = new Map<String, dynamic>();
      map['user'] = user;
      map['pwd'] = pwd;
      return map;
    }
  };

  */


}

void main() {
  Map<String, dynamic> testData = {'user': 'aa', 'pwd': 'bb'};
  User u = User.fromJson(testData); 
  print(u); // Instance of 'User'

  Map testDataR = u.toJson();
  print(testDataR);  // {user: aa, pwd: bb}
}

6.9 命名构造器（Named constructors）

命令构造器，官方文档只解释说“命名构造器的作用是为了让一个类有多个构造器”。我们可以通过"类名.自定义名" 来创建构造器， 如下面的 Point.origin()， Point.helloWorld()， 你想定义什么名字就什么名字，这才明白命名构造器的含义。

class Point {
  num x, y;

  Point({this.x, this.y});  // 与官方文档不同

  Point.origin() {
    x = 0;
    y = 0;
  }

  Point.helloWorld() {
  x = 1;
  y = 1;
}
}

final myPoint1 = Point();
final myPoint2 = Point.origin();
print(myPoint1.x);  // null
print(myPoint2.y);  // 0

6.10 工厂构造器（Factory constructors）

Java的工厂模式

public interface Shape {
   void draw();
}

public class Square implements Shape {
   @Override
   public void draw() {
      System.out.println("Inside Square::draw() method.");
   }
}

public class Circle implements Shape {
   @Override
   public void draw() {
      System.out.println("Inside Circle::draw() method.");
   }
}

public class ShapeFactory {
   //使用 getShape 方法获取形状类型的对象
   public Shape getShape(String shapeType){
      if(shapeType == null){
         return null;
      }        
      if(shapeType.equalsIgnoreCase("circle")){
         return new Circle();
      } else if(shapeType.equalsIgnoreCase("square")){
         return new Square();
      }
      return null;
   }
}

public class FactoryPatternDemo {
   public static void main(String[] args) {
      ShapeFactory shapeFactory = new ShapeFactory();
      //获取 Circle 的对象，并调用它的 draw 方法
      Shape shape1 = shapeFactory.getShape("circle");
      shape1.draw();
      //获取 Square 的对象，并调用它的 draw 方法
      Shape shape3 = shapeFactory.getShape("square");
      shape3.draw();
   }
}

Dart 的工厂模式

// 比Java的更简洁， 但思想不变，其中Shape.fromTypeName可以自定义为其他名字，比如Shape.fromType
class Square extends Shape {
  @override
  void draw() => print("Inside Square::draw() method.");
}

class Circle extends Shape {
  void draw() => print("Inside Circle::draw() method.");
}

class Shape {
  Shape();

  void draw(){}

  factory Shape.fromTypeName(String typeName) {
    if (typeName == 'square') return Square();
    if (typeName == 'circle') return Circle();

    print('I don\'t recognize $typeName');
    return null;
  }
}

Shape shape = Shape();
shape.draw();

Shape square = Shape.fromTypeName('square');
square.draw();
Author | xmamiga
移动应用开发者