阅读 82

Flutter完整开发实战详解笔记

Flutter完整开发实战详解

如何快速从0开发一个完整的Flutter App,配套高完成度Flutter开源项目GSYGithubAppFlutter 同时会提供一些Flutter的开发细节技巧,之后深入源码和实战为你全面解析Flutter

一、基础篇

本篇主要涉及:环境搭建、Dart语言、Flutter的基础

1、环境搭建

Flutter 的环境搭建⼗分省⼼,特别对应 Android 开发者⽽⾔,只是在 Android Stuido 上安装插件,并下载flutter Sdk到本地,配置在环境变量即可,其实中⽂⽹的搭建Futter开发环境 已经很贴⼼详细,从平台指引开始安装基本都不会遇到问题。

这⾥主要是需要注意,因为某些不可抗⼒的原因,国内的⽤户有时候需要配置 Flutter 的代理,并且国内⽤户在搜索 Flutter 第三⽅包时,也是在 https://pub.flutter-io.cn 内查找,下⽅是需要配置到环境变量的地址。

//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

2.1、基本类型

  • var 可以定义变量,会自推导出数据类型
  • Dart 中 number 类型分为 int 和 double ,其中 java 中的 long 对应的也是 Dart 中的 int 类型。Dart 中没有 float 类型。
  • Dart 下只有 bool 型可以⽤于 if 等判断
  • DART中,switch ⽀持 String 类型。

2.2、变量

  • Dart 不需要给变量设置 setter getter ⽅法, 这和 kotlin 等类似。Dart 中所有的基础类型、类等都继承 Object ,默认值是 NULL, ⾃带 getter 和 setter ,⽽如果是 final 或者 const 的话,那么它只有⼀个 getter ⽅法。
  • 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() 可以简单看做⼀ 样。

2.3、方法

  • 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);
}
复制代码

2.4、Flutter

  • Flutter 中⽀持 async / await
  • Flutter 中 setState 很有 React Native 的既视感,Flutter 中也是通过 state 跨帧实现管理数据状态的
  • Flutter 中⼀切皆 Widget 呈现,通过 build ⽅法返回 Widget,这也是和 React Native 中,通过render 函数返回需要渲染的 component ⼀样的模式
  • Stream 对应的 async* / yield 也可以⽤于异步

3、Flutter Widget

在 Flutter 中,⼀切的显示都是 Widget 。Widget 是⼀切的基础,作为响应式的渲染,类似 MVVM的实现机制。

我们可以通过修改数据,再⽤ setState 设置数据,Flutter 会⾃动通过绑定的数据更新 Widget 。 所以你需要做的就是实现 Widget 界⾯,并且和数据绑定起来。

Widget 分为 有状态 和 ⽆状态 两种,在 Flutter 中每个⻚⾯都是⼀帧,⽆状态就是保持在那⼀帧,⽽有状态的 Widget 当数据更新时,其实是绘制了新的 Widget,只是 State 实现了跨帧的数据同步保存。

这⾥有个⼩ Tip ,当代码框⾥输⼊ stl 的时候,可以⾃动弹出创建⽆状态控件的模板选项,⽽输⼊ stf 的时,就会弹出创建有状态 Widget 的模板选项。

代码格式化的时候,括号内外的逗号都会影响格式化时换⾏的位置。

如果觉得默认换⾏的线太短,可以在设置-Editor-Code Style-Dart-Wrapping and Braces-Hardwrap at 设置你接受的数值。

3.1、无状态StatelessWidget

3.2、有状态StatefulWidget

State 中主要的声明周期有 :

  • initState :初始化,理论上只有初始化⼀次,第⼆篇中会说特殊情况下。
  • didChangeDependencies:在 initState 之后调⽤,此时可以获取其他 State 。
  • dispose :销毁,只会调⽤⼀次。

4、Flutter布局

Flutter中拥有需要将近30种内置的布局Widget,其中常⽤有 Container、Padding、Center、Flex、Stack、Row、Column、ListView 等

5、Flutter页面

Flutter中除了布局的Widget,还有交互显示的 Widget 和完整⻚⾯呈现的Widget。其中常⻅的有MaterialApp、Scaffold、Appbar、Text、Image、FlatButton等。

资源推荐 Github : https://github.com/CarGuo/ 《跨平台项⽬开源项⽬推荐》 《移动端跨平台开发的深度解析》

二、快速开发实战篇

本篇将为你着重展示:如何搭建⼀个通⽤的Flutter App 常⽤功能脚⼿架,快速开发⼀个完整的 Flutter 应⽤。

主要分为: 基础控件、数据模块、其他功能 三部分。

一、基础控件

1、TabBar控件实现

顶部、底部选项tab

2、上下刷新列表
3、Loading框
4、矢量图标库
5、路由跳转

Flutter 中的⻚⾯跳转是通过 Navigator 实现的,路由跳转⼜分为:带参数跳转和不带参数跳转。不带参数跳转⽐较简单,默认可以通过 MaterialApp 的路由表跳转;⽽带参数的跳转,参数通过跳转⻚⾯的构造⽅法传递。

二、数据模块

1、网络请求

Dio封装了网络请求中的数据转换、拦截器、请求返回等

2、Json序列号

json_serializable插件

3、Redux State

全局状态管理机,跨控件管理、同步state,所以flutter_redux等着你征服它

4、数据库

在 GSYGithubAppFlutter 中,数据库使⽤的是 sqflite 的封装,其实就是 sqlite 语法的使⽤⽽已,有兴趣的可以看看完整代码 DemoDb.dart 。

三、其他功能

1、返回键监听

Flutter 中 ,通过 WillPopScope 嵌套,可以⽤于监听处理 Android 返回键的逻辑

2、前后台监听

WidgetsBindingObserver 包含了各种控件的⽣命周期通知,其中的 didChangeAppLifecycleState 就可以⽤于做前后台状态监听

3、键盘焦点处理

GestureDetector+FocusScope可以满足需求

4、启动页

IOS启动⻚,在 ios/Runner/Assets.xcassets/LaunchImage.imageset/ 下, 有 Contents.json ⽂件和启动图⽚,将你的启动⻚放置在这个⽬录下,并且修改 Contents.json 即可,具体尺⼨⾃⾏⾕歌即可。

Android启动⻚,在 android/app/src/main/res/drawable/launch_background.xml 中已经有写好的启动⻚, 部分被屏蔽,只需要打开这个屏蔽,并且将你启动图修改为 launch_image 并放置到各个 mipmap ⽂件夹即可,记得各个⽂件夹下提供相对于⼤⼩尺⼨的⽂件。

三、打包与填坑篇

《Flutter之禅 内存优化篇》,⽂中对于 Flutter 的内存做了深度的探索,其中有 ⼀个很有趣的发现是: Flutter 中 ImageCache 缓存的是 ImageStream 对象,也就是缓存的是⼀个异步加载的图⽚的对象。 在图⽚加载解码完成之前,⽆法知道到底将要消耗多少内存。 所以容易产⽣⼤量的IO操作,导致内存峰值过⾼。

八、实用技巧与填坑

1、Text 的 TextOverflow.ellipsis 不⽣效 2、获取控件的⼤⼩和位置 3、获取状态栏⾼度和安全布局 4、设置状态栏颜⾊和图标颜⾊ 5、系统字体缩放 6、Margin 和 Padding 在使⽤ Container 的时候我们经常会使⽤到 margin 和 padding 参数,其实在上⼀篇我们已经说过, Container 其实只是对各种布局的封装,内部的 margin 和 padding 其实是通过 Padding 实现的,⽽ Padding 不⽀持负数,所以如果你需要⽤到负数的情况下,推荐使⽤ Transform 。 7、控件圆⻆裁剪 8、PageView 9、懒加载 10、Android 返回键回到桌⾯

九、深入绘制原理

Widget 、 Element 、 RenderObject 的关系,同时也知道了 Widget 的布局逻辑,最终所有 Widget 都转化为 RenderObject 对象, 它们堆叠出我们想要的画⾯。

所以在 Flutter 中,最终⻚⾯的 Layout 、 Paint 等都会发⽣在 Widget 所对应的 RenderObject⼦类中,⽽ RenderObject 也是 Flutter 跨平台的最⼤的特点之⼀: 所有的控件都与平台⽆关 ,这⾥简单的⼈话就是: Flutter 只要求系统提供的 “Canvas”,然后开发者通过 Widget ⽣成RenderObject “直接” 通过引擎绘制到屏幕上。

Flutter环境配置

https://www.cnblogs.com/yangyxd/p/8809512.html

Windows环境下,添加Flutter国内镜像

https://blog.csdn.net/qq_34960412/article/details/105270415

文章分类
Android
文章标签