前端的flutter之路（一）：語法

ma125120發表於2019-05-24
前端Flutter

剛開始學習flutter的話，個人感覺並不需要太多的dart語法知識，所以下面就只是簡單的說一下js和dart的語法差異（一開始有的語法看的不是很懂，導致看的總是一知半解的）。

字串的差異

dart中字串的表示方法有很多：

  1. 單引號 'Single quotes work well for string literals.'
  2. 雙引號 "Single quotes work well for string literals."
  3. 多行字串，
'''Single quotes work well for string literals.
dsa'''
複製程式碼
"""Single quotes work well for string literals.
dsa"""
複製程式碼

  1. raw string，在前幾種表示方式之前加上r即可。 r"Single quotes work well for string literals."

  2. 字串拼接，跟js不同，+可有可無。比如'test '"string"和'test ' + "string"都是可以的。

  3. 使用變數，$name或者 ${name}都可以，前一種方法的後面不能直接跟字串，要用空格或者逗號等方式隔開

String name = 'hello';
print('$name string'); // hello string
print('${name} string'); // hello string
複製程式碼

布林值的轉換

在js中，使用判斷的時候空字串，0，null，undefined都會被轉換為false。

但是在dart中，判斷條件就只能用bool值，如果是其他型別的資料，就會丟擲型別錯誤。

List

dart中的List和js中的陣列比較像，都可以使用..展開陣列。

List list = [1, 2, 3];
List list2 = [0, ...list];
複製程式碼

不同點：

  • ...? 防止被擴充套件陣列為null的時候程式報錯
var list;
var list2 = [0, ...?list];
複製程式碼
  • 使用List<變數型別>宣告後，該資料中就只能存放同種型別的資料，而不是隨意混合
  • 突然發現dart2.3以後支援在List中直接使用表示式了
  • 判斷語句
var nav = [
 'Home',
 'Furniture',
 'Plants',
 if (promoActive) 'Outlet'
];
複製程式碼
  • 迴圈語句
var listOfInts = [1, 2, 3];
var listOfStrings = [
 '#0',
 for (var i in listOfInts) '#$i'
];
複製程式碼

Map和js中的物件

// var gifts = Map();
var gifts = {'first': 'partridge'};
gifts['second'] = 'partridge';
複製程式碼

注意：

  • 存取時都只能通過['鍵名']的方式訪問值，而不能用.操作符，因為dart算是一個強型別語言，Map並不知道它本身有這個鍵，所以用.就會報錯
  • 定義時鍵名如果是字串，不能像js一樣省略

在某種意義上來說，dart的類例項和js的物件也比較像，可以通過.操作符訪問某個鍵的值，畢竟宣告過了嘛，哈哈。

初學dart的前端可能經常分不清Map和類例項，就覺得不都是物件嘛，怎麼訪問不到呢？這裡教大家一個方法：使用 print(變數);如果是Map，列印出來就類似js中的物件，而如果是類例項，列印出來就是Instance of '類'。

其實這種困惑主要發生在使用網路請求後，其實返回的不是List就是Map，要想使用.操作符的話，就需要自己轉換型別了。json轉model的話可以看看這個

函式

dart函式的引數分為 positional parameters（位置引數） 和 named parameters（命名引數）。

// positional parameters（位置引數,預設必傳）
bool isNoble(int atomicNumber) {
 return atomicNumber != null;
}

// named parameters（命名引數,預設可選）
bool isNoble({ int atomicNumber }) {
 return atomicNumber != null;
}
複製程式碼

呼叫

 // positional parameters（位置引數）
isNoble(1);

// named parameters（命名引數）
isNoble(atomicNumber: 1);
複製程式碼

引數可選和必填：

 // positional parameters（位置引數,預設必傳,用[]表示可選）
bool isNoble([int atomicNumber]) {
 return atomicNumber != null;
}

// named parameters（命名引數,預設可選，使用@required表示必傳）
bool isNoble({ @required int atomicNumber }) {
 return atomicNumber != null;
}
複製程式碼

要使用required註解的話，還需要引入package:meta/meta.dart，否則會報錯的。在flutter中，package:flutter/material.dart已經預設引入了，所以才可以直接使用。

類

這個的話其實也沒什麼好多的了，

  • 在定義時訪問例項的方法和引數時，不需要加上this
  • 建構函式中使用this.引數可以直接賦值
class User {
 String name;
 // 位置引數
 User(this.name);
 // 相當於 User([name]): this.name = name;
 
 // 命名引數的形式
 // User({this.name});
}
複製程式碼

其他

  • 使用 ?. 訪問可以防止某個屬性不存在
  • String name = User().name ?? 'name'; dart中的 ?? 相當於js中的 || 方式吧
  • 函式的級聯也叫鏈式呼叫。Dart 原生語法支援鏈式呼叫，只需要使用 ..
querySelector('#confirm') // element
 ..text = 'Confirm'
 ..classes.add('important')
 ..onClick.listen((e) => window.alert('Confirmed!'));
複製程式碼

第二行之後訪問的都是element的鍵和方法。

相關文章