Flutter开发实战-零基础入门之旅(Dart语法)

737 阅读4分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金

学习网站

列一些flutter的学习网站,给大家参考一下,我平常用这些比较多,第一个flutter中文网是必看的,而且学习flutter第一步肯定是要搭建环境,flutter中文网已经描述的相当详细。

其他一些网站都是一些前辈写的flutter程序,在我们实战过程中起到指导作用,我们就负责取其精华,为己所用 😄 😄 😄

flutterchina.club

github.com/iampawan/Fl…

github.com/Solido/awes…

github.com/simplezhli/…

一、大前端之路如何选择

知乎对于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网站更新。

  1. 确定您Flutter SDK的目录,您将在步骤3中用到。
  2. 打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同.
  3. 添加以下行并更改[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
  1. 运行 source $HOME/.bash_profile 刷新当前终端窗口.

注意:如果你使用的是zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加:source ~/.bash_profile 

  1. 通过运行flutter/bin命令验证目录是否在已经在PATH中:
echo $PATH

三、检测环境

检测Flutter开发环境

flutter doctor

Snip20210608_1.png

如果报: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 | 状态管理指南篇——Provider

Flutter组件化探索——Pod集成

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管理