Flutter圈子

Flutter的优势以及Dart基础语法

2020-03-15  本文已影响0人  86050d85fb4b

1.为什么要学习Flutter?

对于移动端开发人员来说，跨平台技术一直是关注的重点，从H5,React Native到Flutter,我们似乎一直在寻找一种能“一套代码，多端运行”，同时还能有不俗的用户体验的技术。对于当前的大前端来说，React Native的综合成熟度和生态都要比Flutter好一些，对于中短期项目我们可能会选用前者，但是对于更长期的项目和发展来说，Flutter是一种更彻底的解决方案，渲染能力和平台一致性以及性能，它都具有更大的优势。

明白了为什么要学习Flutter，我们就更能坚定我们的脚步，要学好Flutter，就要先学习它的开发语言Dart，下面我们来看看Dart基础语法：

2.Dart基础语法

数据类型及其相关
含义 使用
int 整数，范围为 -2^63 到 2^63 - 1. int x = 1;//没有小数点就是int
double 浮点数，64位（双精度）浮点数 double y = 1.1;//有小数点就是浮点数
num num 是数字类型，既可以表示整数，也可以表示浮点数，具体看赋的值 num x = 1;//num x是整数 num y = 1.1;//num y是浮点数
String 字符串 Dart字符串采用UTF-16编码 可以使用单引号或双引号来创建字符串 var s1 = 'string'; var s2 = "string";字符串拼接采用“+”
bool 布尔值 var isTrue = true;
List List<E> E 表示 List 里的数据类型 用中括号来赋值 List<int> list = [1, 2, 3];
Set Set<E> E 表示 Set 里的数据类型 用大括号来赋值 Set<String> halogens = {'fluorine', 'chlorine', 'bromine', 'iodine', 'astatine'};
Map Map<K, V> K 是 Key 的数据类型,V是 Value 的数据类型 Map<String,String> gifts = { // Key: Value 格式 'first': 'partridge', 'second': 'turtledoves', 'fifth': 'golden rings'};
Runes 表示采用 UTF-32 的字符串，用于显示 Unicode 因为Dart字符串是UTF-16，因此在Dart中表示32位的Unicode值需要Runes这个特殊语法。 Runes input = new Runes('\u{1f600}'); print(new String.fromCharCodes(input)); 打印出来是笑脸emoji：😆
函数
//要达到可选命名参数的用法，那就在定义函数的时候给参数加上 {}
void test1Flags({bool bold, bool hidden}) => printTest("$bold , $hidden");

//定义可选命名参数时增加默认值
void test2Flags({bool bold = true, bool hidden = false}) => printTest("$bold ,$hidden");

//可忽略的参数在函数定义时用[]符号指定
void test3Flags(bool bold, [bool hidden]) => printTest("$bold ,$hidden");

//定义可忽略参数时增加默认值
void test4Flags(bool bold, [bool hidden = false]) => printTest("$bold ,$hidden");

//可选命名参数函数调用
test1Flags(bold: true, hidden: false); //true, false
test1Flags(bold: true); //true, null
test2Flags(bold: false); //false, false

//可忽略参数函数调用
test3Flags(true, false); //true, false
test3Flags(true,); //true, null
test4Flags(true); //true, false
test4Flags(true,true); // true, true

但是不可以同时把这符号同时放到同一个函数声明下面，比如：

void testFun({int a},[int b]){} //错误的写法

void main() => runApp(MyApp());
等价于
void main(){
    return runApp(MyApp());//runApp() 返回的是 void
}

class TestA {
  num x, y, z;
  
  TestA(this.x, this.y) : z = 0; // 初始化变量z
  TestA.bottom(num x) : this(x, 0); // 重定向构造函数
  TestA.top():x=3; //重定向构造器
  
  void printInfo() => print('($x,$y,$z)');
}

var p = TestA.bottom(100);
p.printInfo(); // 输出(100,0,0)
var p = TestA.top();
p.printInfo(); // 输出(3,0,0)

对于这种写构造器的方式，和我们用Java自定义控件构造器嵌套有着异曲同工之妙。

复用（extends,implement,mixin,on）

class TestA{
  num x,y,z;

  TestA(this.x,this.y):z =0;
  TestA.bottom(num x):this(x,0);
  TestA.top():x=3;
  
  void testCall() => print("($x=======,$y======)");

}

class TestB extends TestA{
  TestB(num x, num y) : super(x, y);
  
  @override
  void testCall() { //重写testCall的实现
    // TODO: implement testCall
    super.testCall();
  }
}

class TestC implements TestA{
  @override
  num x;

  @override
  num y;

  @override
  num z;

  @override
  void testCall() {  //必须实现该方法
    // TODO: implement testCall
  }
}

可以看到，对于接口的实现方式，我们只是拿到了TestA的一个空壳子，不能复用原有的实现，这个时候，我们可以用混入(Mixin)，混入鼓励代码重用，可以视为具有实现方法的接口，不仅可以解决Dart缺少多重继承的问题，同时也能避免多重继承可能导致的歧义(菱形问题)。要使用混入，我们需要使用with关键字，但是对于混入也有一定的要求，被混入的类不能有自己的构造器，否则就会提示错误。

class D{
  
  num x,y;
  D(this.x,this.y);
  void testCall() => print("($x=======,$y======)");
}

class E with D{  //编译失败，提示D类不能被混入，因为已经定义了构造器。
  
}

至于为什么不能能用构造器，我觉得Mixin目前的实现是以完全忽略构造函数，忽略构造函数调用链的方式实现的，因此只支持隐式的构造函数。一旦放开mixin的构造函数支持，Dart势必需要支持一套新的关键字语法，来支持Mixin类继承链上的构造转发，代价太大。

class F{

}

mixin G on F{

}

class H extends F with G{ //必须先继承F类才可以，如果F是接口，那就必须先实现接口F

}
运算符

这里列出一些常用的表达，过于简单的就不列出来了：

操作符 含义 例子
as 类型转换 (emp as Person).firstName = 'Bob';<br />如果emp为null，抛出异常
is 判断是否是某个类型,如果是的话，就返回 true if (emp is Person) {
// 如果 emp 是 Person 类型
emp.firstName ='Bob';
}<br />如果emp 为null ,返回false
is! 判断是否不是某个类型，如果不是的话，就返回 true if (emp is! Person) {
// 如果 emp 不是 Person 类型
} <br /><br /如果emp 为null ,返回false
?. 类似于kotlin中的空安全，为空跳过下面的逻辑，避免抛出异常
??= 用默认值兜底的一种方式 a??=value，如果a为null，则给a赋值value，否则跳过
?? 类似于三元表达式 a ?? b 类似于(a != null)? a : b
.. 级联操作符，允许你对同一对象进行一系列的操作。 querySelector('#confirm') // Get an object.
..text = 'Confirm' // Use its members.
..classes.add('important')
..onClick.listen((e) => window.alert('Confirmed!'))		 
// 自定义相加运算符，实现向量相加 
Vector operator +(Vector v) => Vector(x + v.x, y + v.y); 
// 覆写相等运算符，判断向量相等 
bool operator == (dynamic v) => x == v.x && y == v.y;

3.写在最后

最近在研究Flutter，写这篇文章也是做一个简单的终结，希望更多的人加入Flutter的开发当中，最近开了一个淘宝店铺，店铺名字叫“程哥的日用百货铺”，这里附上链接 https://shop105359436.taobao.com/?spm=a1z10.1-c-s.0.0.c1b42dd2nh1YwP ，希望大家多多支持！

掘金链接：https://juejin.im/post/5e6ca09d6fb9a07c89151eda

上一篇下一篇

猜你喜欢

热点阅读