第一章 学习指南
1、AS 快捷键
快捷创建Widget: 在dart文件中输入stf或stl出现提示后按回车即可
快捷修复: option + 回车
自动生成构造函数: 选中 final 参数, 快捷键: option + 回车
添加父组件、变为子组件、删除子组件: option + 回车
万能的搜索: 双击shift
查看最近打开的文件: command + E
重命名: fn + shift + f6
查看当前类结构: command + fn + f12
查看源码: 将光标放到要查看源码的类名或方法名上, 长按command然后的点击
查看类的子类: 选中要查看的类, 然后: command + B 或 option + command + B
将代码更新到模拟器上: 选中模拟器然后 command + R
导入类的快捷键: 将光标放在要导入类的上面, 然后按 option + enter
前进后退: 当跟踪代码的时候, 经常跳转到其他类, 后退快捷键: option + command+ 方向左键, 前进快捷键: option + command+ 方向右键
全局搜索: command + shift + F
全局替换: command + shift + R
查找引用: option + shift + F7
Cmd + Option + L ： 代码格式化。
Cmd + “-” 或者 “+” ：收起和展开代码。
Cmd + Shift + “-” 或者 “+” ： 收起和展开全部代码。
Cmd + Shift + Enter ：代码快速补全。
Cmd + F12 ：快速查看当前文件所有方法。
Cmd + Shift + F ：全局搜索。
Cmd + Shift + R ：全局替换。
Cmd + F ：当前文件搜索。
Cmd + R ：当前文件替换。
Cmd + Option + M ：方法抽离或重构。
Cmd + Option + V ： 抽离局部变量。
Cmd + Option + F ：抽离成员变量。
Cmd + O ：全局搜索类/文件/关键字/(包括系统类,自定义类)。
Cmd + Option + W ：抽取代码为单独的方法,或者抽取成get方法。
Cmd + Option + E ：创建文件，抽取代码为单独的方法,或者抽取成get方法。
Cmd + Option + B ：查看抽象类的实现。
Cmd + D ：复制单行。
Cmd+ Delete ：删除行。
Cmd + \ ：热重载(hot reload) 。
Cmd + Option + \ ：热重启(hot restart)。
Cmd+ Shift + Enter ：if后面自动加(){ }。
Cmd+ J ：快速生成模版代码块。
Ctl+ R ：运行项目。
Option + Enter ：在widget包裹一个新的widget。
Option + Enter ：自动修正错误（但是要把光标移动到错误上面）。
Option + Enter ：将StatelessWidget转 StatefulWidget。
Option + Up ：选择这个widget。
Option + Ctl + O ：清除无效包引用。
Option + Ctl + I ：自动缩进对齐/代码对齐。
Option + Shift + Up/Down ：上下移动代码。
Option + 双击 Up ：选择区域。
选中代码 + tab ：选中代码缩进。
选中代码 + shift + tab ：选中代码缩进。
2、自动补全
可以在Android Studio的Plugin中搜素 Flutter Snippets这个插件然后进行安装
3、代码提取
选中代码-->右键选择"Refactor"-->Extract Method...(提取成方法)
4、代码自动格式化
虽然我们可以通过快捷键option(alt)+command(ctrl)+L来在提交代码时格式化, 但是这种手动方式显然还不够效率. 下面我们来借助AS的保存时代码自动格式化功能来释放双手: 在Settings-->Language&Frameworks-->Flutter中选上"Format Code on Save"这个选项. (保存代码时自动格式化)
第二章 Flutter网络和数据存储框架搭建
1、 Flutter网络架构架构设计
支持网络库插拔设计, 且不干扰业务层
简洁易用, 支持配置来进行请求
Adapter设计, 扩展性强
统一异常和返回处理
https://github.com/szy0syz/flutter_bilibili
| HitNet | |
|---|---|
| Dao层 | 首页、详情、点赞、收藏、登录、注册、通知、个人中心、排行... |
| REST ful支持 | GET、POST、DELETE |
| 统一逻辑处理 | Request Processing、Response Processing、Error Processing |
| 适配层 | Dio Adapter、Http Adapter、Mock Adapter |
| 三方库 | dio、http、Mock |
2、基于配置的请求封装与hinet架构搭建
在lib目录下, 新建http目录; 在http目录下分别创建core和request目录; 在request目录下新建"base_request.dart"文件, 在base_request.dart中:
enum HttpMethod { GET, POST, DELETE }
///抽象类封装--基础请求
abstract class BaseRequest {
// curl -X GET "http://api.devio.org/uapi/test/test?requestPrams=11" -H "accept: */*"
// curl -X GET "https://api.devio.org/uapi/test/test/1
var pathParams;
var useHttps = true; // 用于切换http和https
String authority() {//设置域名
return "api.devio.org";
}
HttpMethod httpMethod();
String path();
String url() {
Uri uri;
var pathStr = path();
//拼接path参数
if (pathParams != null) {
if (path().endsWith("/")) {
pathStr = "${path()}$pathParams";
} else {
pathStr = "${path()}/$pathParams";
}
}
//http和https切换
if (useHttps) {
uri = Uri.https(authority(), pathStr, params);
} else {
uri = Uri.http(authority(), pathStr, params);
}
if (needLogin()) {
//给需要登录的接口携带登录令牌
addHeader(LoginDao.BOARDING_PASS, LoginDao.getBoardingPass());
}
print('url:${uri.toString()}');
return uri.toString();
}
bool needLogin();// 用于判断是否需要登录
Map<String, String> params = Map();
///添加参数
BaseRequest add(String k, Object v) {
params[k] = v.toString();
return this;
}
Map<String, dynamic> header = {
HiConstants.authTokenK: HiConstants.authTokenV,
HiConstants.courseFlagK: HiConstants.courseFlagV,
// 'course-flag': 'fa',
// "auth-token": "ZmEtMjAyMS0wNC0xMiAyMToyMjoyMC1mYQ==fa",
};
///添加header
BaseRequest addHeader(String k, Object v) {
header[k] = v.toString();
return this;
}
}
3、基于配置的请求封装与hinet架构搭建-2
在http目录-->request目录--> 新建 test_request.dart 文件, 用于测试接口:
import 'package:flutter_bilibili/http/request/base_request.dart';
//测试排程类
class TestRequest extends BaseRequest {
@override
HttpMethod httpMethod() {
return HttpMethod.GET;
}
@override
bool needLogin() {
return false;
}
@override
String path() {
return 'uapi/test/test';
}
}
在http目录-->core目录-->新建 hi_net.dart 文件:
import 'package:flutter_bilibili/http/core/dio_adapter.dart';
import '../request/base_request.dart';
import 'hi_error.dart';
import 'hi_net_adapter.dart';
///1.支持网络库插拔设计，且不干扰业务层
///2.基于配置请求请求，简洁易用
///3.Adapter设计，扩展性强
///4.统一异常和返回处理
class HiNet {
HiNet._();
static HiNet? _instance;//创建单例
static HiNet getInstance() {//静态方法获取单例
if (_instance == null) {
_instance = HiNet._();
}
return _instance!;
}
// 获取请求结果
Future fire(BaseRequest request) async {
HiNetResponse? response;
var error;
try {
response = await send(request);
} on HiNetError catch (e) {
error = e;
response = e.data;
printLog(e.message);
} catch (e) {
//其它异常
error = e;
printLog(e);
}
if (response == null) {
printLog(error);
}
var result = response?.data;
printLog(result);
var status = response?.statusCode;
switch (status) {
case 200:
return result;
case 401:
throw NeedLogin();
case 403:
throw NeedAuth(result.toString(), data: result);
default:
throw HiNetError(status ?? -1, result.toString(), data: result);
}
}
//发送请求
Future<HiNetResponse<T>> send<T>(BaseRequest request) async {
///使用Dio发送请求
HiNetAdapter adapter = DioAdapter();
return adapter.send(request);
}
void printLog(log) {//用于测试打印
print('hi_net:' + log.toString());
}
}
在随便一个文件内, 构建测试请求:
void _incrementCounter() async {
TestRequest request = TestRequest();
request.add("aa", "ddd").add("bb", "333");
var result = await HiNet.getInstance().fire(request);
print(result);
}
4、 hinet统一异常和返回处理与Adapter模式设计
在http-->core-->新建 hi_error.dart, 用来统一处理异常:
///需要登录的异常
class NeedLogin extends HiNetError {
NeedLogin({int code: 401, String message: '请先登录'}) : super(code, message);
}
///需要授权的异常
class NeedAuth extends HiNetError {
NeedAuth(String message, {int code: 403, dynamic data})
: super(code, message, data: data);
}
///网络异常统一格式类
class HiNetError implements Exception {
final int code;
final String message;
final dynamic data;
HiNetError(this.code, this.message, {this.data});
}
在http-->core-->新建 hi_net_adapter.dart, 用来统一处理网络层返回格式:
import 'dart:convert';
import 'package:flutter_bilibili/http/request/base_request.dart';
///网络请求抽象类
abstract class HiNetAdapter {
Future<HiNetResponse<T>> send<T>(BaseRequest request);
}
/// 统一网络层返回格式
class HiNetResponse<T> {
// 构造方法: 非必填
HiNetResponse({
this.data,
required this.request,
this.statusCode,
this.statusMessage,
this.extra,
});
/// Response body. may have been transformed, please refer to [ResponseType].
T? data;
/// The corresponding request info.
BaseRequest request;
/// Http status code.
int? statusCode;
/// Returns the reason phrase associated with the status code.
/// The reason phrase must be set before the body is written
/// to. Setting the reason phrase after writing to the body.
String? statusMessage;
/// Custom field that you can retrieve it later in `then`.
late dynamic extra;
/// We are more concerned about `data` field.
@override
String toString() {
if (data is Map) {
return json.encode(data);
}
return data.toString();
}
}
在http-->core-->新建 mock_adapter.dart, 用来新建测试适配器:
import 'package:flutter_bilibili/http/core/hi_net_adapter.dart';
import 'package:flutter_bilibili/http/request/base_request.dart';
///测试适配器，mock数据
class MockAdapter extends HiNetAdapter {
@override
Future<HiNetResponse<T>> send<T>(BaseRequest request) async {
return Future.delayed(Duration(milliseconds: 1000), () {
return HiNetResponse(
request: request,
data: {"code": 0, "message": 'success'} as T,
statusCode: 403);
});
}
}
在hi_net.dart中使用:
//发送请求
Future<HiNetResponse<T>> send<T>(BaseRequest request) async {
///使用Dio发送请求
HiNetAdapter adapter = MockAdapter();
return adapter.send(request);
}
5、扩展hinet添加对dio的支持
在pubspec.yaml中导入dio三方库:
dependencies:
flutter:
sdk: flutter
...
cupertino_icons: ^1.0.2
dio: ^4.0.0
在http-->core-->新建 dio_adapter.dart ,用于适配Dio:
import 'package:dio/dio.dart';
import 'package:flutter_bilibili/http/core/hi_error.dart';
import 'package:flutter_bilibili/http/core/hi_net_adapter.dart';
import 'package:flutter_bilibili/http/request/base_request.dart';
///Dio适配器
class DioAdapter extends HiNetAdapter {
@override
Future<HiNetResponse<T>> send<T>(BaseRequest request) async {
// 搞两个变量，一个没初始化赋值，一个初始化赋值
// options 是Dio的可选参数
var response, options = Options(headers: request.header);
var error;
try { //发送网络请求
if (request.httpMethod() == HttpMethod.GET) {
response = await Dio().get(request.url(), options: options);
} else if (request.httpMethod() == HttpMethod.POST) {
response = await Dio()
.post(request.url(), data: request.params, options: options);
} else if (request.httpMethod() == HttpMethod.DELETE) {
response = await Dio()
.delete(request.url(), data: request.params, options: options);
}
} on DioError catch (e) {
error = e;
response = e.response;
}
if (error != null) {
///抛出HiNetError
throw HiNetError(response?.statusCode ?? -1, error.toString(),
data: await buildRes(response, request));
}
return buildRes(response, request);
}
///构建HiNetResponse
Future<HiNetResponse<T>> buildRes<T>(
Response? response, BaseRequest request) {
return Future.value(HiNetResponse(
//?.防止response为空
data: response?.data,
request: request,
statusCode: response?.statusCode,
statusMessage: response?.statusMessage,
extra: response));
}
}
6、Dart JSON编码器和解码器剖析
void test(){
const jsonString = "{\"name\":\"flutter\",}"
//json 转map
Map<String, dynamic> jsonMap = jsonDecode(jsonString);
print('name:${jsonMap['name']}');
//map 转JSON
String json = jsonEncode(jsonMap);
print('json:$json');
}
7、三种JSON解析技巧带你解放生产力
手写实体类
-
网页自动生成实体类✅
通过: https://www.devio.org/io/tools/json-to-dart/ 在线生成实体类
-
json_serializable使用技巧
官方demo: https://github.com/google/json_serializable.dart/tree/master/example
Step1: 安装插件
dependencies:
...
dio: ^4.0.0
json_annotation: ^4.0.1
dev_dependencies:
...
json_serializable: ^4.1.3
build_runner: ^2.0.4
Step2: 配置实体类
示例: 比如在result.dart中:
// result.g.dart 将在我们运行生成命令后自动生成
import 'package:json_annotation/json_annotation.dart';
part 'result.g.dart'; //运行命令后自动生成的文件名
@JsonSerializable()
class Result {
//定义字段
int code;
String method;
String requestPrams;
//构造方法
Result(this.code, this.method, this.requestPrams);
//固定格式，不同的类使用不同的mixin即可
factory Result.fromJson(Map<String, dynamic> json) => _$ResultFromJson(json);
//固定格式，
Map<String, dynamic> toJson() => _$ResultToJson(this);
}
因为实体类的生成代码还不存在, 所以上面代码会提示一些错误是正常现象
Step3 : 执行build生成实体类
$ flutter packages pub run build_runner build
11 统一缓存管理框架hicache设计
添加依赖插件: shared_preferences
shared_preferences: ^0.5.12+4
hi_cache封装
import 'package:shared_preferences/shared_preferences.dart';
///缓存管理类
class HiCache {
SharedPreferences? prefs;
HiCache._() {
init();
}
static HiCache? _instance;
HiCache._pre(SharedPreferences prefs) {
this.prefs = prefs;
}
///预初始化，防止在使用get时，prefs还未完成初始化
static Future<HiCache> preInit() async {
if (_instance == null) {
var prefs = await SharedPreferences.getInstance();
_instance = HiCache._pre(prefs);
}
return _instance!;
}
static HiCache getInstance() {
if (_instance == null) {
_instance = HiCache._();
}
return _instance!;
}
//初始化
void init() async {
if (prefs == null) {
prefs = await SharedPreferences.getInstance();
}
}
setString(String key, String value) {
prefs?.setString(key, value);
}
setDouble(String key, double value) {
prefs?.setDouble(key, value);
}
setInt(String key, int value) {
prefs?.setInt(key, value);
}
setBool(String key, bool value) {
prefs?.setBool(key, value);
}
setStringList(String key, List<String> value) {
prefs?.setStringList(key, value);
}
remove(String key) {
prefs?.remove(key);
}
// 通过泛型的方式来获取数据, 提高复用性
T? get<T>(String key) {
var result = prefs?.get(key);
if (result != null) {
return result as T;
}
return null;
}
}
测试使用封装的hi_cache
在main.dart中:
class _MyHomePageState extends State<MyHomePage>{
@voerride
void initState() {
super.initState();
HiCache.preInit(); //初始化
}
}
/// 保存与读取本地信息
void test(){
HiCache.getInstance().setString("aa","1234");
var value = HiCache.getInstance().get("aa");
print('value:$value')
}
