Flutter環(huán)境配置&基本語法&如何使用庫
1、flutter基本了解
筆記開始,先貼出幾個學(xué)習(xí)flutter的官方鏈接:
flutter官網(wǎng)：鏈接
flutter中文網(wǎng)：鏈接
github網(wǎng)址:鏈接
Dart Packages:鏈接
Hank Flutter配置:鏈接
1.1 React Native框架的優(yōu)勢
跨端方案的初衷是要解決多平臺重復(fù)開發(fā)的問題，也就是說，使用跨端方案的話，多個平臺的開發(fā)者可以使 用相同的開發(fā)語言來開發(fā)適合不同系統(tǒng)的App。
React Native 使用 JavaScript 語言來開發(fā)，F(xiàn)lutter 使用的是 Dart 語言。這兩門編程語言，對 iOS 開發(fā)者來 說都有一定的再學(xué)習(xí)成本，而使用何種編程語言，其實決定了團(tuán)隊未來的技術(shù)棧。
JavaScript 的歷史和流行程度都遠(yuǎn)超 Dart ，生態(tài)也更加完善，開發(fā)者也遠(yuǎn)多于 Dart 程序員。所以，從編程 語言的角度來看，雖然 Dart 語言入門簡單，但從長遠(yuǎn)考慮，還是選擇React Native 會更好一些。
同時，從頁面框架和自動化工具的角度來看，React Native也要領(lǐng)先于 Flutter。這，主要得益于 Web 技術(shù) 這么多年的積累，其工具鏈非常完善。前端開發(fā)者能夠很輕松地掌握 React Native，并進(jìn)行移動端 App 的 開發(fā)。
當(dāng)然，方案選擇如同擂臺賽，第一回合的輸贏無法決定最后的結(jié)果。
1.2 Flutter框架的優(yōu)勢
除了編程語言、頁面框架和自動化工具以外，React Native 的表現(xiàn)就處處不如 Flutter 了。總體來說，相比 于React Native框架，F(xiàn)lutter的優(yōu)勢最主要體現(xiàn)在性能、開發(fā)效率和體驗這兩大方面。
Flutter的優(yōu)勢，首先在于其性能。 我們先從最核心的虛擬機(jī)說起吧。
React Native 所使用的 JavaScriptCore， 原本用在瀏覽器中，用于解釋執(zhí)行網(wǎng)頁中的JavaScript代碼。為了 兼容 Web 標(biāo)準(zhǔn)留下的歷史包袱，無法專門針對移動端進(jìn)行性能優(yōu)化。
Flutter 卻不一樣。它一開始就拋棄了歷史包袱，使用全新的 Dart 語言編寫，同時支持 AOT 和 JIT兩種編譯 方式，而沒有采用HTML/CSS/JavaScript 組合方式開發(fā)，在執(zhí)行效率上明顯高于 JavaScriptCore 。
除了編程語言的虛擬機(jī)，F(xiàn)lutter的優(yōu)勢還體現(xiàn)在UI框架的實現(xiàn)上。它重寫了UI 框架，從 UI 控件到渲染，全 部重新實現(xiàn)了，依賴 Skia 圖形庫和系統(tǒng)圖形繪制相關(guān)的接口，保證了不同平臺上能有相同的體驗。
想要了解 Flutter 的布局和渲染，你可以看看這兩個視頻“The Mahogany Staircase - Flutter’s Layered Design”和“Flutter’s Rendering Pipeline”。
除了性能上的優(yōu)勢外，F(xiàn)lutter在開發(fā)效率和體驗上也有很大的建樹。
憑借熱重載(Hot Reload)這種極速調(diào)試技術(shù)，極大地提升了開發(fā)效率，因此Flutter 吸引了大量開發(fā)者的眼球。
同時，F(xiàn)lutter因為重新實現(xiàn)了UI框架，可以不依賴 iOS 和 Android 平臺的原生控件，所以無需專門去處理 平臺差異，在開發(fā)體驗上實現(xiàn)了真正的統(tǒng)一。
此外，F(xiàn)lutter 的學(xué)習(xí)資源也非常豐富。Flutter的官方文檔，分門別類整理得僅僅有條。YouTube 上有一個 專門的頻道，提供了許多講座、演講、教程資源。
或許，你還會說Flutter 包大小是個問題。Flutter的渲染引擎是自研的，并沒有用到系統(tǒng)的渲染，所以App包 必然會大些。但是，我覺得從長遠(yuǎn)來看，App Store對包大小的限制只會越來越小，所以說這個問題一定不 會成為卡點。
以上內(nèi)容摘自戴銘iOS小專欄...
2 Flutter的環(huán)境配置
2.1 配置環(huán)境變量
首先flutter需要添加git依賴:
git clone -b stable https://github.com/flutter/flutter.git
在本地bash_profile文件中配置環(huán)境變量:
vim ~/.bash_profile
在bash_profile中加入以下環(huán)境變量:
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保存,記得關(guān)鍵一步,讓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.
...
下載完成以后,會出現(xiàn)Welcome to Flutter彈窗:
2.2 出現(xiàn)的問題及解決
首先下載Android Studio以及JAVA SDK,進(jìn)行安裝,此處不再贅述.
以上步驟完成以后,輸入:
flutter doctor
會下載一些配置,然后可能會出現(xiàn)一些問題,需要自己根據(jù)提示去解決這些問題:
問題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
點擊設(shè)置,選擇SDK Manager:
選擇Android 9.0 28,點擊Apply,沒下載的會提示下載,自動安裝:
同理SDK Tools:
問題2: 需要同意licenses,按照提示輸入:
flutter doctor --android-licenses
然后按照提示輸入y,回車,最終出現(xiàn) All SDK package licenses accepted;表示已accept所有的licenses:
問題3: 需要下載Flutter plugin 和 Dart plugin:
點擊設(shè)置,選擇Plugins:
然后輸入Flutter,點擊install:
安裝過程中會提示Flutter Plugin依賴Dart Plugin,跟著提示下載就行;或者下完以后在搜索框輸入Dart Plugin,下載安裝.
下載完成以后,在install中會顯示已安裝的Flutter和Dart:
再次輸入flutter doctor,提示 No issues found!,表示環(huán)境已經(jīng)配置成功:
2 創(chuàng)建一個Flutter工程
2.1 使用Android Studio直接創(chuàng)建
配置好環(huán)境和安裝好插件后,打開Android Studio,會出現(xiàn)創(chuàng)建flutter項目選項:
2.1 使用終端直接創(chuàng)建
使用 終端 創(chuàng)建,先cd到指定目錄下,然后輸入:
flutter create flutter_testProject
ps:不知道為啥原因,我直接用Android studio直接創(chuàng)建的時候卡死了,所以直接終端創(chuàng)建的沒問題;
終端創(chuàng)建的工程直接用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文件, 網(wǎng)上說的是將換成阿里的鏡像:鏈接
代碼如下:
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
示例項目運行如下:
3 flutter基本語法學(xué)習(xí)
3.1 基本數(shù)據(jù)類型與List數(shù)組,Map字典
//基本數(shù)據(jù)類型
int a = 111;
int aa = int.parse('111');//將字符串類型的轉(zhuǎn)成int
print('int:'+a.toString());
double b = 222.222;
double bb = double.parse('3333.222');//將字符串轉(zhuǎn)成double類型
print('double:'+b.toString());
bool isOK = 10 >11 ?false:true;
print('isOK:'+isOK.toString());
//變量的聲明，可以使用 var、Object 或 dynamic 關(guān)鍵字。
//String
String string = 'Hellow world!';
var string1 = 'YYFast Hellow world!';
dynamic string2 = 111.toString(); //int轉(zhuǎn)化為String
Object string3 = 111.222.toString(); //double轉(zhuǎn)String
//List 數(shù)組類型
List list = [1,2,3,4];
List newList = new List(); //創(chuàng)建一個空數(shù)組
newList.add(2333); //往數(shù)組中添加元素
newList.addAll([22,33,44]); //往數(shù)組中添加一個數(shù)組
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(); //創(chuàng)建一個空Map
newMap['name'] = 'jack';
newMap['age'] = 12;
newMap['height'] = '188';
newMap.remove('height'); //移除
print(map);
print(newMap);
打印結(jié)果:
3.2 Dart中的function
func也就是我們常說的函數(shù),方法,執(zhí)行語句等,以及dart中可選參數(shù)和參數(shù)默認(rèn)值的設(shè)置方式:
void main(){
funcTest();
}
void funcTest(){
String name = getUserName(222); //定義一個通過參數(shù)int返回一個String的function
print('my name is '+name);
}
//可選參數(shù): []中括號將參數(shù)包起來
String getUserName(int userId,[int age]){
Map map= {
111 :'Jack',
222 :'Lucy',
333 :'Tom'
};
return map[userId];
}
//設(shè)定默認(rèn)值: {}將參數(shù)包裹起來
void choice({int age1,int age2,int age3 = 0}){
//參數(shù)age3沒有傳的時候使用默認(rèn)值 0;
//需要使用{}將參數(shù)包裹起來
}
3.3 Dart中的class對象,類繼承extends和混合Midin
類對象: 使用class表示;注意構(gòu)造函數(shù)的使用方法
類繼承: 使用關(guān)鍵字 extends
混合: 使用關(guān)鍵字 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,會調(diào)用類的sayHello方法
//如果類沒有,A類,B類有sayHello方法,后面的方法會覆蓋前面的方法,也就是B類的sayHello方法會覆蓋掉A類的方法,調(diào)用的時候會調(diào)用B類的sayHello方法;
}
class Person{
int age;
String name;
//構(gòu)造函數(shù)Constructor: 函數(shù)名與class名一致.用于在初始化對象時直接傳進(jìn)參數(shù)然后初始化,在創(chuàng)建對象的時候可以直接調(diào)用;
//類似于C++中的析構(gòu)函數(shù)
Person (int age,String name){
this.age = age;
this.name = name;
}
SayHello(){
print('my name is '+this.name);
}
}
//繼承使用的是extends
//點擊這里的燈泡會幫助我們自動實現(xiàn)構(gòu)造器
class Worker extends Person{
int height; //屬于Worker的屬性 height
Worker(int age, String name,int height) : super(age, name){
this.height = height;
}
//重寫父類的方法要加上@override標(biāo)識告訴編譯器
@override
SayHello(){
super.SayHello();//可以先調(diào)用父類的方法
print('my name is '+this.name);
}
}
//混合: 使用關(guān)鍵字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 自己創(chuàng)建的庫
Dart中庫用package命名,例如創(chuàng)建一個計算的庫:
- 先創(chuàng)建一個package
- 在創(chuàng)建一個.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';
調(diào)用結(jié)果如下:
3.4.1 調(diào)用Dart Package網(wǎng)址上的庫
Dart Packages:鏈接
比如隨便添加一個支持http的庫,點擊install
找到工程中的 pubspec.yaml 文件,將http: ^0.12.0+4復(fù)制到dependencies下:
然后進(jìn)行安裝:
出現(xiàn)的 問題:
如果你和我一樣使用的是iTerms,使用終端可能會出現(xiàn)問題:
解決方式: 使用iTerms cd到pubspec.yaml 文件所在的路徑下,再輸入flutter pub:
3.4.1.2 庫的使用
對應(yīng)網(wǎng)站上的Readme:
注意點:
- 在import 后面跟上 as http ,相當(dāng)于簡寫;
- 示例代碼提示報錯的話,修改兩處地方: ()后加上async;
將地址改成百度的鏈接;如圖所示:
以上只是入門學(xué)習(xí)flutter記的筆記,任重而道遠(yuǎn).
只應(yīng)實干爭朝夕, 謝謝!
