1、Dart 高频语法
- 模块导入
1、Dart中没有导出的说法，只有导入。导入了某个文件，则该文件下的所有声明变量都可以直接使用
// a.dart
String a = 'abc';
class B {
String b = 'test'
}
// main.dart
import './a.dart';
print(a); // 'abc'
print(new B().b); // 'test'
2、如果导入多个文件时出现变量冲突，可以用as指定别名
// a.dart
String a='test';
// b.dart
String a='test2'
// main.dart
import './a.dart';
import './b.dart' as b;
print(a) // 'test'
print(b.a) // 'test2'
3、部分导入
// a.dart
String a='test';
String b='test2';
// main.dart
import './a.dart' show a;
print(a) // 'test'
- 函数
1、函数参数分为固定参数，可选对象参数，可选位置参数；其中可选参数可以指定默认值，可选对象参数在flutter类中非常常见
String test(String a,{String b='b'},[String c='c']){
print('$a $b $c')
}
// 调用
test('a',b:'b','c') // 'a b c'
- 类
1、构造函数
Dart 中构造函数不是用 constructor 关键字，而是跟类同名的函数，且函数体一般为空，用 ; 表示
class A {
String a;
A(this.a); // 空函数体的构造函数
}
2、常量构造函数
使用常量构造函数 可以创建编译时常量，要使用常量构造函数只需要用 const 替代 new ，并且声明所有类的变量为 final
class A {
final String a;
const A(this.a); // 用const 声明常量构造函数
}
// 两个一样的编译时常量其实是 同一个对象
var instance = const A('test')
var instance2 = const A('test')
print(identical(instance,instance2)) // true
3、多构造函数(命名构造函数)
Dart 可以有多个构造函数，语法形式上类似给类加了个静态方法。此外Dart中推荐省略this，除非有冲突
class Point {
num x;
num y;
Point(this.x, this.y);
// Named constructor
Point.fromJson(Map json) {
x = json['x'];
y = json['y'];
}
}
4、初始化参数列表 & 调用父类构造函数
定义构造函数时可以用:来定义初始化参数列表以及调用父类构造函数
class Point extends A{
num x;
num y;
Point(this.x, this.y);
// Initializer list sets instance variables before
// the constructor body runs.
Point.fromJson(Map jsonMap)
: x = jsonMap['x'],
y = jsonMap['y'], super.A(jsonMap) {
print('In Point.fromJson(): ($x, $y)');
}
}
5、工厂构造函数
如果一个构造函数并不总是返回一个新的对象，则使用 factory 来定义 这个构造函数。例如，一个工厂构造函数 可能从缓存中获取一个实例并返回
class Logger {
final String name;
bool mute = false;
// _cache is library-private, thanks to the _ in front
// of its name.
static final Map _cache =
{};
factory Logger(String name) {
if (_cache.containsKey(name)) {
return _cache[name];
} else {
final logger = new Logger._internal(name);
_cache[name] = logger;
return logger;
}
}
Logger._internal(this.name);
void log(String msg) {
if (!mute) {
print(msg);
}
}
}
2、Flutter 开发套路
前端做项目开发一般套路：UI层+ 路由层 + 状态管理层，Flutter 也是这个套路，项目结构如下：
- 常用第三方库
1、fluro
这个库就是 Flutter 的路由层，使用方式如下：
// 1、定义路由规则
import "dart:core";
import "package:fluro/fluro.dart";
import "package:flutter/material.dart";
import "../container/index.dart";
import "../container/topic.dart";
Map handlers = {
'/': new Handler(handlerFunc: (BuildContext context, _) {
return new IndexContainer();
}),
'/topic/:id': new Handler(
handlerFunc: (BuildContext context, Map params) {
return new TopicContainer(id: params['id'][0]);
})
};
var notFoundHandler = new Handler(
handlerFunc: (BuildContext context, Map> params) {
print('not found');
});
// 2、初始化
class App extends StatelessWidget {
final Router router = new Router();
App({Key key, this.store}):super(key: key) {
router.notFoundHandler = notFoundHandler;
handlers.forEach((String path,Handler handler) {
router.define(path, handler: handler);
});
}
@override
Widget build(BuildContext context) {
final app = new MaterialApp(
...
onGenerateRoute: (RouteSettings routeSettings) {
RouteMatch match = this.router.matchRoute(null, routeSettings.name, routeSettings: routeSettings, transitionType: TransitionType.inFromRight);
return match.route;
},
);
return app
}
}
2、redux && flutter_redux
这个库就是 Flutter 的状态管理层，使用方式跟前端的redux一致，分为创建 action,reducer,store，用 StoreProvider作为高阶组件包裹应用，用 StoreConnector 在子组件中连接 store，具体可参见https://github.com/ali322/cnoder
3、http
这个库就是 Flutter 的请求处理库
import 'package:http/http.dart' as http;
var url = 'http://example.com/whatsit/create';
var response = await http.post(url, body: {'name': 'doodle', 'color': 'blue'});
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');
print(await http.get('http://example.com/foobar.txt'));
4、pull_to_refresh
这个库就是 Flutter 做上拉刷新，下拉加载常用的库
5、cached_network_image
这个库就是 Flutter 做缓存网络图像的库
6、share
这个库就是 Flutter 做分享的库
7、barcode_scan
这个库就是 Flutter 做扫描的库
8、rxdart
这个库就是 Flutter 做响应式编程的库，类似的有 rxjs，rxjava等