没有合适的资源?快使用搜索试试~ 我知道了~
Flutter完整开发实战详解1
需积分: 0 14 下载量 137 浏览量
2022-08-04
16:54:50
上传
评论
收藏 2.85MB PDF 举报
温馨提示
试读
72页
前言在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从 0 开发一个完整的 Flutter APP,配套高完成度 Fl
资源详情
资源评论
资源推荐
Flutter
完整开发实战详解
第 1 页 共 72 页
Flutter
完整开发实战详解
Flutter
完整开发实战详解
(
一、
Dart
语言和
Flutter
基础
)
前言
在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从 0 开发一个
完整的 Flutter APP,配套高完成度 Flutter 开源项目 GSYGithubAppFlutter。同时也会提供一些 Flutter
的开发细节技巧,并针对开发过程中可能遇到的问题进行填坑。
系列文章分为三篇,第一部分是基础篇(针对 Dart 语言和 Flutter 基础),第二部分是 App 快速开发实
战篇,第三部分是细节填坑篇。
笔者相继开发过 Flutter、React Native 、Weex 等主流跨平台框架项目,其
中 Flutter 的跨平台兼容性无疑最好。前期开发调试完全在 Android 端进行的情况下,
第一次在 IOS 平台运行居然没有任何错误,并且还没出现 UI 兼容问题,相信对于经历过跨
平台开发的猿们而言,这是多么的不可思议画面。并且 Fluuter 的 HotLoad 相比较其他两
个平台,也是丝滑的让人无法相信。吹爆了!
这些特点其实这得益于 Flutter Engine 和 Skia ,如果有兴趣的可以看看笔者之前的《移
动端跨平台开发的深度解析》。好了,感慨那么多,让我们进入正题吧。
一、基础篇
本篇主要涉及:环境搭建、Dart 语言、Flutter 的基础。
1、环境搭建
Flutter 的环境搭建十分省心,特别对应 Android 开发者而言,只是在 Android Stuido
上安装插件,并下载 flutter Sdk 到本地,配置在环境变量即可。其实中文网的搭建 Futter 开发环境 已经
很贴心详细,从平台指引开始安装基本都不会遇到问题。
这里主要是需要注意,因为某些不可抗力的原因,国内的用户需要配置 Flutter 的代理,并且国内用户在
Flutter
完整开发实战详解
第 2 页 共 72 页
搜索 Flutter 第三方包时,也是在 https://pub.flutter-io.cn 内查找,下方是需要配置到环境变量的地址。(ps
Android Studio 下运行 IOS 也是蛮有意思的(◐‿ ◑))
///win 直接配置到环境编辑即可,mac 配置到 bash_profile
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
2、Dart 语言下的 Flutter
在跨平台开领域被 JS 一统天下的今天,Dart 语言的出现无疑是一股清流。作为后来者,Dart 语言有着
不少 Java、kotlin 和 JS 的影子,所以对于 Android 原生开发者、前端开发者而言无疑是非常友好的。
官方也提供了包括 IOS 开发者,React Native 等开发者迁移到 Flutter 上的文档,所以请不要担心,Dart
语言不会是你掌握 Flutter 的门槛。甚至作为开发者,就算你不懂 Dart 也可以看着代码摸索。
Come on,下面主要通过对比,简单讲述下 Dart 的一些特性,主要涉及的是 Flutter 下使用。
基本类型
var 可以定义变量,如 var tag = "666" ,这和 JS 、 Kotlin 等语言类似,同时 Dart 属于动态类型语言,
支持闭包。
Dart 中 number 类型分为 int 和 double ,其中 java 中的 long 对应的也是 Dart 中的 int 类型。Dart
中没有 float 类型。
Dart 下只有 bool 型可以用于 if 等判断,不同于 JS 这种使用方式是不合法的 var g = "null"; if(g){} 。
DART 中,switch 支持 String 类型。
变量
Dart 不需要给变量设置 setter getter 方法, 这和 kotlin 等类似。Dart 中所有的基础类型、类等都继承
Object ,默认值是 NULL, 自带 getter 和 setter ,而如果是 final 或者 const 的话,那么它只有一个
getter 方法。
Flutter
完整开发实战详解
第 3 页 共 72 页
Dart 中 final 和 const 表示常量,比如 final name = 'GSY'; const value= 1000000; 同时 static const 组合
代表了静态常量。其中 const 的值在编译期确定,final 的值要到编译时才确定。(ps Flutter 在 Release
下是 AOT 模式。)
Dart 下的数值,在作为字符串使用时,是需要显式指定的。比如:int i = 0; print("aaaa" + i); 这样并
不支持,需要 print("aaaa" + i.toString()); 这样使用。这和 Java 与 JS 存在差异。所以在使用动态类型
时,需要注意不要把 number 类型当做 String 使用。
DART 中数组等于列表,所以 var list = []; 和 List list = new List() 可以简单看做一样。
方法
Dart 下 ?? 、??= 属于操作符,如: AA ?? "999" 表示如果 AA 为空,返回 999;AA ??= "999" 表示如果 AA
为空,给 AA 设置成 999。
Dart 方法可以设置 参数默认值 和 指定名称 。比如: getDetail(Sting userName, reposName, {branch =
"master"}){} 方法,这里 branch 不设置的话,默认是 “master” 。参数类型 可以指定或者不指定。调用效
果: getRepositoryDetailDao(“aaa", "bbbb", branch: "dev");
Dart 不像 Java ,没有关键词 public 、private 等修饰符,_下横向直接代表 private ,但是
有 @protected 注解。
Dart 中多构造函数,可以通过如下代码实现的。默认构造方法只能有一个,而通过 Model.empty() 方法可
以创建一个空参数的类,其实方法名称随你喜欢。而变量初始化值时,只需要通过 this.name 在构造方法中
指定即可:
class ModelA {
String name;
String tag;
//默认构造方法,赋值给 name 和 tag
ModelA(this.name, this.tag);
//返回一个空的 ModelA
ModelA.empty();
//返回一个设置了 name 的 ModelA
ModelA.forName(this.name);
}
Flutter
Flutter
完整开发实战详解
第 4 页 共 72 页
Flutter 中支持 async/await 。这一点和 ES7 很像,如下代码所示,只是定义的位置不同。同时异步操作
也和 ES6 中的 Promise 很像,只是 Flutter 中返回的是 Future 对象,通过 then 可以执行下一步。如果返回
的还是 Future 便可以 then().then.() 的流式操作了 。
///模拟等待两秒,返回 OK
request() async {
await Future.delayed(Duration(seconds: 1));
return "ok!";
}
///得到"ok!"后,将"ok!"修改为"ok from request"
doSomeThing() async {
String data = await request();
data = "ok from request";
return data;
}
///打印结果
renderSome() {
doSomeThing().then((value) {
print(value);
///输出 ok from request
});
}
Flutter 中 setState 很有 React Native 的既视感,Flutter 中也是通过 state 跨帧实现管理数据状态的,
这个后面会详细讲到。
Flutter 中一切皆 Widget 呈现,通过 build 方法返回 Widget,这也是和 React Native 中,通过 render 函
数返回需要渲染的 component 一样的模式。
3、Flutter Widget
在 Flutter 中,一切的显示都是 Widget 。Widget 是一切的基础,作为响应式的渲染,属于 MVVM 的
实现机制。我们可以通过修改数据,再用 setState 设置数据,Flutter 会自动通过绑定的数据更新 Widget 。
所以你需要做的就是实现 Widget 界面,并且和数据绑定起来。
Widget 分为 有状态 和 无状态 两种,在 Flutter 中每个页面都是一帧。无状态就是保持在那一帧。而有
状态的 Widget 当数据更新时,其实是绘制了新的 Widget,只是 State 实现了跨帧的数据同步保存。
Flutter
完整开发实战详解
第 5 页 共 72 页
这里有个小 Tip ,当代码框里输入 stl 的时候,可以自动弹出创建无状态控件的模板
选项,而输入 stf 的时,就会弹出创建有状态 Widget 的模板选项。
代码格式化的时候,括号内外的逗号都会影响格式化时换行的位置。
如果觉得默认换行的线太短,可以在设置-Editor-Code Style-Dart-Wrapping and
Braces-Hard wrap at 设置你接受的数值。
3.1、无状态 StatelessWidget
直接进入主题,下方代码是无状态 Widget 的简单实现。
继承 StatelessWidget,通过 build 方法返回一个布局好的控件。可能现在你还对 Flutter 的内置控件不
熟悉,but Don't worry , take is easy ,后面我们就会详细介绍。这里你只需要知道,一个无状态的 Widget
就是这么简单。
Widget 和 Widget 之间通过 child: 进行嵌套。其中有的 Widget 只能有一个 child,比如下方
的 Container ;有的 Widget 可以多个 child ,也就是 children:,比如` Colum 布局。下方代码便是 Container
Widget 嵌套了 Text Widget。
import 'package:flutter/material.dart';
class DEMOWidget extends StatelessWidget {
final String text;
//数据可以通过构造方法传递进来
DEMOWidget(this.text);
@override
Widget build(BuildContext context) {
//这里返回你需要的控件
//这里末尾有没有的逗号,对于格式化代码而已是不一样的。
return Container(
//白色背景
color: Colors.white,
//Dart 语法中,?? 表示如果 text 为空,就返回尾号后的内容。
child: Text(text ?? "这就是无状态 DMEO"),
);
}
剩余71页未读,继续阅读
7323
- 粉丝: 22
- 资源: 328
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于matlab实现对表面肌电信号进行归一化处理,并对归一化后的图形显示 .rar
- 基于matlab实现单级倒立摆的 T-S 模型 包括 LMI 程序源码
- 图书管理系统(struts+hibernate+spring+ext).rar
- 基于matlab实现此压缩包包含语音信号处理中的语音变声代码加音频.rar
- STM32使用PWM驱动舵机并通过OLED显示
- 基于matlab实现车辆路径规划;遗传算法;matlab代码.rar
- 图书管理系统(struts+hibernate+spring)130225.rar
- 基于matlab实现采用标量衍射理论,实现菲涅尔衍射和夫琅禾费衍射,对光波的波前传播和数字全息的应用有帮助.rar
- JavaScript版去除链表重复元素
- 微信小程序项目-功德木鱼(带设置面板-自定义文字、可选字体颜色、可选木鱼样式)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0