flutter新手集训营(上)

mingetian
1,756 阅读7分钟

前端开发是否迎来大统一？flutter是否可以胜任原生开发的性能？带着一个有一个的疑问，去了解flutter。 flutter开发语言上的选择。为什么最终使用了dart一个曾经js热度大增的时刻却不温不火的语言。以及dart对现有语言特性优点的吸收。 这里不讲述flutter开发app的优点以及和reactNative、ionic的一些对比。有需要了解到自行百度或者google。

知识简介

  • flutter使用dart语法开发
  • flutter开发环境搭建
  • fullter一套代码多端运行。ios android web 服务器。
  • dart支持类型检查
  • flutter在GitHub上目前有5000+Issues

1.dart语言

  • 在Dart中，一切都是对象，一切对象都是class的实例，哪怕是数字类型、方法甚至null都是对象，所有的对象都是继承自Object
  • 虽然Dart是强类型语言，但变量类型是可选的因为Dart可以自动推断变量类型
  • Dart支持范型，List表示一个整型的数据列表，List则是一个对象的列表，其中可以装任意对象
  • Dart支持顶层方法（如main方法），也支持类方法或对象方法，同时你也可以在方法内部创建方法
  • Dart支持顶层变量，也支持类变量或对象变量
  • 跟Java不同的是，Dart没有public protected private等关键字，如果某个变量以下划线（_）开头，代表这个变量在库中是私有的，具体可以看这里
  • Dart中变量可以以字母或下划线开头，后面跟着任意组合的字符或数字

1）数据类型

  • numbers 数字类型 可细分为int和double
  • strings 字符串类型
  • booleans 布尔类型
  • lists(或者是arrays) 数据类型
  • maps 键值对
  • runes（UTF-32字符集的字符）
  • symbols

2）变量的声明

var const final int double String bool List Map等等。

这里说一下var const final定义变量的区别:

如果你绝不想改变一个变量，使用final或const，不要使用var或其他类型，一个被final修饰的变量只能被赋值一次，一个被const修饰的变量是一个编译时常量（const常量毫无疑问也是final常量）。可以这么理解：final修饰的变量是不可改变的，而const修饰的表示一个常量。

注意：实例变量可以是final的但不能是const的 类的静态属性是可以使用const的

区别一：final 要求变量只能初始化一次，并不要求赋的值一定是编译时常量，可以是常量也可以不是。而 const 要求在声明时初始化，并且赋值必需为编译时常量。

区别二：final 是惰性初始化，即在运行时第一次使用前才初始化。而 const 是在编译时就确定值了。

3）函数

  • dart代码的执行是从主入口函数main开始的。void函数返回值类型，无参数。
//定义函数的形式
void main()=>runStart();
//类似于js的箭头函数
void main(){
    runStart();
}
//和上面是一个意思
  • 函数参数的传递 必传参数和可选参数
//第一个num函数返回值类型，其他是变量的类型 其中a,b,c为必传参数
num add(num a,num b,num c){
    return a+b+c;
}
void main()=>add(1,2,3);

/**
第一个num函数返回值类型，其他是变量的类型 其中a,b,c为非必传参数
下面函数为非不传参数给出了初始值
*/
num add({num a=0,num b=0,num c=0}){
    return a+b+c;
}
void main()=>add(a:1,b:2);

/**
第一个num函数返回值类型，其他是变量的类型 其中a必传，b和c非必传参数
下面函数为非不传参数给出了初始值
*/
num add(num a,{num b=0,num c=0){
    return a+b+c;
}
void main()=>add(1,b:1,c:2);

3）运算符

js有隐式类型转化和除了0 false null NaN undefied ''为假其他全是真值的特性。 但是dart没有。dart是强类型语言。

  • 算术运算符
int a = 5;
int b = 10;
print(a+b); //15
print(a-b); //-5
print(a*b); 50
print(a/b); 0.5
print(a~/b);0 除以并取整数位
//--和++和% 和其他一样就不在接列啦
//其中+运算符也可以用于字符串拼接和js相同
  • 关系运算符
//dart中没有===操作符。
//==操作符可以比较不同数据类型的值但是会提示类型不相关
//可以在根目录下新建analysis_option.yaml文件 不同类型==就会报错
//!=和==用法一样
linter:
    rules:
        - unrelated_type_equality_checks
        
analyzer: 
    error:
        unrelated_type_equality_checks: error

/**其余的还有
>
<
>=
<=
*/
//共的说来不同数据类型的值的比较需要先转化数据类型才能比较。
  • 逻辑运算符
/**
用于bool类型的值
||或运算符
&&且运算非
!非运算符 
*/
print(!false); //true
print(!true); //fasle
  • 赋值运算符 （= | += | -= | ??= ）
//这里面说一下??=运算符
int a = 10;
a??=20;
print(a); //输出10
int b;
b??=20;
print(b); //输出20
//??=就是前面的变量没有值的时候会被赋值
  • 条件表达式
//三目运算符:condition ? expr1 : expe 不在多说都知道

// ??运算符:expr1 ?? expr2
//如果 expr1 为非null，则返回其值; 否则，计算并返回 expr2 的值
print(1??2); //1
print(null??2); //2
print(fasle??2); //false

4）类

dart语言类和接口是统一的。抽象类不能被实例化。

dart支持泛型

学过java的同学肯定知道。知道ts的同学理解起来也不会很难。有时候发现语言都是有类似的地方。相互借鉴优点。 不懂的就google一下吧。

T getVal<T>(T a){
    return a;
}

//这里面的T就是泛型。没有指明具体的数据类型。因为有些逻辑是需要复用封装的。在类中广泛使用着泛型


class Person{
    String name;
    int age;
    Person(this.name,this.age);
    //可以定义多个构造函数。做不同的处理
    Person.create(String name){
        this.name = name;
        this.age = 10;
    }
}



//类中的范型使用
class A<T>{
  T val;
  String name;
  A(this.val,this.name);
}
class B{
  int age;
  int sex;
  B(this.age,this.sex);
}

main(){
  A<B> a=new A<B>(new B(1,2),'b');
  print(a);
}

*** 这里并没有列出全部内容，flutter开发中基本够用。当然这里附上dart官网文档如有需要可以查看更多。中文文档和英文官网 ***

2.flutter环境的安装

这里以mac安装为例。windows安装流程基本一致。

1）flutter SDk安装

vi ~/.bash_profile

//使用镜像加速,把下面添加到环境变量
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

vi ~/.bash_profile

//pwd是你的flutter安装目录
//flutter安装之后dart是捆绑安装的，也可以把dart设置环境变量，方便测试api和学习dart语言
//dart-sdk放在flutter/bin/cache/dart-sdk目录
export PATH=`pwd`/flutter/bin:$PATH
export PATH=`pwd`/flutter/bin/cache/dart-sdk/bin:$PATH

修改完之后保存退出。

source ~/.bash_profile

//之后可以查看对应版本
flutter --version 
dart --version

2）xcode和Android Studio安装

xcode可以直接在App store安装，不多说。

  • 下载安装Android Studio
  • 启动Android Studio，然后执行“Android Studio安装向导”。这将安装最新的Android SDK，Android SDK平台工具和Android SDK构建工具，这是Flutter为Android开发时所必需的
  • 安装Plugins flutter

3）flutter doctor

flutter doctor  //检查flutter环境

出现上面的图就是环境没问题，只是没有链接设备

open -a Simulator //开启模拟器
flutter doctor //再次检查 ok

一般情况下都会或多或少出现问题，根据报的问题处理。

  • cocoapods没有安装的常见问题处理
//1.没安装browhome,安装browhome
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
//2、更新，安装cocoapods
brew update //更新没安装browhome
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods //安装
pod setup //启动

到此一般环境没啥问题，选择一款自己喜欢的开发工具。我这里用vscode。vscode需要安装插件Flutter ~

创建flutter工程

//前提是打开设备或者虚拟设备
flutter create myapp
cd myapp
flutter run

准备就绪。。。

之前写了一个混合开发的android 嵌入flutter 踩坑记录

flutter开发流程和常用widget以及图片资源，常用包的安装使用。东西比较多暂定上中下三篇。感兴趣的可以关注一下~

avatar
文章
阅读
粉丝