写给前端工程师的 Flutter 详细教程

当然作为一篇写给前端工程师的教程，我在这儿只想写写 JavaScript 中暂时没有的，Dart 中更为省心，也更“甜”的东西。

不会飘的 this

强类型，当然前端现在有了 TypeScript :grimacing:

强壮便利的操作符号：

?. 便利安全的 foo?.bar 取值，假如 foo 为 null ，那么取值为 null

?? condition ? expr1 : expr2 能够简写为 expr1 ?? expr2

= 和其他符号的组合: *= 、 ~/= 、 = 、 |= ……

级联操作符

// 想想这样省了多少变量声明
querySelect
 ..text = Confirm 
 ..classes.add
 ..onClick.listen = window.alert)

乃至能够重写操作符

class Vector {
 final int x, y;
 Vector;
 Vector operator   = Vector;
 Vector operator - = Vector;
 // Operator == and hashCode not shown. For details, see note below.
void main {
 final v = Vector;
 final w = Vector;
 assert);
 assert);

注： 重写 == ，也需求重写 Object hashCode getter

class Person {
 final String firstName, lastName;
 Person;
 // Override hashCode using strategy from Effective Java,
 // Chapter 11.
 @override
 int get hashCode {
 int result = 17;
 result = 37 * result   firstName.hashCode;
 result = 37 * result   lastName.hashCode;
 return result;
 // You should generally implement operator == if you
 // override hashCode.
 @override
 bool operator == {
 if  return false;
 Person person = other;
 return ;
void main {
 var p1 = Person;
 var p2 = Person;
 var p3 = 'not a person';
 assert;
 assert;
 assert;

这点在 diff 目标的时分特别有用。

Dart 运行在独立阻隔的 iSolate 中就相似 JavaScript 相同，单线程事情驱动，可是 Dart 也开放了创立其他 isolate，充分利用 CPU 的多和才能。

loadData async {
 // 经过spawn新建一个isolate，并绑定静态办法
 ReceivePort receivePort =ReceivePort;
 await Isolate.spawn;
 // 获取新isolate的监听port
 SendPort sendPort = await receivePort.first;
 // 调用sendReceive自定义办法
 List dataList = await sendReceive;
 print;
// isolate的绑定办法
static dataLoader async{
 // 创立监听port，并将sendPort传给外界用来调用
 ReceivePort receivePort =ReceivePort;
 sendPort.send;
 // 监听外界调用
 await for  {
 String requestURL =msg[0];
 SendPort callbackPort =msg[1];
 Client client = Client;
 Response response = await client.get;
 List dataList = json.decode;
 // 回调回来值给调用者
 callbackPort.send;
// 创立自己的监听port，而且向新isolate发送音讯
Future sendReceive {
 ReceivePort receivePort =ReceivePort;
 sendPort.send;
 // 接收到回来值，回来给调用者
 return receivePort.first;

当然 Flutter 中封装了 compute ，能够便利的运用，比如 在其它 isolate 中解析大的 json 。

在这儿独自提出来的含义在于，从 React 开端，到 Flutter，到最近的 Apple SwiftUI，Android Jetpack Compose 声明式组件写法越发盛行，Web 前端运用 JSX 来让开发者更便利的书写，而 Flutter，SwiftUI 则直接从优化言语自身着手。

函数类的命名参数

void test {
 print;
 print;
// 处理函数调用时分，参数不明确的问题
test
// 这样关于组件的运用尤为便利
class MyApp extends StatelessWidget {
 @override
 Widget build {
 return Scaffold,
 body: Container,
 floatingActionButton:FloatingActionButton

大杀器：Collection If 和 Collection For

// collection If
Widget build {
 return Row),
 Expanded,
 if 
 IconButton),

// Collect For
var command = [
 engineDartPath,
 frontendServer,
 for  --filesystem-root=$root ,
 for 
 if ) lib/$entryPoint ,
 mainPath

更多 Dart 2.3 对此的优化看 这儿 。

到这儿总算到正题了，假如了解 web 前端，了解 React 的话，你会对下面要讲的反常的了解。