随着前不久Flutter 1.7正式版发布,Flutter今年迎来了迭代的小高潮,很多的公司也纷纷布局Flutter技术栈,并且很多大公司招聘的时候也明着写明对于Flutter的技术要求。正好最近刚入门了Flutter,并在项目中进行了一些应用,于是将应用的一些心得进行整理,希望帮助更多的初学者。
在学习Flutter之前,让我们先来认识下什么是Flutter跨平台。Flutter是谷歌开源的一款移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。同时, Flutter可以与现有的代码一起工作,在全世界,Flutter正在被越来越多的开发者和组织使用。
之所以采用Dart语言来进行Flutter应用开发,而并非Java、Javascript这类热门语言,这是Flutter团队对当前热门的10多种语言慎重评估后的选择。因为Dart囊括了多数编程语言的优点,它更符合Flutter构建界面的方式。
Dart 语言是在2011年10月由 Google 开发的一款高级现代编程语言,并在2012年10月发布第一个里程碑版本 M1。Dart 作为一种结构化的Web开发语言,既适用于快速原型开发,又适用于组织大型的代码库。既可以用在桌面版和移动版的浏览器中,也可以在服务器端使用。总体上说,Dart 语言特别适合已经掌握了 Java、JavaScript 等语言的开发者,并且可以快速的进行过渡。
和其他高级现代编程语言一样,Dart具有现代编程语言的诸多优点:
在学习Dart语言之前,需要明白几个重要的概念:
Dart一共内置了6种基本的数据类型:
在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
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中的很多运算符和其它语言是相似的,个别不同用法会详细说明。
常见的加减乘除: + , - , * , / , ~/ , %,其中
递增递减: ++var , var++ , --var , var–
关系运算符包括:== , != , > , < , >= , <=
逻辑运算符包括:! , && , ||
基础运算符: = , ??=
int a;
a ??= 5; // a = 5
int a = 10;
a ??= 5; //a = 10
复合运算符: *+= , -= , = , /= , %= , ~/=
三目运算符: condition ? expr1 : expr2
??运算符: expr1 ?? expr2
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(condition1){
//...
if(condition2){
//...
}
} else if(condition3){
//...
} else {
//...
}
var list = [1,2,3,4,5];
for(var index = 0;index < list.length;index++){
print(list[index]);
}
for(var item in list){
print(item);
}
int count = 0;
while(count < 5){
print(count++);
}
do{
print(count--);
}while(count > 0 && count < 5);
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;});
闭包是定义在其他方法内部,能够访问外部方法内的局部变量的对象,闭包具有如下特性:
在 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的生命周期通常有四种状态:
如下图所示,是Flutter的Widget的一个完整的生命周期图:
如上图,具体的执行流程如下:
和前端的State一样,Flutter的State中比较重要的一个方法是setState,当修改状态时,widget会自动被更新。比方说点击CheckBox,会出现选中和非选中状态之间的切换,就是通过修改状态来达到的。
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方法会在如下三种情况下调用
所谓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元素
每一行之间的间隔,则可以考虑用Padding或者Container来设置。
通过上面这样一步一步的分析后,基本上对大致的布局有了一个了解,最外层的控件大致选对(只要能实现的话,就是复杂度以及效率的问题),然后一步一步的拆解每一行的元素,如果有重复的或者觉得可以封装出来的部分,则进行下一步。
每一行的拆解,大致也是按照这个思路来进行,因此笔者在这里就不做讲解了。
例如上面,笔者想对第四行的这种展示进行封装,觉得今后的布局可能会用到,因此在这一步,可以先把这一块儿抽离出一个控件。利用Row的mainAxisAlignment以及Expanded来实现这种效果,具体的实现笔者不再详细的描述了。
经过这一步,整体的规划设计图已经有了,各个组件也都有了,接下来的工作就是组装了。
具体布局设计到一些细节的地方,例如间隔(Padding或者Container)、居左居右居中(Align)、点击事件(GestureDetector)以及圆角(ClipRRect)等一些特殊情况,基本上就是嵌套,一层一层去实现。