随着前不久Flutter 1.7正式版发布，Flutter今年迎来了迭代的小高潮，很多的公司也纷纷布局Flutter技术栈，并且很多大公司招聘的时候也明着写明对于Flutter的技术要求。正好最近刚入门了Flutter，并在项目中进行了一些应用，于是将应用的一些心得进行整理，希望帮助更多的初学者。
在学习Flutter之前，让我们先来认识下什么是Flutter跨平台。Flutter是谷歌开源的一款移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。同时， Flutter可以与现有的代码一起工作，在全世界，Flutter正在被越来越多的开发者和组织使用。
Dart 部分
之所以采用Dart语言来进行Flutter应用开发，而并非Java、Javascript这类热门语言，这是Flutter团队对当前热门的10多种语言慎重评估后的选择。因为Dart囊括了多数编程语言的优点，它更符合Flutter构建界面的方式。
Dart 语言是在2011年10月由 Google 开发的一款高级现代编程语言，并在2012年10月发布第一个里程碑版本 M1。Dart 作为一种结构化的Web开发语言，既适用于快速原型开发，又适用于组织大型的代码库。既可以用在桌面版和移动版的浏览器中，也可以在服务器端使用。总体上说，Dart 语言特别适合已经掌握了 Java、JavaScript 等语言的开发者，并且可以快速的进行过渡。
Dart语言特点
和其他高级现代编程语言一样，Dart具有现代编程语言的诸多优点：
-
Productive（生产力高，Dart的语法清晰明了，工具简单但功能强大）
-
Fast（执行速度快，Dart提供提前优化编译，以在移动设备和Web上获得可预测的高性能和快速启动。）
-
Portable（易于移植，Dart可编译成ARM和X86代码，这样Dart移动应用程序可以在iOS、Android和其他地方运行）
-
Approachable（容易上手，充分吸收了高级语言特性，如果你已经知道C++，C语言，或者Java，你可以在短短几天内用Dart来开发）
-
Reactive（响应式编程）
在学习Dart语言之前，需要明白几个重要的概念：
- 在Dart中，一切都是对象，所有的对象都是继承自Object；
- Dart是强类型语言，但可以用var或 dynamic来声明一个变量，Dart会自动推断其数据类型，dynamic类似c#；
- 没有赋初值的变量都会有默认值null；
- Dart支持顶层方法，如main方法，可以在方法内部创建方法；
- Dart支持顶层变量，也支持类变量或对象变量；
- Dart没有public protected private等关键字，如果某个变量以下划线（_）开头，代表这个变量在库中是私有的；
数据类型
内置类型
Dart一共内置了6种基本的数据类型：
- 数字 number
- 字符串 strings
- 布尔 booleans
- 列表 lists（也称为数组arrays）
- 图 maps
- 符号 symbols
数据类型
- Dart 中的所有东西都是对象，包括数字、函数等，它们都继承自 Object，并且对象的默认值都是 null（包括数字）；
- var 可以定义变量，如 var tag = “666” ，同时 Dart属于伪动态强类型语言，支持闭包。
- Dart 中 number 类型分为 int 和 double ，其中 java 中的 long 对应的也是 Dart 中的 int类型，Dart 中没有 float 类型。
- Dart 下只有 bool 型可以用于 if 等判断。
- Dart中，switch 支持 String 类型。
- Dart 中数组等于列表，所以 var list = []; 和 List list = new List() 可以看做一样。
变量与常量
变量
在Dart中，变量支持以下几种申明方式：
1.使用 var 声明变量,默认值为 null
var a;//null
a = 10;
2.显示类型声明
int a;//null
a = 10;
3.使用 var 声明，可赋予不同类型的值
var a; //null
a = 10; //int
a = "Dart"; //string
4.使用 final 声明只能赋值一次的变量
final a = 30;
a = 10; //Error
常量
使用 const 声明编译期常量。
const a = 10;
数据类型
数值型
Dart中使用 num 表示数值型，子类只有两种：int 和 double，分别表示整型和浮点型。
1.使用 num 声明的类型既可以接收整型，也可以接收浮点型。
num a = 10; //int
a = 12.5; //double
2.使用 int 声明整型；
int a = 10;
3.使用 double 声明浮点型
double a = 10.5;
4.常用属性和方法（更多可查看相关api）
int a = 30;
a.isEven;//是否偶数
a.isOdd; //是否奇数
a.abs();// 绝对值
a.toDouble();//转换为浮点型
...
int b = 10.5;
b.toInt();//转换为整型
b.round(); //四舍五入，11
b.floor(); //不大于b的最大整数，10
b.ceil(); //不小于b的最小整数，11
...
字符串
Dart中使用 String 表示字符串。
1.使用 单引号 或 双引号 创建字符串；
String str = "Dart";
String str = 'Dart';
2.使用 三个单引号 或 三个双引号 创建多行字符串；
String str = '''Hello
Dart''';
String str = """Hello
Dart""";
3.使用 r 创建原始字符串
String str = r'Hello \n Dart'; // "\n"不会被转义
4.插值表达式
使用 ${ } 表示插件表达式，单个变量可省略 { }。
int a = 1;
int b = 2;
print("a + b = ${a + b}");
5.常用属性和方法
str.length;//字符串长度
str.isEmpty;//是否为空
...
str.contains('xxx');//是否包含xxx
str.substring(0,3);//截取前三个字符
str.startsWith('xxx‘);//是否以xxx开头
str.split(",");//以,分隔字符串，返回数组
...
Dart 不需要给变量设置 setter getter 方法， 这和 kotlin语言 等类似。
布尔型
Dart中使用 bool 表示布尔型。布尔型的值只有 true 和 false。例如：
bool isTrue = true;
bool isFalse = false;
列表
Dart中使用 List 表示列表，它和数组是同一概念。
1.创建List,使用 const 创建不可变的List
var list = [1, 2, 3];
//创建不可变的List
var list = const[1, 2, 3]
//使用类创建
var list = new List();
2.常用属性和方法
Dart支持常见的添加、索引、删除等方法，例如：
获取元素个数
list.length;
判断是否为空
list.isEmpty;
list.isNotEmpty;
添加元素
list.add('xxx');
list.insert(index,'xxx'); //在下标位置添加元素
删除元素
list.remove('xxx');
list.clear(); //清空list
修改元素
list[0] = 'xxx'; //修改下标为0的元素值为xxx
查询元素
list[0];//获取第一个元素，下标从0开始
其它
list.indexOf('xxx');//查询元素xxx,返回下标，不存在返回-1
list.sort(); //排序
list.subList(start,end);//获取从子列表
list.forEach(); //遍历list
Map
Dart中使用 Map 表示key-value键值对。
1.创建Map,使用 const 创建不可变的Map
var map = {'first':'Java','second':'Dart'};
//创建不可变的Map
var map = {'first':'Java','second':'Dart'};
//使用类创建
var map = new Map();
2.常用属性和方法
获取元素个数
map.length;
判断是否为空
map.isEmpty;
map.isNotEmpty;
添加元素
map['third'] = 'JavaScript'; //添加key为thrid,value为JavaScript的元素
删除元素
map.remove('third'); //删除key为third的元素
map.clear(); //清空map
修改元素
map['first'] = 'C++'; //修改key为first的value为C++
查询元素
map['first'];//获取key为first的value
其它
map.keys; //获取map所有的key
map.values; //获取map所有的value
map.containsKey('first'); //map是否包含key为first的元素
map.containsValue('Java'); //map是否包含value为Java的元素
map.forEach(); //遍历map
运算符
Dart中的很多运算符和其它语言是相似的，个别不同用法会详细说明。
算术运算符
常见的加减乘除: + , - , * , / , ~/ , %，其中
- “/” 运算符结果为浮点型；
- “~/” 运算符为求整，类似Java中的"/"；
- "%"运算符为求余；
递增递减: ++var , var++ , --var , var–
关系运算符
关系运算符包括：== , != , > , < , >= , <=
- "=="运算符只是判断内容是否相同。
逻辑运算符
逻辑运算符包括：! , && , ||
赋值运算符
基础运算符: = , ??=
- “??=” 表示左侧变量为空时进行赋值，否则不赋值
int a;
a ??= 5; // a = 5
int a = 10;
a ??= 5; //a = 10
复合运算符: *+= , -= , = , /= , %= , ~/=
条件运算符
三目运算符: condition ? expr1 : expr2
??运算符: expr1 ?? expr2
- "??"运算符表示如果expr1为null，则使用expr2的结果，否则使用expr1
String a = "Dart";
String b = "Java";
String c = a ?? b; //c = "Dart"
String a;
String b = "Java";
String c = a ?? b; //c = "Java"
控制流
if语句
if语句和其它语言类似。
if(condition1){
//...
if(condition2){
//...
}
} else if(condition3){
//...
} else {
//...
}
for语句
var list = [1,2,3,4,5];
for(var index = 0;index < list.length;index++){
print(list[index]);
}
for…in语句
for(var item in list){
print(item);
}
while语句
int count = 0;
while(count < 5){
print(count++);
}
do…while语句
do{
print(count--);
}while(count > 0 && count < 5);
break和continue
- break：终止当前循环；
- continue:跳出当前循环，继续下一次循环；
switch语句
switch语句支持num、String、编译期常量、对象和枚举。
switch(language){
case "Dart":
print("Dart is my favorite");
break;
case "Java":
print("Java is my favorite");
break;
case "Python":
print("Python is my favorite");
break;
default:
print("None");
}
支持使用continue跳转标签：
switch(language){
Test:
case "Dart":
print("Dart is my favorite");
break;
case "Java":
print("Java is my favorite");
continue Test;
case "Python":
print("Python is my favorite");
break;
default:
print("None");
}
方法
方法声明
Dart语法的方法返回格式：
返回类型 方法名（参数1，参数2,....）{
方法体…
return 返回值
}
同时，在Dart语言中，方法也是对象，并且有具体类型Function；并且，返回值类型、参数类型都可省略；
void printPerson(String name,int age){
print("name=$name,age=$age");
}
printPerson(name,age){
print("name=$name,age=$age");
}
方法都有返回值。如果没有指定返回类型，默认return null最后一句执行；
printPerson(String name,int age){
print("name=$name,age=$age");
//return null;
}
=> （箭头）语法，适用于方法体只有一个表达式的情况；
printPerson(String name,int age) => print("name=$name,age=$age");
可选参数
可选命名参数,调用时使用名称传值。
printPerson(String name,{int age,String gender}){
print("name=$name,age=$age,gender=$gender");
}
//方法调用
printPerson("李四",age: 20);
printPerson("李四",age: 20,gender: "Male");
可选位置参数，调用时根据参数位置传递对应类型。
printPerson2(String name,[int age,String gender]){
print("name=$name,age=$age,gender=$gender");
}
//方法调用
printPerson2("张三",18);
printPerson2("张三",18,"Female");
如果存在具体参数，可选参数声明，必须在参数后面
默认参数值
在可选参数中可以使用默认参数值，默认参数值必须是编译期常量。
printPerson(String name,{int age = 30,String gender = "Female"}){
print("name=$name,age=$age,gender=$gender");
}
方法对象
Dart中一切都对象，包括方法。所以方法也可以作为对象赋值给其它变量，也可以作为参数传递给其它方法。
方法赋值给其它变量
void printHello(){
print("Hello");
}
Function func = printHello;
func();
方法作为参数传递
//第二参数是一个方法
List listTimes(List list ,String t(str)){
for(var index = 0;index < list.length;index++){
list[index] = t(list[index]);
}
return list;
}
String times(str){
return str*3;
}
//方法作为参数调用
var list2 = ["h","e","l","l","o"];
print(listTimes(list2, times));
匿名方法
匿名方法没有具体的名称，和方法有相同的特性，也是对象，也可作为变量赋值和参数传递。
匿名方法声明
(参数1，参数2,….）{
方法体…
return 返回值
}
匿名方法赋值
var func = (str){
print("Hello---$str");
};
func(30);
匿名方法作为参数
List listTimes(List list ,String times(str)){
for(var index = 0;index < list.length;index++){
list[index] = times(list[index]);
}
return list;
}
//使用匿名方法传递参数
var result = listTimes(list2, (str){ return str * 3;});
闭包
闭包是定义在其他方法内部，能够访问外部方法内的局部变量的对象，闭包具有如下特性：
-
闭包是一个方法(对象);
-
闭包定义在其它方法内部;
-
闭包能够访问外部方法内的局部变量，并持有其状态
//该方法返回一个闭包
a(){
int count = 0;return (){ print(count++); }; } //闭包的调用可以访问局部变量count var func = a(); func(); func(); func(); func();
Flutter 部分
Widget
在 Flutter 中，一切用于显示都是 Widget 。Widget 是Flutter的基础，作为 MVVM 的一部分，Widget主要用于作为MVVM的V层。具体使用时，我们可以通过修改数据，再用setState 设置数据，Flutter 会自动通过绑定的数据更新 Widget 。
在 Flutter 中，Widget 分为 有状态 和 无状态 组件两种。无状态就是创建之后就不会改变，一直保持初始时候的状态，常见的有Container、ScrollView等
。而有状态的 Widget 当数据更新时，其实是绘制了新的 Widget，常见的有CheckBox、AppBar、TabBar等。其中，这两种widget都是继承自Widget父类。
状态
在介绍Widget之前，让我们先来熟悉下Widget的State。搞过前端的同学可能都知道，前端开发中有一个很基本的概念：状态机制。和前端的状态管理类似，Flutter的状态管理也是用于管理组件的生命周期的一种机制。
State的生命周期通常有四种状态：
- created：当State对象被创建时候，State.initState方法会被调用；
- initialized：当State对象被创建，但还没有准备构建时，State.didChangeDependencies在这个时候会被调用；
- ready：State对象已经准备好了构建，State.dispose没有被调用的时候；
- defunct：State.dispose被调用后，State对象不能够被构建。
如下图所示，是Flutter的Widget的一个完整的生命周期图：
如上图，具体的执行流程如下：
- 创建一个State对象时，会调用StatefulWidget.createState；
- 和一个BuildContext相关联，可以认为被加载了（mounted）；
- 调用initState；
- 调用didChangeDependencies；
- 经过上述步骤，State对象被完全的初始化了，调用build；
- 如果有需要，会调用didUpdateWidget；
- 如果处在开发模式，热加载会调用reassemble；
- 如果它的子树（subtree）包含需要被移除的State对象，会调用deactivate；
- 调用dispose,State对象以后都不会被构建；
- 当调用了dispose,State对象处于未加载（unmounted），已经被dispose的State对象没有办法被重新加载（remount）。
和前端的State一样，Flutter的State中比较重要的一个方法是setState，当修改状态时，widget会自动被更新。比方说点击CheckBox，会出现选中和非选中状态之间的切换，就是通过修改状态来达到的。
无状态（StatelessWidget）
StatelessWidget使用比较简单，继承 StatelessWidget，通过 build 方法返回一个布局好的控件。
Widget 和 Widget 之间通过 child: 方式进行嵌套。其中，有的 Widget 只能有一个 child，比如下方的 Container ；有的 Widget 可以多个 child ，也就是children:，比如` Column 布局。例如：
import 'package:flutter/material.dart';
class DEMOWidget extends StatelessWidget {
final String text;
DEMOWidget(this.text);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Text(text ?? "这就是无状态组件DMEO"),
);
}
}
对于StatelessWidget，build方法会在如下三种情况下调用
- widget第一次被插入到树中；
- widget的父节点更改了配置（configuration）；
- widget依赖的InheritedWidget改变了。
有状态（StatefulWidget）
所谓StatefulWidget，就是有状态的 Widget ，即需要自己手动管理State。你可以通过 setState 改变State的数据，改变的数据会触发 Widget 重新构建。
创建StatefulWidget比StatelessWidget要复杂点，关键点是需要开发者自己去维护组件的State。例如：
import 'dart:async';
import 'package:flutter/material.dart';
class DemoStateWidget extends StatefulWidget {
final String text;
DemoStateWidget(this.text);
@override
_DemoStateWidgetState createState() => _DemoStateWidgetState(text);
}
class _DemoStateWidgetState extends State<DemoStateWidget> {
String text;
_DemoStateWidgetState(this.text);
@override
void initState() {
super.initState();
///定时2秒
new Future.delayed(const Duration(seconds: 1), () {
setState(() {
text = "这就变了数值";
});
});
}
@override
void dispose() {
super.dispose();
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
}
@override
Widget build(BuildContext context) {
return Container(
child: Text(text ?? "这就是有状态DMEO"),
);
}
}
布局
Flutter一共提供了将近30种布局Widget，其中常用有 Container、Padding、Center、Flex、Stack、Row、Column、ListView 等。关于如何进行布局，大家可以参考Flutter官方的布局教程。
对于一个复杂的界面，究竟如何进行布局，可以按照拆解、组件封装、布局这三步来的。例如，下面有一个界面：
整体拆解
根据设计图，可以看出整体时分行展示的，因此最外层是一个Column元素
- 第一行为标题，涉及到不对称的布局，可以用一个Stack或者Row来进行，用Row的话，则需要右边填上一个空白的widget占位。也可能会使用AppBar，将底部阴影去掉也能实现相同效果；
- 第二行可以看作一个Row，分两块布局。右边部分，涉及到叠加，会考虑Stack；
- 第三行比较复杂，整体看，也是一行一行进行展示的，因此最外层时一个Column。中间的文本部分需要根据个数自动换行，因此考虑使用Wrap。预习这个地方涉及到叠加，考虑Stack实现；
- 第四行可以看作一个Row，分三块进行布局；
- 第五行可以看作一个Row，分两块布局。
每一行之间的间隔，则可以考虑用Padding或者Container来设置。
通过上面这样一步一步的分析后，基本上对大致的布局有了一个了解，最外层的控件大致选对（只要能实现的话，就是复杂度以及效率的问题），然后一步一步的拆解每一行的元素，如果有重复的或者觉得可以封装出来的部分，则进行下一步。
1 局部拆解
每一行的拆解，大致也是按照这个思路来进行，因此笔者在这里就不做讲解了。
2 组件封装
例如上面，笔者想对第四行的这种展示进行封装，觉得今后的布局可能会用到，因此在这一步，可以先把这一块儿抽离出一个控件。利用Row的mainAxisAlignment以及Expanded来实现这种效果，具体的实现笔者不再详细的描述了。
经过这一步，整体的规划设计图已经有了，各个组件也都有了，接下来的工作就是组装了。
3 具体布局
具体布局设计到一些细节的地方，例如间隔（Padding或者Container）、居左居右居中（Align）、点击事件（GestureDetector）以及圆角（ClipRRect）等一些特殊情况，基本上就是嵌套，一层一层去实现。