前端的flutter之路（一）：语法

刚开始学习flutter的话，我的感受并不须要太多的dart语法知识，因此下面就只是简单的说一下js和dart的语法差别（一开始有的语法看的不是很懂，致使看的老是只知其一;不知其二的）。

字符串的差别

dart中字符串的表示方法有不少：

1. 单引号 'Single quotes work well for string literals.'
2. 双引号 "Single quotes work well for string literals."
3. 多行字符串，

'''Single quotes work well for string literals. dsa'''
复制代码

"""Single quotes work well for string literals. dsa"""
复制代码

4. raw string，在前几种表示方式以前加上r便可。 r"Single quotes work well for string literals."

5. 字符串拼接，跟js不一样，+无关紧要。好比'test '"string"和'test ' + "string"都是能够的。

6. 使用变量，$name或者 ${name}均可以，前一种方法的后面不能直接跟字符串，要用空格或者逗号等方式隔开

String name = 'hello';
print('$name string'); // hello string
print('${name} string'); // hello string
复制代码

布尔值的转换

在js中，使用判断的时候空字符串，0，null，undefined都会被转换为false。

可是在dart中，判断条件就只能用bool值，若是是其余类型的数据，就会抛出类型错误。

List

dart中的List和js中的数组比较像，均可以使用..展开数组。

List list = [1, 2, 3];
List list2 = [0, ...list];
复制代码

不一样点：

• ...? 防止被扩展数组为null的时候程序报错

var list;
var list2 = [0, ...?list];
复制代码

• 使用List<变量类型>声明后，该数据中就只能存放同种类型的数据，而不是随意混合
• 忽然发现dart2.3之后支持在List中直接使用表达式了
• 判断语句

var nav = [
 'Home',
 'Furniture',
 'Plants',
 if (promoActive) 'Outlet'
];
复制代码

• 循环语句

var listOfInts = [1, 2, 3];
var listOfStrings = [
 '#0',
 for (var i in listOfInts) '#$i'
];
复制代码

Map和js中的对象

// var gifts = Map();
var gifts = {'first': 'partridge'};
gifts['second'] = 'partridge';
复制代码

注意：

• 存取时都只能经过['键名']的方式访问值，而不能用.操做符，由于dart算是一个强类型语言，Map并不知道它自己有这个键，因此用.就会报错
• 定义时键名若是是字符串，不能像js同样省略

在某种意义上来讲，dart的类实例和js的对象也比较像，能够经过.操做符访问某个键的值，毕竟声明过了嘛，哈哈。

初学dart的前端可能常常分不清Map和类实例，就以为不都是对象嘛，怎么访问不到呢？这里教你们一个方法：使用 print(变量);若是是Map，打印出来就相似js中的对象，而若是是类实例，打印出来就是Instance of '类'。

其实这种困惑主要发生在使用网络请求后，其实返回的不是List就是Map，要想使用.操做符的话，就须要本身转换类型了。json转model的话能够看看这个

函数

dart函数的参数分为 positional parameters（位置参数） 和 named parameters（命名参数）。

// positional parameters（位置参数,默认必传）
bool isNoble(int atomicNumber) {
 return atomicNumber != null;
}

// named parameters（命名参数,默承认选）
bool isNoble({ int atomicNumber }) {
 return atomicNumber != null;
}
复制代码

调用

// positional parameters（位置参数）
isNoble(1);

// named parameters（命名参数）
isNoble(atomicNumber: 1);
复制代码

参数可选和必填：

// positional parameters（位置参数,默认必传,用[]表示可选）
bool isNoble([int atomicNumber]) {
 return atomicNumber != null;
}

// named parameters（命名参数,默承认选，使用@required表示必传）
bool isNoble({ @required int atomicNumber }) {
 return atomicNumber != null;
}
复制代码

要使用required注解的话，还须要引入package:meta/meta.dart，不然会报错的。在flutter中，package:flutter/material.dart已经默认引入了，因此才能够直接使用。

类

这个的话其实也没什么好多的了，

• 在定义时访问实例的方法和参数时，不须要加上this
• 构造函数中使用this.参数能够直接赋值

class User {
 String name;
 // 位置参数
 User(this.name);
 // 至关于 User([name]): this.name = name;
 
 // 命名参数的形式
 // User({this.name});
}
复制代码

其余

• 使用 ?. 访问能够防止某个属性不存在
• String name = User().name ?? 'name'; dart中的 ?? 至关于js中的 || 方式吧
• 函数的级联也叫链式调用。Dart 原生语法支持链式调用，只须要使用 ..

querySelector('#confirm') // element
 ..text = 'Confirm'
 ..classes.add('important')
 ..onClick.listen((e) => window.alert('Confirmed!'));
复制代码

第二行以后访问的都是element的键和方法。