Flutter开发之旅:从源码赏析Dart面向对象

2019-07-0608:05:24编程语言入门到精通Comments3,417 views字数 9641阅读模式

1.面向对象的条件

1.1:三大特性

首先房子、车子、票子要有的吧,不然还面个什么对象?其次面向对象思想要到位,准备的三大件:封装、继承、多态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

1.1.1:封装的思想

下面这东西大家应该见过,是一个电子元件,它能很好地说明封装的特性。每个电子元件都有暴露在外的引脚。这些脚分为输入和输出。使用一个电子元件时,我们只是关心输入和输出的情况,也就是它的真值表,对他内部的构成是不关心的。
所以一个电子元件对硬件组装师而言,就是一个有引脚的黑块,一个能够完成特定功能的逻辑单元。类比一下三方类库,在引入之后,不需要知道库的具体实现逻辑,只要按照暴露的API(真值表),你进行一个API的调用(输入),就会完成特定的功能(输出)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html


类也是这样,最终目的是要实现逻辑的复用,让其成为一个可独立存在的逻辑单元,从而和其他类共同运作。但是现在与上面所不同的是:我们不单单是一个使用者,更多角色的是它的设计者。所以需要考虑的要点不仅是此类和其他类如何契合运作,更重要的是它的内部构成。
要知道,使用一个电子元件,和设计制造一个电子元件是完全不同的,而程序设计师显然是后者。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html


1.1.2:继承的思想

一个人的出生并非是一无所有,它享有着父母的资产,人脉,地位。这些都是他可以使用的资源。 这就无需艰苦奋斗来达到当前的境地,从而能够在未来的发展中更上一层。当然,类也是这样,子类通过继承可以享受到父类所带来的'天赋'。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

这就涉及到了一个概念,叫抽象。抽象并非随便抽的,不以解决问题为前提的抽象都是耍流氓,通过抽象来提取对象的公共特征,形成基类。这相当于是父母在努力打拼,想为孩子打造一个适宜的生存环境。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

还有一点就是:孩子不一定继承父亲的一切,有些东西是父亲不想给孩子的,这就涉及到继承的访问限制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html


1.1.3:类的多态

一个人在社会中可以拥有多个角色,比如捷特在学校是一个学生、在公司是程序员、在周末是一个男朋友、在旅行中是一个游客,这就是一个对象的不同状态,简称:多态。
多态有什么优势,比如:有人喊,来个学生搬桌子,捷特就可以以学生的身份过去;周末妹子约,捷特就可以男朋友的身份过去;有人喊,来个程序员敲改bug,捷特也能跑过去。
下面写段伪代码,这样的优势在于使用对象的那个方法只需要针对接口即可,并不需要传入Me对象。如果pickDesk,date,fixBug全部传入Me对象,虽然能运行,但是不利于拓展和维护。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

class Me implements Pickable,Kissable,Codeable{

}

pickDesk(Pickable student){
  student.pick(this);
}

date(Kissable boyfriend){
  if(boyfriend.getId == this.id){
    boyfriend.kiss(this);
  }
}

fixBug(Codeable coder){
  coder.debug(this);
}
复制代码

好了,罗里吧嗦一堆,下面开始进入正题,给你介绍Dart的面向对象,一般说面向对象都是个Person,在加个Student什么的。
虽说没什么不好,但感觉很平淡无奇,既然咱们都是有面向对象经验的人,直接去源码里找对象面面呗,这样才惊险,刺激。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html


2.从Size一族开始说起

我一直在想通过那个类的源码开始说比较好,最好不要太长,也不要太难,Size就比较完美。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

2.1.类的定义

class 关键字定义类,没毛病,extend 继承关键字,也很OK。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

---->[sky_engine/lib/ui/geometry.dart:347]-------
class Size extends OffsetBase {
复制代码

2.2.抽象类的定义

Size继承自OffsetBase,那就来看一下OffsetBase。首先它是一个抽象类,使用的关键字也是abstract。
其中有一个构造方法,传入两个参数,分别是水平和竖直的值。注意构造方法的书写形式是和Java有所区别的。
其中封装了两个私有属性:_dx_dy文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

---->[sky_engine/lib/ui/geometry.dart:9]-------
abstract class OffsetBase {
  const OffsetBase(this._dx, this._dy);//构造函数

  final double _dx;
  final double _dy;
}
复制代码

2.3:方法

不知大家看到下面的代码感觉如何,反正我感觉挺别扭,也许不太熟悉吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

//是否无法衡量的
bool get isInfinite => _dx >= double.infinity || _dy >= double.infinity;
//是否有限
bool get isFinite => _dx.isFinite && _dy.isFinite;

看着有点吓人,不过才刚开始,可以慢慢分析,上面这句如果看得眼花缭乱,
我改写了一下,下面的应该可以看懂吧,意思就是如果_dx和_dy有一个超过double的范围就返回true

bool isInfinite() {
    return _dx >=double.infinity || _dy >= double.infinity;
}

注意一点:在Java中常用isXXX,Dart 里的get关键字可以让调用简洁,使用如下
var size= Size(30,40);
print(size.isInfinite);//false
复制代码

2.4:运算符重载

这段代码看了三秒钟,箭头太多,愣是没反应过来,仔细一想,这不会是运算符重载吧,和C++的有点神似。下面是分别对<、<=、>、>=、==的运算符重载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html


bool operator <(OffsetBase other) => _dx < other._dx && _dy < other._dy;
bool operator <=(OffsetBase other) => _dx <= other._dx && _dy <= other._dy;
bool operator >(OffsetBase other) => _dx > other._dx && _dy > other._dy;
bool operator >=(OffsetBase other) => _dx >= other._dx && _dy >= other._dy;

@override
bool operator ==(dynamic other) {
  if (other is! OffsetBase)//如果传入对象不是OffsetBase
    return false;//直接滚
  final OffsetBase typedOther = other;
  return _dx == typedOther._dx &&//判断是否相等
         _dy == typedOther._dy;
}

使用方式:
var size= Size(30,40);
var size2= Size(10,20);
print(size>size2);//true
复制代码

2.5:哈希值和toString

和Java比较像,没啥好说的。这里要插一句,看源码的时候,最好自己留心一下源码中的书写风格,毕竟和大佬看起是很必要的,比如命名的风格,注释的风格等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

@override
int get hashCode => hashValues(_dx, _dy);

@override
String toString() => '$runtimeType(${_dx?.toStringAsFixed(1)}, ${_dy?.toStringAsFixed(1)})';
复制代码

OK,这样一个OffsetBase对象就面完了,紧不紧张,刺不刺激。下面继续看Size文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html


2.6:构造Size对象方法

注意了,这里圈起来,要考的。使用父类的构造方法来完成本类的构造个语法格式:类名(参数,...):super(参数,...)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

  
class Size extends OffsetBase {
  /// 根据给定的宽高创建Size对象
  const Size(double width, double height) : super(width, height);
复制代码

在联想一下初始项目中的让人蒙圈的这句话,是不是豁然开朗。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
复制代码

然后就是一堆构造Size对象的方法,总的来说就是,不管怎样,你给我弄两个值来当宽高文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

  Size.copy(Size source) : super(source.width, source.height);
  const Size.square(double dimension) : super(dimension, dimension);
  const Size.fromWidth(double width) : super(width, double.infinity);
  const Size.fromHeight(double height) : super(double.infinity, height);
  const Size.fromRadius(double radius) : super(radius * 2.0, radius * 2.0);

  static const Size zero = const Size(0.0, 0.0);
  static const Size infinite = const Size(double.infinity, double.infinity);
复制代码

2.7:Size中的属性封装

有了老爹之后,Size类就可以使用老爹的“财富”,这里Size为了形象,将老爹的东西名字都给改了。
类存在的价值之一在于封装属性及调动属性之间的关系完成特定功能,比如aspectRatio可以获取宽高比。 对于任意Size对象,在任意时间,任意空间,都可以调用aspectRatio方法获取宽高比,这是面向过程所不能及的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

  double get width => _dx;
  double get height => _dy;

  double get aspectRatio {
    if (height != 0.0)
      return width / height;
    if (width > 0.0)
      return double.infinity;
    if (width < 0.0)
      return double.negativeInfinity;
    return 0.0;
  }
复制代码

2.8:继承的优势

上面OffsetBase说到运算符重载,在Size类中也有运算符重载,这些是尺寸的四则运算,然而Size依旧可以使用OffsetBase中重载过的运算符,这就是有老爹的优势。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

OffsetBase operator -(OffsetBase other) {
  if (other is Size)
    return new Offset(width - other.width, height - other.height);
  if (other is Offset)
    return new Size(width - other.dx, height - other.dy);
  throw new ArgumentError(other);
}
Size operator +(Offset other) => new Size(width + other.dx, height + other.dy);
Size operator *(double operand) => new Size(width * operand, height * operand);
Size operator /(double operand) => new Size(width / operand, height / operand);
Size operator ~/(double operand) => new Size((width ~/ operand).toDouble(), (height ~/ operand).toDouble());
Size operator %(double operand) => new Size(width % operand, height % operand);
复制代码
2.9.看Offset类

继承会让孩子具有先天优势,那么两个孩子岂不是更加物尽其用。定义一个父类就是为了能够更好的拓展,OffsetBase自然也不例外。
Size对象描述了一个类似框框的对象,那么Offset描述的便是位移。两者有一个共同的特点,那就是有两个数值类的属性。这也是OffsetBase被抽象出来的原因。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

class Offset extends OffsetBase {
  //构造方法
  const Offset(double dx, double dy) : super(dx, dy);
  factory Offset.fromDirection(double direction, [ double distance = 1.0 ]) {
    return new Offset(distance * math.cos(direction), distance * math.sin(direction));
  }
  
  static const Offset zero = const Offset(0.0, 0.0);
  static const Offset infinite = const Offset(double.infinity, double.infinity);

  double get dx => _dx; //水平位移
  double get dy => _dy; //数值位移
  
  //方法:属性的处理
  double get distance => math.sqrt(dx * dx + dy * dy);//移动距离
  double get distanceSquared => dx * dx + dy * dy;//移动距离的平方
  Offset scale(double scaleX, double scaleY) => new Offset(dx * scaleX, dy * scaleY);//缩放
  Offset translate(double translateX, double translateY) => new Offset(dx + translateX, dy + translateY);//移动
  
 //运算符重载
  Offset operator -() => new Offset(-dx, -dy);
  Offset operator -(Offset other) => new Offset(dx - other.dx, dy - other.dy);
  Offset operator +(Offset other) => new Offset(dx + other.dx, dy + other.dy);
  Offset operator *(double operand) => new Offset(dx * operand, dy * operand);
  Offset operator /(double operand) => new Offset(dx / operand, dy / operand);
  Offset operator %(double operand) => new Offset(dx % operand, dy % operand);

  Rect operator &(Size other) => new Rect.fromLTWH(dx, dy, other.width, other.height);

  //略....

  @override
  int get hashCode => hashValues(dx, dy);

  @override
  String toString() => 'Offset(${dx?.toStringAsFixed(1)}, ${dy?.toStringAsFixed(1)})';
复制代码
2.10:小结

这是三个类比较简单,很适合刚入门Dart的伙伴读读,关系简单画一下。
现在你应该对Dart中类的创建,属性,方法的书写以及类的继承有所理解了吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html


3.Dart中的接口与枚举

与Java不同,Dart中的接口定义依然是abstract关键字,接口和抽象类本质上并没有区别,都是对一类事物的抽象,只不过接口更倾向于提取事物的能力。比如Comparable接口和Pattern接口。Flutter开发之旅:从源码赏析Dart面向对象文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

3.1 :接口的定义

Comparable定义了一个抽象方法compareTo,用来和另一个对象进行比较,也就是这个接口的功能是作比较。
Pattern接口的功能是:匹配字符串,获得一个可迭代的匹配结果集。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

---->[sky_engine/lib/core/comparable.dart:72]----------
abstract class Comparable<T> {

  int compareTo(T other);
  
  static int compare(Comparable a, Comparable b) => a.compareTo(b);
}

---->[sky_engine/lib/core/pattern.dart:72]----------
abstract class Pattern {
  Iterable<Match> allMatches(String string, [int start = 0]);
  Match matchAsPrefix(String string, [int start = 0]);
}
复制代码

3.2:Dart中的接口

实现接口的类拥有该接口的功能。可以看出num是实现了Comparable接口的,可以说明它有作比较的能力。
接口的实现和Java一样,是关键字implements。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

abstract class num implements Comparable<num> {

复制代码

3.3:实现多个接口

Dart中的接口也是支持多实现的,用逗号隔开。比如String即实现Comparable,也实现了Pattern,
说明String同时可具有这两种功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

abstract class String implements Comparable<String>, Pattern {
复制代码

3.4:枚举类型

枚举通常用来表示相同类型的一组常量,用关键字enum来表示。
枚举对象可以结合switch做分支处理。
另外Dart中的枚举元素具有索引,从0开始,依次计数,用index属性访问。 说到枚举,我首先想到的就是Paint的头,就用这个类来说明一下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

Flutter开发之旅:从源码赏析Dart面向对象
---->[sky_engine/lib/ui/painting.dart:833]----------
enum StrokeCap {
  butt,//无头(默认)
  round,//圆型
  square,//方形
}

使用:
var paint= Paint();
paint.strokeCap=StrokeCap.round;//圆型
print(StrokeCap.round.index);//1
复制代码

看来源码中的几个类,面向对象也基本上能有个认识。下面来自定义个二位向量总结一下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html


4.自定义向量类Vector2

4.1:定义Vector2类与使用

这里定义了Vector2类,包含两个数值分别是横纵坐标,构造函数用最原始的方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

class Vector2{
  num x;
  num y;

  Vector2(num x, num y) {
    this.x = x;
    this.y = y;
  }
}

main(){//使用
  var v1=Vector2(3,4);
  print('(${v1.x},${v1.y})');//(3,4)
}
复制代码

4.2:构造函数的简写

通过简写,可以使构造函数简洁明了,同时也能实现等价功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

class Vector2{
  num x;
  num y;
  Vector2(this.x,this.y);
}
复制代码

4.3:命名构造函数

源码中经常会出现XXX.formXXX来构造对象文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

class Vector2{
  num x;
  num y;
  Vector2.fromMap(Map<String,num> point){
    this.x = point['x'];
    this.y = point['y'];
  }
}

main(){//使用
  var v2= Vector2.fromMap({'x':5,'y':6});
  print('(${v2.x},${v2.y})');//(5,6)
}
复制代码

4.4:定义方法
  double get distance => sqrt(x * x + y * y); //向量的模
  double get rad => atan2(y, x); //与x正方向夹角(弧度制)
  double get angle => 180 / pi * atan2(y, x); //与x正方向夹角(角度制)
复制代码

4.5:定义一个操作接口
abstract class Operable{
  void reflex();//反向
  void reflexX();//X反向
  void reflexY();//Y反向

  void scale(num xRate,num yRate);//缩放
  void translate(num dx,num dy);//平移
  void rotate(num deg,[isAnticlockwise=true]);//旋转
}
复制代码

4.6:继承接口,实现方法
class Vector2 implements Operable{
  num x;
  num y;
  Vector2(this.x,this.y);

  Vector2.fromMap(Map<String,num> point){
    this.x = point['x'];
    this.y = point['y'];
  }

  @override
  void reflex() {
    this.x=-x;
    this.y=-y;
  }

  @override
  void reflexX() {
    this.x=-x;
  }

  @override
  void reflexY() {
    this.y=-y;
  }

  @override
  void rotate(num deg, [isAnticlockwise = true]) {
    var curRad = rad + deg*pi/180;
    this.x=distance*cos(curRad);
    this.y=distance*sin(curRad);
  }

  @override
  void scale(num xRate, num yRate) {
    this.x *=xRate;
    this.y *=yRate;
  }

  @override
  void translate(num dx, num dy) {
    this.x +=dx;
    this.y +=dy;
  }
  
  @override
  String toString() {
    return '(${this.x},${this.y})';
  }
}
复制代码

4.7:运算符重载

现学现卖,运算符重载一下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

//运算符重载
Vector2 operator +(Vector2 other) => Vector2(x + other.x, y + other.y);
Vector2 operator -(Vector2 other) => Vector2(x - other.x, y - other.y);
num operator *(Vector2 other) => x * other.x + y * other.y;
复制代码

这个类就先这样,以后有需要继续改进。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html


4.8:测试
main() {
  var v1 = Vector2(3, 4);
  print(v1); //(3,4)
  print(v1.distance); //5.0
  print(v1.angle); //53.13010235415598
  v1.rotate(37);
  print(v1); //(-0.011353562466313798,4.0000058005648444)
  
  var v2 = Vector2.fromMap({'x': 5, 'y': 6});
  print(v2); //(5,6)
  v2.reflex();
  print(v2);//(-5,-6)
  
  var v3 = Vector2(2, 2);
  var v4 = Vector2(3, 2);
  print(v4 - v3); //(1,0)
  print(v4 + v3); //(5,4)
  print(v4 * v3); //10
}

作者:张风捷特烈
链接:https://juejin.im/post/5d1ef5b66fb9a07ed7409d1e
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13981.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/ymba/13981.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定