Dart 高频语法 & Flutter 开发套路

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<String, Logger> _cache =
      <String, Logger>{};

  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 也是这个套路,项目结构如下:


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<String, Handler> handlers = {
  '/': new Handler(handlerFunc: (BuildContext context, _) {
    return new IndexContainer();
  }),
  '/topic/:id': new Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    return new TopicContainer(id: params['id'][0]);
  })
};

var notFoundHandler = new Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> 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等

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容