Flutter环境配置&基本语法&如何使用库
1、flutter基本了解
笔记开始,先贴出几个学习flutter的官方链接:
flutter官网：链接
flutter中文网：链接
github网址:链接
Dart Packages:链接
Hank Flutter配置:链接
1.1 React Native框架的优势
跨端方案的初衷是要解决多平台重复开发的问题，也就是说，使用跨端方案的话，多个平台的开发者可以使 用相同的开发语言来开发适合不同系统的App。
React Native 使用 JavaScript 语言来开发，Flutter 使用的是 Dart 语言。这两门编程语言，对 iOS 开发者来 说都有一定的再学习成本，而使用何种编程语言，其实决定了团队未来的技术栈。
JavaScript 的历史和流行程度都远超 Dart ，生态也更加完善，开发者也远多于 Dart 程序员。所以，从编程 语言的角度来看，虽然 Dart 语言入门简单，但从长远考虑，还是选择React Native 会更好一些。
同时，从页面框架和自动化工具的角度来看，React Native也要领先于 Flutter。这，主要得益于 Web 技术 这么多年的积累，其工具链非常完善。前端开发者能够很轻松地掌握 React Native，并进行移动端 App 的 开发。
当然，方案选择如同擂台赛，第一回合的输赢无法决定最后的结果。
1.2 Flutter框架的优势
除了编程语言、页面框架和自动化工具以外，React Native 的表现就处处不如 Flutter 了。总体来说，相比 于React Native框架，Flutter的优势最主要体现在性能、开发效率和体验这两大方面。
Flutter的优势，首先在于其性能。 我们先从最核心的虚拟机说起吧。
React Native 所使用的 JavaScriptCore， 原本用在浏览器中，用于解释执行网页中的JavaScript代码。为了 兼容 Web 标准留下的历史包袱，无法专门针对移动端进行性能优化。
Flutter 却不一样。它一开始就抛弃了历史包袱，使用全新的 Dart 语言编写，同时支持 AOT 和 JIT两种编译 方式，而没有采用HTML/CSS/JavaScript 组合方式开发，在执行效率上明显高于 JavaScriptCore 。
除了编程语言的虚拟机，Flutter的优势还体现在UI框架的实现上。它重写了UI 框架，从 UI 控件到渲染，全 部重新实现了，依赖 Skia 图形库和系统图形绘制相关的接口，保证了不同平台上能有相同的体验。
想要了解 Flutter 的布局和渲染，你可以看看这两个视频“The Mahogany Staircase - Flutter’s Layered Design”和“Flutter’s Rendering Pipeline”。
除了性能上的优势外，Flutter在开发效率和体验上也有很大的建树。
凭借热重载(Hot Reload)这种极速调试技术，极大地提升了开发效率，因此Flutter 吸引了大量开发者的眼球。
同时，Flutter因为重新实现了UI框架，可以不依赖 iOS 和 Android 平台的原生控件，所以无需专门去处理 平台差异，在开发体验上实现了真正的统一。
此外，Flutter 的学习资源也非常丰富。Flutter的官方文档，分门别类整理得仅仅有条。YouTube 上有一个 专门的频道，提供了许多讲座、演讲、教程资源。
或许，你还会说Flutter 包大小是个问题。Flutter的渲染引擎是自研的，并没有用到系统的渲染，所以App包 必然会大些。但是，我觉得从长远来看，App Store对包大小的限制只会越来越小，所以说这个问题一定不 会成为卡点。
以上内容摘自戴铭iOS小专栏...
2 Flutter的环境配置
2.1 配置环境变量
首先flutter需要添加git依赖:
git clone -b stable https://github.com/flutter/flutter.git
在本地bash_profile文件中配置环境变量:
vim ~/.bash_profile
在bash_profile中加入以下环境变量:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=pwd/flutter/bin:$PATH
加入以后esc,:wq保存,记得关键一步,让bash_profile文件生效:
source ~/.bash_profile
然后输入:
flutter --help
回车以后会去下载Dart语言SDK:
Downloading Dart SDK from Flutter engine 2994f7e1e682039464cb25e31a78b86a3c59b695...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 200M 100 200M 0 0 4581k 0 0:00:44 0:00:44 --:--:-- 3747k
Building flutter tool...
Manage your Flutter app development.
...
下载完成以后,会出现Welcome to Flutter弹窗:
2.2 出现的问题及解决
首先下载Android Studio以及JAVA SDK,进行安装,此处不再赘述.
以上步骤完成以后,输入:
flutter doctor
会下载一些配置,然后可能会出现一些问题,需要自己根据提示去解决这些问题:
问题1: 需要Android SDK 28 and the Android BuildTools 28.0.3
Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
To update using sdkmanager
点击设置,选择SDK Manager:
选择Android 9.0 28,点击Apply,没下载的会提示下载,自动安装:
同理SDK Tools:
问题2: 需要同意licenses,按照提示输入:
flutter doctor --android-licenses
然后按照提示输入y,回车,最终出现 All SDK package licenses accepted;表示已accept所有的licenses:
问题3: 需要下载Flutter plugin 和 Dart plugin:
点击设置,选择Plugins:
然后输入Flutter,点击install:
安装过程中会提示Flutter Plugin依赖Dart Plugin,跟着提示下载就行;或者下完以后在搜索框输入Dart Plugin,下载安装.
下载完成以后,在install中会显示已安装的Flutter和Dart:
再次输入flutter doctor,提示 No issues found!,表示环境已经配置成功:
2 创建一个Flutter工程
2.1 使用Android Studio直接创建
配置好环境和安装好插件后,打开Android Studio,会出现创建flutter项目选项:
2.1 使用终端直接创建
使用 终端 创建,先cd到指定目录下,然后输入:
flutter create flutter_testProject
ps:不知道为啥原因,我直接用Android studio直接创建的时候卡死了,所以直接终端创建的没问题;
终端创建的工程直接用Android studio打开main.dart文件就可以.
2.3 模拟器运行
直接运行项目中的示例,点击右上角的运行按钮,选择不同的iOS和Android模拟器,直接可以展示出示例的样式:
运行之前,没有装Xcode的需要先安装Xcode,没有Android模拟器的需要下载Android模拟器并安装;
运行Android模拟器时碰到的问题,会卡在:
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Running Gradle task 'assembleDebug'...
解决方案:
找到项目列表中的build.grade文件, 网上说的是将换成阿里的镜像:链接
代码如下:
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
示例项目运行如下:
3 flutter基本语法学习
3.1 基本数据类型与List数组,Map字典
//基本数据类型
int a = 111;
int aa = int.parse('111');//将字符串类型的转成int
print('int:'+a.toString());
double b = 222.222;
double bb = double.parse('3333.222');//将字符串转成double类型
print('double:'+b.toString());
bool isOK = 10 >11 ?false:true;
print('isOK:'+isOK.toString());
//变量的声明，可以使用 var、Object 或 dynamic 关键字。
//String
String string = 'Hellow world!';
var string1 = 'YYFast Hellow world!';
dynamic string2 = 111.toString(); //int转化为String
Object string3 = 111.222.toString(); //double转String
//List 数组类型
List list = [1,2,3,4];
List newList = new List(); //创建一个空数组
newList.add(2333); //往数组中添加元素
newList.addAll([22,33,44]); //往数组中添加一个数组
newList.addAll(list);
newList.remove(3); //移除
newList.insert(2, 33); //插入
print(newList);
print(newList.length);
print(newList.first);
print(newList[3]);
//Map 对象类型
Map map = {'x':111,'y':222,'z':333};
Map newMap = new Map(); //创建一个空Map
newMap['name'] = 'jack';
newMap['age'] = 12;
newMap['height'] = '188';
newMap.remove('height'); //移除
print(map);
print(newMap);
打印结果:
3.2 Dart中的function
func也就是我们常说的函数,方法,执行语句等,以及dart中可选参数和参数默认值的设置方式:
void main(){
funcTest();
}
void funcTest(){
String name = getUserName(222); //定义一个通过参数int返回一个String的function
print('my name is '+name);
}
//可选参数: []中括号将参数包起来
String getUserName(int userId,[int age]){
Map map= {
111 :'Jack',
222 :'Lucy',
333 :'Tom'
};
return map[userId];
}
//设定默认值: {}将参数包裹起来
void choice({int age1,int age2,int age3 = 0}){
//参数age3没有传的时候使用默认值 0;
//需要使用{}将参数包裹起来
}
3.3 Dart中的class对象,类继承extends和混合Midin
类对象: 使用class表示;注意构造函数的使用方法
类继承: 使用关键字 extends
混合: 使用关键字 with
void main(){
ObjectTest();
}
void ObjectTest(){
//对象
Person person1 = new Person(18, 'jack');
print(person1.name);
print(person1.age);
print(person1.SayHello());
//Worker 继承自 Person , 且比Person多一个属性height
Worker worker1 = new Worker(17, 'lucy',160);
print(worker1.name);
print(worker1.age);
print(worker1.height);
print(worker1.SayHello());
//Student 混合了类Eat 和 Run类的方法,可以直接掉用这两个类的方法
var student = new Student();
student.eat();
student.run();
student.SayHello();
//如果类,A类,B类都有一个同名方法sayHello,会调用类的sayHello方法
//如果类没有,A类,B类有sayHello方法,后面的方法会覆盖前面的方法,也就是B类的sayHello方法会覆盖掉A类的方法,调用的时候会调用B类的sayHello方法;
}
class Person{
int age;
String name;
//构造函数Constructor: 函数名与class名一致.用于在初始化对象时直接传进参数然后初始化,在创建对象的时候可以直接调用;
//类似于C++中的析构函数
Person (int age,String name){
this.age = age;
this.name = name;
}
SayHello(){
print('my name is '+this.name);
}
}
//继承使用的是extends
//点击这里的灯泡会帮助我们自动实现构造器
class Worker extends Person{
int height; //属于Worker的属性 height
Worker(int age, String name,int height) : super(age, name){
this.height = height;
}
//重写父类的方法要加上@override标识告诉编译器
@override
SayHello(){
super.SayHello();//可以先调用父类的方法
print('my name is '+this.name);
}
}
//混合: 使用关键字with
class Eat{
void eat(){
print('eat');
}
void SayHello(){
print('say hello in eat');
}
}
class Run {
void run(){
print('Run');
}
void SayHello(){
print('say hello in run');
}
}
class Student with Eat, Run{
Student(){
print('YYFast');
}
void SayHello(){
print('say hello in Student');
}
}
3.4 Dart库的使用
3.4.1 自己创建的库
Dart中库用package命名,例如创建一个计算的库:
- 先创建一个package
- 在创建一个.Dart文件,Dart文件如下:
int add (int a , int b){
return a + b;
}
class Calc{
int a;
int b;
Calc(int a, int b){
this.a = a;
this.b = b;
}
minus(){
print(this.a - this.b);
}
}
然后在main.Dart文件中import:
import 'pkg/Calc.dart';
调用结果如下:
3.4.1 调用Dart Package网址上的库
Dart Packages:链接
比如随便添加一个支持http的库,点击install
找到工程中的 pubspec.yaml 文件,将http: ^0.12.0+4复制到dependencies下:
然后进行安装:
出现的 问题:
如果你和我一样使用的是iTerms,使用终端可能会出现问题:
解决方式: 使用iTerms cd到pubspec.yaml 文件所在的路径下,再输入flutter pub:
3.4.1.2 库的使用
对应网站上的Readme:
注意点:
- 在import 后面跟上 as http ,相当于简写;
- 示例代码提示报错的话,修改两处地方: ()后加上async;
将地址改成百度的链接;如图所示:
以上只是入门学习flutter记的笔记,任重而道远.
只应实干争朝夕, 谢谢!
