flutter新手集訓營(上)

mingetian發表於2019-10-04
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

複製程式碼

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環境
複製程式碼

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 
複製程式碼

flutter新手集訓營(上)
準備就緒。。。

之前寫了一個混合開發的android 嵌入flutter 踩坑記錄

flutter開發流程和常用widget以及圖片資源，常用包的安裝使用。東西比較多暫定上中下三篇。感興趣的可以關注一下~

相關文章