Flutter(三)之搞定Dart（一）

coderwhy發表於2019-09-09
FlutterDart

前言一：接下來一段時間我會陸續更新一些列Flutter文字教程

更新進度： 每週至少兩篇；

更新地點： 首發於公眾號，第二天更新於掘金、思否等地方；

更多交流： 可以新增我的微信 372623326，關注我的微博：coderwhy

希望大家可以 幫忙轉發，點選在看，給我更多的創作動力。

前言二：若干年後，你會發現，選錯了公司和行業的損失遠比選錯了語言來的大。

而且計算機這個行業，只會一種程式語言顯然是不現實的，接收一門新的語言，並沒有你想象中的難！

一. Dart介紹和安裝

1.1. 認識Dart

Google為Flutter選擇了Dart就已經是既定的事實，無論你多麼想用你熟悉的語言，比如JavaScript、Java、Swift、C++等來開發Flutter，至少目前都是不可以的。

在講解Dart的過程中，我會假定你已經有一定的程式語言基礎，比如JavaScript、Java、Python、C++等。

其實如果你對程式語言足夠的自信，Dart的學習過程甚至可以直接忽略：

  • 因為你學過N種程式語言之後，你會發現他們的差異是並不大；
  • 無非就是語法上的差異+某些語言有某些特性，而某些語言沒有某些特性而已；
  • 在我初次接觸Flutter的時候，並沒有專門去看Dart的語法，而是對於某些語法不太熟練的時候回頭去了解而已；

所以，如果你對程式語言已經足夠了解，可以跳過我們接下來的Dart學習：

  • 我也並不會所有特性都一一羅列，我會挑出比較重要的語言特性來專門講解；
  • 某些特性可能會等到後面講解Flutter的一些知識的時候單獨拿出來講解；

下面，我們就從安裝Dart開始吧！

1.2. 安裝Dart

為什麼還需要安裝Dart呢？

事實上在安裝Flutter SDK的時候，它已經內建了Dart了，我們完全可以直接使用Flutter去進行Dart的編寫並且執行。

但是，如果你想單獨學習Dart，並且執行自己的Dart程式碼，最好去安裝一個Dart SDK。

下載Dart SDK

到Dart的官方，根據不同的作業系統下載對應的Dart

無論是什麼作業系統，安裝方式都是有兩種：通過工具安裝和直接下載SDK，配置環境變數

1.通過工具安裝

  • Windows可以通過Chocolatey
  • macOS可以通過homebrew
  • 具體安裝操作官網網站有詳細的解釋

2.直接下載SDK，配置環境變數

  • 下載地址：dart.dev/tools/sdk/a…
  • 我採用了這個安裝方式。
  • 下載完成後，根據路徑配置環境變數即可。

1.3. VSCode配置

學習Dart過程中，我使用VSCode作為編輯器

  • 一方面編寫程式碼非常方便，而且介面風格我也很喜歡
  • 另一方面我可以快速在終端看到我編寫程式碼的效果

使用VSCode編寫Dart需要安裝Dart外掛：我目前給這個VSCode裝了四個外掛

  • Dart和Flutter外掛是為Flutter開發準備的
  • Atom One Dark Theme是我個人比較喜歡的一個主題
  • Code Runner可以點選右上角的按鈕讓我快速執行程式碼

image-20190831214816409

二. Hello Dart

2.1. Hello World

接下來，就可以步入正題了。學習程式語言，從祖傳的Hello World開始。

在VSCode中新建一個helloWorld.dart檔案，新增下面的內容：

main(List<String> args) {
  print('Hello World');
}
複製程式碼

然後在終端執行dart helloWorld.dart，就能看到Hello World的結果了。

完成了這個執行過程之後，以你之前學習的程式語言來看，你能得到多少資訊呢？

2.2. 程式的分析

接下來，就是我自己的總結：

  • 一、Dart語言的入口也是main函式，並且必須顯示的進行定義；
  • 二、Dart的入口函式main是沒有返回值的；
  • 三、傳遞給main的命令列引數，是通過List<String>完成的。
    • 從字面值就可以理解List是Dart中的集合型別。
    • 其中的每一個String都表示傳遞給main的一個引數；
  • 四、定義字串的時候，可以使用單引號或雙引號；
  • 五、每行語句必須使用分號結尾，很多語言並不需要分號，比如Swift、JavaScript；

三. 定義變數

3.1. 明確宣告(Explicit)

明確宣告變數的方式, 格式如下:

變數型別 變數名稱 = 賦值;
複製程式碼

示例程式碼:

String name = 'coderwhy';
int age = 18;
double height = 1.88;
print('${name}, ${age}, ${height}'); // 拼接方式後續會講解
複製程式碼

注意事項: 定義的變數可以修改值, 但是不能賦值其他型別

String content = 'Hello Dart';
content = 'Hello World'; // 正確的
content = 111; // 錯誤的, 將一個int值賦值給一個String變數
複製程式碼

3.2. 型別推導(Type Inference)

型別推導宣告變數的方式, 格式如下:

var/dynamic/const/final 變數名稱 = 賦值;
複製程式碼

3.3.1. var的使用

var的使用示例:

  • runtimeType用於獲取變數當前的型別
var name = 'coderwhy';
name = 'kobe';
print(name.runtimeType); // String
複製程式碼

var的錯誤用法:

var age = 18;
age = 'why'; // 不可以將String賦值給一個int型別
複製程式碼

3.3.2. dynamic的使用

如果確實希望這樣做,可以使用dynamic來宣告變數:

  • 但是在開發中, 通常情況下不使用dynamic, 因為型別的變數會帶來潛在的危險
dynamic name = 'coderwhy';
print(name.runtimeType); // String
name = 18;
print(name.runtimeType); // int
複製程式碼

3.3.3. final&const的使用

final和const都是用於定義常量的, 也就是定義之後值都不可以修改

final name = 'coderwhy';
name = 'kobe'; // 錯誤做法

const age = 18;
age = 20; // 錯誤做法

複製程式碼

final和const有什麼區別呢?

  • const在賦值時, 賦值的內容必須是在編譯期間就確定下來的
  • final在賦值時, 可以動態獲取, 比如賦值一個函式
String getName() {
  return 'coderwhy';
}

main(List<String> args) {
  const name = getName(); // 錯誤的做法, 因為要執行函式才能獲取到值
  final name = getName(); // 正確的做法
}

複製程式碼

final和const小案例:

  • 首先, const是不可以賦值為DateTime.now()
  • 其次, final一旦被賦值後就有確定的結果, 不會再次賦值
// const time = DateTime.now(); // 錯誤的賦值方式
final time = DateTime.now();
print(time); // 2019-04-05 09:02:54.052626

sleep(Duration(seconds: 2));
print(time); // 2019-04-05 09:02:54.052626

複製程式碼

const放在賦值語句的右邊，可以共享物件，提高效能:

  • 這裡可以暫時先做了解，後面講解類的常量建構函式時，我會再次提到這個概念
class Person {
  const Person();
}

main(List<String> args) {
  final a = const Person();
  final b = const Person();
  print(identical(a, b)); // true

  final m = Person();
  final n = Person();
  print(identical(m, n)); // false
}

複製程式碼

四. 資料型別

4.1. 數字型別

對於數值來說，我們也不用關心它是否有符號，以及資料的寬度和精度等問題。只要記著整數用int，浮點數用double就行了。

不過，要說明一下的是Dart中的int和double可表示的範圍並不是固定的，它取決於執行Dart的平臺。

// 1.整數型別int
int age = 18;
int hexAge = 0x12;
print(age);
print(hexAge);

// 2.浮點型別double
double height = 1.88;
print(height);

複製程式碼

字串和數字之間的轉化:

// 字串和數字轉化
// 1.字串轉數字
var one = int.parse('111');
var two = double.parse('12.22');
print('${one} ${one.runtimeType}'); // 111 int
print('${two} ${two.runtimeType}'); // 12.22 double

// 2.數字轉字串
var num1 = 123;
var num2 = 123.456;
var num1Str = num1.toString();
var num2Str = num2.toString();
var num2StrD = num2.toStringAsFixed(2); // 保留兩位小數
print('${num1Str} ${num1Str.runtimeType}'); // 123 String
print('${num2Str} ${num2Str.runtimeType}'); // 123.456 String
print('${num2StrD} ${num2StrD.runtimeType}'); // 123.46 String

複製程式碼

4.2. 布林型別

布林型別中,Dart提供了一個bool的型別, 取值為true和false

// 布林型別
var isFlag = true;
print('$isFlag ${isFlag.runtimeType}');

複製程式碼

注意: Dart中不能判斷非0即真, 或者非空即真

Dart的型別安全性意味著您不能使用if(非booleanvalue)或assert(非booleanvalue)之類的程式碼。

  var message = 'Hello Dart';
  // 錯誤的寫法
  if (message) {
    print(message)
  }

複製程式碼

4.3. 字串型別

Dart字串是UTF-16編碼單元的序列。您可以使用單引號或雙引號建立一個字串:

// 1.定義字串的方式
var s1 = 'Hello World';
var s2 = "Hello Dart";
var s3 = 'Hello\'Fullter';
var s4 = "Hello'Fullter";

複製程式碼

可以使用三個單引號或者雙引號表示多行字串:

// 2.表示多行字串的方式
var message1 = '''
哈哈哈
呵呵呵
嘿嘿嘿''';

複製程式碼

字串和其他變數或表示式拼接: 使用${expression}, 如果表示式是一個識別符號, 那麼{}可以省略

// 3.拼接其他變數
var name = 'coderwhy';
var age = 18;
var height = 1.88;
print('my name is ${name}, age is $age, height is $height');

複製程式碼

4.4. 集合型別

4.4.1. 集合型別的定義

對於集合型別，Dart則內建了最常用的三種：List / Set / Map。

其中，List可以這樣來定義：

// List定義
// 1.使用型別推導定義
var letters = ['a', 'b', 'c', 'd'];
print('$letters ${letters.runtimeType}');

// 2.明確指定型別
List<int> numbers = [1, 2, 3, 4];
print('$numbers ${numbers.runtimeType}');

複製程式碼

其中，set可以這樣來定義：

  • 其實，也就是把[]換成{}就好了。
  • Set和List最大的兩個不同就是：Set是無序的，並且元素是不重複的。
// Set的定義
// 1.使用型別推導定義
var lettersSet = {'a', 'b', 'c', 'd'};
print('$lettersSet ${lettersSet.runtimeType}');

// 2.明確指定型別
Set<int> numbersSet = {1, 2, 3, 4};
print('$numbersSet ${numbersSet.runtimeType}');

複製程式碼

最後，Map是我們常說的字典型別，它的定義是這樣的：

// Map的定義
// 1.使用型別推導定義
var infoMap1 = {'name': 'why', 'age': 18};
print('$infoMap1 ${infoMap1.runtimeType}');

// 2.明確指定型別
Map<String, Object> infoMap2 = {'height': 1.88, 'address': '北京市'};
print('$infoMap2 ${infoMap2.runtimeType}');

複製程式碼

4.4.2. 集合的常見操作

瞭解了這三個集合的定義方式之後，我們來看一些最基礎的公共操作

第一類，是所有集合都支援的獲取長度的屬性length：

// 獲取集合的長度
print(letters.length);
print(lettersSet.length);
print(infoMap1.length);

複製程式碼

第二類, 是新增/刪除/包含操作

  • 並且，對List來說，由於元素是有序的，它還提供了一個刪除指定索引位置上元素的方法
// 新增/刪除/包含元素
numbers.add(5);
numbersSet.add(5);
print('$numbers $numbersSet');

numbers.remove(1);
numbersSet.remove(1);
print('$numbers $numbersSet');

print(numbers.contains(2));
print(numbersSet.contains(2));

// List根據index刪除元素
numbers.removeAt(3);
print('$numbers');

複製程式碼

第三類，是Map的操作

  • 由於它有key和value，因此無論是讀取值，還是操作，都要明確是基於key的，還是基於value的，或者是基於key/value對的。
// Map的操作
// 1.根據key獲取value
print(infoMap1['name']); // why

// 2.獲取所有的entries
print('${infoMap1.entries} ${infoMap1.entries.runtimeType}'); // (MapEntry(name: why), MapEntry(age: 18)) MappedIterable<String, MapEntry<String, Object>>

// 3.獲取所有的keys
print('${infoMap1.keys} ${infoMap1.keys.runtimeType}'); // (name, age) _CompactIterable<String>

// 4.獲取所有的values
print('${infoMap1.values} ${infoMap1.values.runtimeType}'); // (why, 18) _CompactIterable<Object>

// 5.判斷是否包含某個key或者value
print('${infoMap1.containsKey('age')} ${infoMap1.containsValue(18)}'); // true true

// 6.根據key刪除元素
infoMap1.remove('age');
print('${infoMap1}'); // {name: why}

複製程式碼

五. 函式

5.1. 函式的基本定義

Dart是一種真正的面嚮物件語言，所以即使函式也是物件，所有也有型別, 型別就是Function。

這也就意味著函式可以作為變數定義或者作為其他函式的引數或者返回值.

函式的定義方式:

返回值 函式的名稱(引數列表) {
  函式體
  return 返回值
}

複製程式碼

按照上面的定義方式, 我們定義一個完整的函式:

int sum(num num1, num num2) {
  return num1 + num2;
}

複製程式碼

Effective Dart建議對公共的API, 使用型別註解, 但是如果我們省略掉了型別, 依然是可以正常工作的

sum(num1, num2) {
  return num1 + num2;
}

複製程式碼

另外, 如果函式中只有一個表示式, 那麼可以使用箭頭語法(arrow syntax)

  • 注意, 這裡面只能是一個表示式, 不能是一個語句
sum(num1, num2) => num1 + num2;

複製程式碼

5.2. 函式的引數問題

函式的引數可以分成兩類: 必須引數和可選引數

前面使用的引數都是必須引數.

5.2.1. 可選引數

可選引數可以分為 命名可選引數 和 位置可選引數

定義方式:

命名可選引數: {param1, param2, ...}
位置可選引數: [param1, param2, ...]

複製程式碼

命名可選引數的演示:

// 命名可選引數
printInfo1(String name, {int age, double height}) {
  print('name=$name age=$age height=$height');
}

// 呼叫printInfo1函式
printInfo1('why'); // name=why age=null height=null
printInfo1('why', age: 18); // name=why age=18 height=null
printInfo1('why', age: 18, height: 1.88); // name=why age=18 height=1.88
printInfo1('why', height: 1.88); // name=why age=null height=1.88

複製程式碼

位置可選引數的演示:

// 定義位置可選引數
printInfo2(String name, [int age, double height]) {
  print('name=$name age=$age height=$height');
}

// 呼叫printInfo2函式
printInfo2('why'); // name=why age=null height=null
printInfo2('why', 18); // name=why age=18 height=null
printInfo2('why', 18, 1.88); // name=why age=18 height=1.88

複製程式碼

命名可選引數, 可以指定某個引數是必傳的(使用@required, 有問題)

// 命名可選引數的必須
printInfo3(String name, {int age, double height, @required String address}) {
  print('name=$name age=$age height=$height address=$address');
}

複製程式碼

5.2.2. 引數預設值

引數可以有預設值, 在不傳入的情況下, 使用預設值

  • 注意, 只有可選引數才可以有預設值, 必須引數不能有預設值
// 引數的預設值
printInfo4(String name, {int age = 18, double height=1.88}) {
  print('name=$name age=$age height=$height');
}

複製程式碼

Dart中的main函式就是一個接受可選的列表引數作為引數的, 所以在使用main函式時, 我們可以傳入引數, 也可以不傳入

5.3. 函式是一等公民

在很多語言中, 函式並不能作為一等公民來使用, 比如Java/OC. 這種限制讓程式設計不夠靈活, 所以現代的程式語言基本都支援函式作為一等公民來使用, Dart也支援.

這就意味著你可以將函式賦值給一個變數, 也可以將函式作為另外一個函式的引數或者返回值來使用.

main(List<String> args) {
  // 1.將函式賦值給一個變數
  var bar = foo;
  print(bar);

  // 2.將函式作為另一個函式的引數
  test(foo);

  // 3.將函式作為另一個函式的返回值
  var func =getFunc();
  func('kobe');
}

// 1.定義一個函式
foo(String name) {
  print('傳入的name:$name');
}

// 2.將函式作為另外一個函式的引數
test(Function func) {
  func('coderwhy');
}

// 3.將函式作為另一個函式的返回值
getFunc() {
  return foo;
}

複製程式碼

5.4. 匿名函式的使用

大部分我們定義的函式都會有自己的名字， 比如前面定義的foo、test函式等等。

但是某些情況下，給函式命名太麻煩了，我們可以使用沒有名字的函式，這種函式可以被稱之為匿名函式( anonymous function)，也可以叫lambda或者closure。

main(List<String> args) {
  // 1.定義陣列
  var movies = ['盜夢空間', '星際穿越', '少年派', '大話西遊'];

  // 2.使用forEach遍歷: 有名字的函式
  printElement(item) {
    print(item);
  }
  movies.forEach(printElement);

  // 3.使用forEach遍歷: 匿名函式
  movies.forEach((item) {
    print(item);
  });
  movies.forEach((item) => print(item));
}

複製程式碼

5.5. 詞法作用域

dart中的詞法有自己明確的作用域範圍，它是根據程式碼的結構({})來決定作用域範圍的

優先使用自己作用域中的變數，如果沒有找到，則一層層向外查詢。

var name = 'global';
main(List<String> args) {
  // var name = 'main';
  void foo() {
    // var name = 'foo';
    print(name);
  }

  foo();
}

複製程式碼

5.6. 詞法閉包

閉包可以訪問其詞法範圍內的變數，即使函式在其他地方被使用，也可以正常的訪問。

main(List<String> args) {
  makeAdder(num addBy) {
    return (num i) {
      return i + addBy;
    };
  }

  var adder2 = makeAdder(2);
  print(adder2(10)); // 12
  print(adder2(6)); // 8

  var adder5 = makeAdder(5);
  print(adder5(10)); // 15
  print(adder5(6)); // 11
}

複製程式碼

5.7. 返回值問題

所有函式都返回一個值。如果沒有指定返回值，則語句返回null;隱式附加到函式體。

main(List<String> args) {
  print(foo()); // null
}

foo() {
  print('foo function');
}

複製程式碼

備註：所有內容首發於公眾號，之後除了Flutter也會更新其他技術文章，TypeScript、React、Node、uniapp、mpvue、資料結構與演算法等等，也會更新一些自己的學習心得等，歡迎大家關注

公眾號

相關文章