小知识,大挑战!本文正在参与“程序员必备小知识”创作活动
本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
学习网站
列一些flutter的学习网站,给大家参考一下,我平常用这些比较多,第一个flutter中文网是必看的,而且学习flutter第一步肯定是要搭建环境,flutter中文网已经描述的相当详细。
其他一些网站都是一些前辈写的flutter程序,在我们实战过程中起到指导作用,我们就负责取其精华,为己所用 😄 😄 😄
一、大前端之路如何选择
知乎对于RN和Flutter的回答:www.zhihu.com/question/38…
有一句话触动到我了:
用好扳手的能力比选择扳手更重要,不管是 flutter 或者 react-native ,有的人也许只是写了 hello world 或者跑了个开源项目就开始跟风批判,很多时候框架的性能并不是我们的瓶颈,而使用的姿势和理解的程度才是我们的短板。
总结:react-native 更适合前端领域的开发者,flutter 更适合原生领域的开发者。
二、安装flutter
2.1、安装文档
安装步骤可以参考flutter中文网站,有一个很重要的点在于更新环境变量,我下面着重写一下如何更新环境变量。
flutterchina.club/setup-macos…
2.2、更新环境变量
我们在命令行只能更新当前会话的PATH变量,如Clone Flutter repo所示。 但是,我们需要的是永久更新此变量,这样我们就可以随时打开终端,运行flutter
命令。
因为我的是mac电脑,所以说一下mac如何更新,但其实都大同小异,而且文档也有,有其它系统的可以参考flutter网站更新。
- 确定您Flutter SDK的目录,您将在步骤3中用到。
- 打开(或创建)
$HOME/.bash_profile
. 文件路径和文件名可能在您的机器上不同. - 添加以下行并更改
[PATH_TO_FLUTTER_GIT_DIRECTORY]
为克隆Flutter的git repo的路径:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
注意:PATH_TO_FLUTTER_GIT_DIRECTORY
为你flutter的路径,比如“~/document/code”
export PATH=~/document/code/flutter/bin:$PATH
- 运行
source $HOME/.bash_profile
刷新当前终端窗口.
注意:如果你使用的是zsh,终端启动时 ~/.bash_profile
将不会被加载,解决办法就是修改 ~/.zshrc
,在其中添加:source ~/.bash_profile
- 通过运行
flutter/bin
命令验证目录是否在已经在PATH中:
echo $PATH
三、检测环境
检测Flutter开发环境
flutter doctor
如果报:NO_PROXY is not set,在.bash_profile添加一行,export no_proxy="localhost,127.0.0.1"更新配置的环境变量
source .bash_profile
四、JIT 与 AOT
环境配置完了,这边要提一嘴flutter的编译模式,也是flutter引以为傲的两种模式。即JIT和AOT。
JIT (Just In Time,即时编译) 和 AOT (Ahead Of Time,运行前编译) 。
- JIT 在运行时即时编译,在开发周期中使用,可以动态下发和执行代码,开发测试效率高,但运行速度和执行性能则会因为运行时即时编译受到影响。
- AOT 即提前编译,可以生成被直接执行的二进制代码,运行速度快、执行性能表现好,但每次执行前都需要提前编译,开发测试效率低。
总结来讲,在开发期使用JIT编译,可以缩短产品的开发周期。Flutter最受欢迎的功能之一热重载,正是基于此特性。而在发布期使用AOT,不需要像RN那样在跨平台JS代码和原生之间建立方法调用的映射关系。所以,基于这两点而言,Dart具有运行速度快、执行性能好的特点。
五、Dart语法
写过Swift或者Kotlin的同学,再来写Dart,应该是可以快速入门的,因为各大语言发展到后期我们发现越来越趋于相同,语法越来越类似,而且对于写惯Swift的我来说,Dart还是有点不够先进 😅 😅 😅
下面我简单介绍一下Dart语法,让大家有一个基本认识,有了基本认识之后,就可以开始写了,有不会写的时候回到官方文档看一下,边写边记忆是我的方法,对初学者而言,有一些高深的语法其实都不需要用到,等后面想要深造的时候再去了解也不迟。
5.1、数据类型与基础语法
Dart的数据类型跟其他语言差不多,整型int,浮点型double,字符串String,bool型,数组List,字典Map,原来还不支持可选型,现在好像支持了,支持写 final double? width;
这种代码了,个人感觉也是跟Swift越来越像了,啥时候能把封号;去了就更像了。
Dart也支持类型推断,看个人习惯,有默认值的我一般不写类型。
var age = 10;
var score = 58.8;
var name = '张三';
var isMan = true;
var students = ['李四', '王五', '赵六'];
var map = {'张三': 10, '李四': 13, '王五': 16, '赵六': 20};
当然像我们字符串也可以用+运算符相加,数组也可以。
var str = 'abc' + 'def';
var arr = ['a', 'b'] + ['c', 'd'];
print(str);
print(arr);
//打印
flutter: abcdef
flutter: [a, b, c, d]
遍历打印
for (var item in arr) {
print(item);
}
arr.forEach((element) {print(element);});
var map = {'张三': 10, '李四': 13, '王五': 16, '赵六': 20};
map.forEach((key, value) {
print('$key == $value');
});
常量定义
// final 初次赋完值就不可改变,可以运行时确定值
final age = 10;
var age1 = 4;
var age2 = 6;
final age3 = age1 + age2;
// const 静态变量,不可修改,在编译期就要确定值
const count = 6;
5.2、函数
无参函数
void getAge() {
print(10);
}
带参函数
// 无返回值
void sum(int num1, int num2) {
print(num1 + num2);
}
// 有返回值
int sum(int num1, int num2) {
return num1 + num2;
}
可选值、默认值
// 可选命名参数
void printNum({int? num}) {
print(num);
}
// 可选参数 参数可省略
void printNum1([int? num]) {
print(num);
}
// 参数默认值
void printNum2({int num = 0}) {
print(num);
}
printNum(num: 1);
printNum1(1);
printNum2();
5.3、类
Dart的类是用class关键字的,内部可以有参数,有方法。
class Student {
var age;
var name = 18;
var sex;
}
继承跟其他语言也类似,只是用extends关键字,
class Student extends Human {
int? grade;
}
class Human {
var age = 18;
String? name;
int? sex;
}
var stu = Student();
stu.name = '张三';
stu.age = 9;
stu.grade = 6;
var human = Human();
human.name = '李四';
基本语法就先写到这,下面一篇预计写Flutter最核心的Widget,介绍一些基础组件,也会写一些基础UI,感兴趣的朋友关注一波吧。😜 😜 😜
六、Flutter 未来可期
用了一段时间Flutter之后,还是有发现一些页面表现没有原生流畅,在刚开始推出的时候的风风火火,现在也有一些降温了,但作为开发者,尤其是一名移动端开发者,在只会一个移动端的情况下,学习一下flutter还是很有竞争力。尤其是当我们用一份代码同时上架安卓和iOS平台的时候,还是有一定成就感的。
当然跨端确实会有一些各自平台的特性可能需要适配,但是一份代码一份逻辑,光这个优点就足以抹平适配工作的伤感,而且Flutter已经尽可能帮我们做了这项工作。
最后,我们虽然看到Flutter有5K+的Issues,但Flutter团队一直在努力,在1.0发布至今,已经解决了2万多个Issues,而且131k的star,应该是傲视整个技术圈的。
在无数人已经开始看衰Flutter的时候,我还是觉得Flutter未来可期。感兴趣的朋友就关注一波,一起学习吧!!!😁 😁 😁
文章推荐:
Flutter常用库:
dio: 3.0.0 // 网络
fluro: ^1.6.3 // 路由
bot_toast: ^3.0.4 // toast弹框
pull_to_refresh: ^1.6.2 // 刷新
flutter_keyboard_visibility: ^3.3.0 // 键盘管理
flutter_svg: ^0.19.1 // svg加载
provider: ^4.1.2 // 状态管理
fijkplayer: ^0.8.7 // 视频
webview_flutter: ^1.0.3 // webview
sqflite: 1.3.1+2 // 数据库
shared_preferences: ^0.5.12+4 // 本地存储
fluttertoast: ^7.1.6 // toast弹框
dio_cookie_manager: ^1.0.0 // cookie管理