flutter新手集訓營(上)

前端開發是否迎來大統一？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

複製代碼

• 下載flutter也能夠去github下載
• 解壓安裝包到你想安裝的目錄
• 添加flutter到環境變量

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)"
//二、更新，安裝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以及圖片資源，經常使用包的安裝使用。東西比較多暫定上中下三篇。感興趣的能夠關注一下~