flutter是一款移动应用跨平台框架，使用Dart语言编写的一份代码可以生成iOS和Android两个高性能、高保真的应用程序。Flutter不借助原生的渲染能力，而是自己实现了一套与Android和iOS一样的渲染原理，从而在性能上与原生平台基本保持一致。目前Flutter支持了iOS、Android，Windows、linux、macOS、Web平台的运行。
1、项目创建
开发flutter应用，我们通常使用的工具是Android Studio。创建一个flutter项目，可以通过Android Studio来创建，也可以通过命令行来创建。
1.通过Android Studio来创建
- 启动
Android Studio，找到Create New Flutter Project； - 然后会来到一个让选择项目类型的页面
Flutter Application、Flutter Plugin、Flutter Package、Flutter Module；选择Flutter Application； - 输入
Project name、Flutter SDK path、Project location信息，点击下一步，然后等待一小会即可创建成功。
注意事项：
1.Flutter Application-全新的App，包含标准的Dart与Native层；Flutter Module-混编到已有的Android/iOS工程内；Flutter Plugin-平台插件，包含Dart与Native层的实现；Flutter Package-纯Dart工程，仅有Dart层实现。
2.需要注意的是Project name只能只用小写字母或者下划线；
2.通过命令行创建
/*创建Flutter Application*/
flutter create appname
/*创建Flutter Module*/
flutter create -t module appname_module
/*创建Flutter Plugin*/
flutter create --template=plugin appname_plugin
/*创建Flutter Package*/
flutter create --template=package appname_package
在创建项目的过程中可以指定
Android和iOS的平台开发语言:-i objc或-i swift可指定iOS平台是OC还是Swift;-a java或-a kotlin可指定Android是Java还是Kotlin。更多选项可以通过flutter create --help来查看。
创建好的项目，包括android,ios,lib等目录，main函数和我们开发写的Dart代码都在lib目录中。
2、基础语法
基础类型：
- num
包括int & double
int.isEven, int.isOdd;
int.toDouble;double.toInt();
double.round();//常用函数
- String:
var a = "today";var b = "hello", var c = a + b; //字符串拼接
a[0];//取第一个字符； a*2;//字符串a的内容重复2遍
print("a + b = ${ a + b}")//{放运算表达式}
- list
创建可变list: var list = [1,2,3,"name"]
创建不可变list：var list = const [1,2,3,"name"]
按下标访问list[2]="xyz"
添加/删除元素list.add("xxx"); list.insert(1,"cat");list.remove("cat");list.clear();
排序:list.sort()
截取:list.sublist(5,7)//从4到7,前闭后开,包含3个元素
- Map
创建可变Map: var map = {"name":"ccc", "age":244};
创建不可变Map:var map =const {"name":"ccc"};
按键访问 map["name"] = "520";
var list = ["ccc", "255"]; list.asMap()//{0:"ccc", 1:244}
- ??=, ??
var a; a ??= 5; a=10; //如果a为nil就赋值，否则直接返回
var b; print("${b ?? 5}")//如果b有值，直接返回，反之取??后面的
- =>箭头函数
- 可选参数，空安全
- 匿名函数
- 闭包:定义在函数里面的的函数就是闭包，闭包也是一个对象，可以访问外部函数的局部变量。
func() {
int count = 0;
return ()=>print(count++);
}
let func1 = func();
func1();func1();func1();func1();//分别打印1/2/3/4
let func2 = func();
func2();func2();func2();func2();//分别打印1/2/3/4
flutter项目使用的dart语言，其基础语法与Swift和Kotlin非常接近。
接下来我们简单列举一个例子，定义一个Worker类
class Worker {
//定义静态变量：格式：类型 变量名 = 初始值
//在外部通过 = Worker.key; Worker.key = "22"进行读写 （类似于swift的 static var key = "worker"）
//在内不通过 = key;key = ""进行读写
//static String _i = "111";如果带下划线将不能被外部访问
static String key = 'Worker';
//定义成员变量：格式：类型 变量名 = 初始值
//如果成员变量不给初始值，那么需要指定该成员变量是空安全（null-safety,跟swift的可选类型类似）或者指定为构造函数参数
//如果成员边量带下划线，表示该成员变量尽在该文件内可以访问。（跟swift的fileprivate类似）
//const常量：在编译期确定变量测值，不可用运行态的内容来赋值，如时间戳/随机数；赋值后不可修改。在申明的时候就需要赋值。
//final最终变量：赋值一次后不可以改变，可以赋值为时间戳和随机数等。如果没有赋值不能使用。
String name = '';
String _nickname = '';
int? height;////未初始化的变量指向null
int? age;//未初始化的变量指向null
//构造函数
//同名的参数（可以简写成如下方式，私有成员变量不可以）
Worker(this.name,this.height, String _nickname){
this._nickname = _nickname;
}
//函数:返回值 函数名 (参数列表)
//带前置下划线的函数不能被外部访问，与带下划线的的成员变量相同
int printAll() {
print(
'printAll:key=$key, name=$name, _nickname=$_nickname, height=$height, age=$age');
return 8;
}
int _printAll(){
print('_printAll:key=$key, name=$name, _nickname=$_nickname, height=$height, age=$age');
return 9;
}
}
调用部分如下：
void main() {
Worker.key = "222";
print(Worker.key);
Worker worker = Worker("name", 19, "nickname");
worker.printAll();
}
3.基础结构
flutter项目从main启动后，调用runApp()，即可将UI载入：
void main() {
runApp(TextWidget());
}
//在widget中我们重载Widget build(BuildContext context)函数，返回创建的widget
class TextWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(44),
color: Colors.yellow,
child: Text(
"Hello Flutter",
textAlign:TextAlign.center,/*文本居中显示*/
textDirection:TextDirection.ltr,/*文字阅读顺序*/
style: TextStyle(
color: Colors.red,/*文字颜色*/
fontSize: 40/*文字大小*/
)
)
);
}
}
flutter中MaterialApp代表Material Design风格的应用，内部包含该风格应用所需要的基本控件, 其home属性应用的根节点。Scaffold名为脚手架，为应用提供了导航栏、Tab等:
- appBar:导航栏NavigationBar位居页面最顶部
- bottomNavigationBar：标签栏Tabbar，位居页面最底部
- body:除appBar/bottomNavigationBar以外的屏幕中间区域
接下来，我们把这些基础组建给弄出来看看:
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner:false,
home: Scaffold(
appBar: AppBar(
title: Text('Explorer App')
),
body: TextWidget()
)
);
}
}
这样我们后面做基础组建的学习只需要修改Scaffold.body即可。
4.布局控件
在原生开发中我们常用frame、AutoLayout布局，在h5项目中我们常用flex布局。在flutter开发中，Dart为我们提供了类似flex布局Row，Column， Stack等。
4.1 Row、Column表示一组平面上排列的元素
其中Row主轴mainAxisAlignment是从屏幕左侧到右侧，交叉轴从屏幕顶部到下方；Column主轴crossAxisAlignment从屏幕的上方到下方，交叉轴是从屏幕的左侧到右侧。
-
mainAxisAlignment变量-主轴
start-元素居左/居上显示，元素之间间距为0，多余的空间居右/下；
center-元素居中显示，元素间艰巨为0，多余的空间一分为二居左右/上下；
end-元素居右/下显示，元素之间间距为0，多余的空间居左/上；
spaceBetween-元素分开显示，多余的空间分配到元素与元素之间；
spaceAround-整体空间按照元素的个数均分，多余的空间显示在元素的左右/上下两侧；
spaceEvenly-将多余的空间均分于左+元素之间+右/上+元素之间+下；
Row布局(cross轴为center)
Column布局(cross轴为center)
-
CrossAxisAlignment变量-交叉轴：
start:元素居上/左显示；
center:元素居上下居中/左右居中；
end:元素居下/右显示
stretch：元素拉伸
baseline：用于Text基线对齐
Row布局(main轴为center)
Column布局(main轴为center)
Row布局的主轴为x+方向，交叉轴为y+方向；Column的主轴为y+方向，交叉轴为x+方向。搞清楚这两个最常用的布局，开发中如鱼得水。
4.2.Stack一组垂直于屏幕排列的元素，
整组处于父容器中的位置通过alignment来确定，alignment接受一个AlignmentDirectional类型的对象，该对象两个属性start，y分别表示处在x轴，y轴上的位置。内部定义父视图x轴方向起点为-1，中点为0，右侧为1，父视图y轴方向起点为-1，中点为0，右侧为1。该类也有一些常用的位置定义,比如
/// The center point, both horizontally and vertically.
///
/// Consider using [Alignment.center] instead, as it does not need to
/// be [resolve]d to be used.
static const AlignmentDirectional center = AlignmentDirectional(0.0, 0.0);
该布局用起来相对简单:
Stack布局
5.继承、混入
abstract class Worker {
void work(){print("Person->work");}
}
mixin MixinWorker implements Worker {
void mixinWork(){print("MixinWorker->mixinWork");}
}
extension ExtensionWorker on Worker {
void extensionWork(){print("ExtensionWorker->extensionWork");}
}
class Developer extends Worker {
void develop(){print("Developer-> develop");}
@override work(){print("Developer-> work");}
//__test(){
Developer d = Developer("", 0, "");
d.work();
d.delelop();
d.extensionWork();
//d.mixinWork();//error
}
}