1 前言

Flutter 是用Dart语言编写的跨平台移动UI开发框架，跨平台顾名思义就是可以在多个平台构建应用。并且还是不要钱的。

2 简介

我通过学习，对Dart语法了解，做为前端的我，认识到它是一个陌生又熟悉的语言，陌生指的是不论我多么熟悉js，css，react，vue，仍然不会写，熟悉指的是我看到了很多的js类似的写法，es6语法，flex弹性盒模型等。

3 Hello World

老规矩演示第一个程序必须是Hello World。

新建一个helloWorld.dart
写入程序

main(List<String> args) {
  print('Hello World');
}

终端执行代码

 dart helloWorld.dart

Todo

main函数是Dart的入口函数
Dart支持泛型
Dart当中的打印信息是用的print函数

4 基本语法

接下来介绍一下基本的语法

定义变量

明确的声明

格式：变量类型变量名称 = 赋值;

String name = 'lys';
int age = 18;
double height = 1.8;

声明.png Todo：定义的变量可以修改, 但不能赋值其他类型

int age = 18;
int age = 16; // 可以修改
age = '20' // 不能将string赋值给int类型

可以修改

修改.png

不能将string赋值给int类型

不能修改.png

类型推导声明变量

var 变量名称 = 赋值

var name = 'lys';

dynamic 变量名称 = 赋值

dynamic name = 'lys';

const 变量名称 = 赋值

const name = 'lys';

final 变量名称 = 赋值;

final name = 'lys';

这几种推导声明变量的方式是有区别的

var方式

var name = 'lys';
name = 18; 不能将int赋值给string类型

dynamic方式

dynamic name = 'lys';
name = 18; 可以修改

const方式

const name = 'lys';
name = 'hello'; // 只读的，定义的常量不可以被修改Error: Can't assign to the const variable 'name'.

final方式

final方式 name = 'lys';
name = 'hello'; // 只读的，定义的常量不可以被修改 Error: Can't assign to the final variable 'name'.

const方式和final方式的区别

String getName() {
  return 'coderwhy';
}

main(List<String> args) {
  const name = getName(); // Error: Method invocation is not a constant expression
  final name = getName();
}

Todo

const 必须赋值常量值（编译期间需要有一个确定的值）
final 可以通过计算/函数获取一个值（运行期间来确定的一个值）

数据类型

Dart中常见的数据类型Int，Double，Bool，String，List， Set ， Map等。
Dart中的Int和Double，在js中都是Number类型，是js的基本数据类型的一种。
Dart中的Bool，String，在js中也是Bool，String类型，是js的基本数据类型的一种。
Dart中的List，在js中是Array类型，是js的引用数据类型的一种。
Dart中的Set ， Map，在js中是Object类型，是js的引用数据类型的一种。

Int类型就是整型

// Int类型
final age = 18;
// Int转为String
final ageStr = age.toString();
print(ageStr);

Double类型就是浮点型

// Double类型
final height = 1.8;
// Double转为String
final heightStr = height.toString();
print(heightStr);

Bool类型就是true或者false

// Bool类型
const flag = true;
print(flag);

const flag1 = 0;
if (flag) {
    print(111); // Error: A value of type 'int' can't be assigned to a variable of type 'bool'.
}

Todo

Dart语言中不能判断非空即是true

String类型就是用单引号或者双引号引起来的

const name = 'lys';
const sex = "男";
// String类型
final height = '1.8';
final age = '18';
final heightDouble = double.parse(height);
final ageInt = int.parse(age);

当然还有一个和js中es6写法很像的模板字符串，多行字符串（也可以用三个单引号或者三个双引号）

// 1.三个单引号
const info  = '''
    lys
    男
    1.8
''';

// 2.三个双引号
const info  = """
    lys
    男
    1.8
""";

字符串和表达式进行拼接，如果表达式是一个标识符, 那么{}可以省略

const name = 'lys';
const sex = "男";
const age = 18;
print('my name is ${name}, sex is $sex, age is $age');

拼接.png

List类型

// List定义
// 使用类型推导定义
final arr1 = ['a', 'b', 'c', 'd'];
print(arr1);

// 明确指定类型
List<int> arr2 = [1, 2, 3, 4];
print(arr2);

// List常见操作
// 1. 获取长度
print(arr1.length);
print(arr2.length);
// 2. 添加
arr1.add('e');
arr2.add(5);
// 3. 删除
// 根据值删除
arr1.remove('a');
arr2.remove(1);
// 根据下标删除
arr1.removeAt('a');
arr2.removeAt(1);
// 4.包含操作
arr1.contains('a');
arr2.contains(1);

Set类型

// Set定义
// 使用类型推导定义
final obj1 = {'a', 'b', 'c', 'd'};
print(obj1);

// 明确指定类型
Set<int> obj2 = {1, 2, 3, 4};
print(obj2);

// Set常见操作
// 1. 获取长度
print(obj1.length);
print(obj2.length);
// 2. 添加
obj1.add('e');
obj2.add(5);
// 3. 删除 Set方法没有定义根据下标删除元素
obj1.remove('a');
obj2.remove(1);
// 4.包含操作
obj1.contains('a');
obj2.contains(1);

Map类型

// Map定义
// 使用类型推导定义
final map1 = {'name':'lys', 'age': 18};
print(map1);

// 明确指定类型
Map<String, Object> map2 = {'name':'lys', 'age': 18};
print(map2);

// Set常见操作
// 1. 获取长度
print(map1.length);
print(map2.length);
// 2.根据key获取value
print(map1['name']);
print(map2['name']);
// 3. 根据key删除元素
map1.remove('age');
map2.remove('age');
// 4.获取所有的keys
map1.keys;
map1.keys;
// 5.获取所有的values
map1.values;
map1.values;
// 6.获取所有的entries 
map1.entries;
map1.entries;
// 7.判断是否包含某个key
map1.containsKey('name');
map2.containsKey('name');
// 8.判断是否包含某个key
map1.containsValue('lys');
map2.containsValue('lys');

函数

可以作为变量定义
可以作为其他函数的参数
可以作为返回值

函数的定义方式：

返回值 函数的名称(参数列表) {
  函数体
  return 返回值
}

模仿上面的定义方式，定义函数：

int sum(int a, int b) {
  return a + b;
}

这里还可以使用箭头函数，这里和js的es6的箭头函数写法略微不同：

int sum(int a, int b) => a + b;

// es6的箭头函数写法

// sum = (a, b) => a + b;

函数的参数分为两种：必须参数和可选参数

可选参数又分为两种： 命名可选参数 和 位置可选参数

命名可选参数

命名可选参数: {param1, param2, ...}

// 命名可选参数
sayHello(String name, {age, height}) {
  print('name=$name age=$age height=$height');
}

// 调用sayHello函数
sayHello('lys'); // name=lys age=null height=null
sayHello('lys', age: 18); // name=lys age=18 height=null
sayHello('lys', age: 18, height: 1.8); // name=lys age=18 height=1.8
sayHello('lys', height: 1.8); // name=lys age=null height=1.8

//可以指定某个参数是必传的(使用@required)
sayHello(String name, {@required int age, height}) {
  print('name=$name age=$age height=$height');
}

// 参数的默认值
sayHello(String name, {int age = 18, double height=1.8}) {
  print('name=$name age=$age height=$height');
}

位置可选参数

位置可选参数: [param1, param2, ...]

// 位置可选参数
sayHello(String name, [age, height]) {
  print('name=$name age=$age height=$height');
}

// 调用sayHello函数
sayHello('lys'); // name=lys age=null height=null
sayHello('lys', 18); // name=lys age=18 height=null
sayHello('lys', 18, 1.8); // name=lys age=18 height=1.8

// 参数的默认值
sayHello(String name, [age = 18, height]) {
  print('name=$name age=$age height=$height');
}

匿名函数：没有名字的函数，这种函数可以被称为匿名函数

main(List<String> args) {
  // 1.定义数组
  var arr = [1, 2, 3, 4];

  // 2.使用forEach遍历: 有名字的函数
  printInfo(item) {
    print(item);
  }
  arr.forEach(printInfo);

  // 3.使用forEach遍历: 匿名函数
  arr.forEach((item) {
    print(item);
  });
  // 4. 使用forEach遍历: 匿名函数 => 箭头函数
  arr.forEach((item) => print(item));
}

运算符

除法、整除、取余

var num = 7;
print(num / 3); // 结果2.3333333333333335
print(num ~/ 3); // 结果2;
print(num % 3); // 结果1;

??=赋值运算符

// 第一种
var str = 'hello';
print(str);
// 第二种
var str = null;
str ??= 'world';
print(str); // 当str初始化为hello时，结果为hello world，当初始化为null时，赋值了world

??条件运算符

// 第一种
var val = 'lys';
var str = val ?? 'hello world';
// 第二种
var val = null;
var str = val ?? 'hello world';
print(str); // 当val初始化为lys时，结果为lys，当初始化为null时，赋值了hello world

Todo

??=赋值和条件运算符跟三目运算符一样，都是先判断之前的，再用后面的
和js的||运算符一样，前面的值为真，用前面的，否则用后面的

..级联语法（jQuery链式语法）

class Person {
  String name;

  void run() {
    print("${name} is running");
  }

  void eat() {
    print("${name} is eating");
  }

  void swim() {
    print("${name} is swimming");
  }
}

main(List<String> args) {
  // 第一种
  final p = Person();
  p.name = 'lys';
  p.run();
  p.eat();
  p.swim();
  // 第二种
  final p = Person()
              ..name = "lys"
              ..run()
              ..eat()
              ..swim();
}

5 最后

2022开工头一天！

各位，早点下班，顺便留下你的脚印，谢谢

Flutter 基本语法

1 前言

2 简介

3 Hello World

4 基本语法

定义变量

数据类型

函数

运算符

5 最后