Flutter(二)Dart基本語(yǔ)法

一. Dart介紹和安裝

1.1. 認(rèn)識(shí)Dart

Google為Flutter選擇了Dart就已經(jīng)是既定的事實(shí),無(wú)論你多么想用你熟悉的語(yǔ)言,比如JavaScript、Java、Swift、C++等來(lái)開(kāi)發(fā)Flutter,至少目前都是不可以的。

在講解Dart的過(guò)程中,我會(huì)假定你已經(jīng)有一定的編程語(yǔ)言基礎(chǔ),比如JavaScript、Java、Python、C++等。

其實(shí)如果你對(duì)編程語(yǔ)言足夠的自信,Dart的學(xué)習(xí)過(guò)程甚至可以直接忽略:

  • 因?yàn)槟銓W(xué)過(guò)N種編程語(yǔ)言之后,你會(huì)發(fā)現(xiàn)他們的差異是并不大

  • 無(wú)非就是語(yǔ)法上的差異+某些語(yǔ)言有某些特性,而某些語(yǔ)言沒(méi)有某些特性而已;

  • 在我初次接觸Flutter的時(shí)候,并沒(méi)有專門(mén)去看Dart的語(yǔ)法,而是對(duì)于某些語(yǔ)法不太熟練的時(shí)候回頭去了解而已;

所以,如果你對(duì)編程語(yǔ)言已經(jīng)足夠了解,可以跳過(guò)我們接下來(lái)的Dart學(xué)習(xí):

  • 我也并不會(huì)所有特性都一一羅列,我會(huì)挑出比較重要的語(yǔ)言特性來(lái)專門(mén)講解;

  • 某些特性可能會(huì)等到后面講解Flutter的一些知識(shí)的時(shí)候單獨(dú)拿出來(lái)講解;

下面,我們就從安裝Dart開(kāi)始吧!

1.2. 安裝Dart

為什么還需要安裝Dart呢?

事實(shí)上在安裝Flutter SDK的時(shí)候,它已經(jīng)內(nèi)置了Dart了,我們完全可以直接使用Flutter去進(jìn)行Dart的編寫(xiě)并且運(yùn)行。

但是,如果你想單獨(dú)學(xué)習(xí)Dart,并且運(yùn)行自己的Dart代碼,最好去安裝一個(gè)Dart SDK。

下載Dart SDK

到Dart的官方,根據(jù)不同的操作系統(tǒng)下載對(duì)應(yīng)的Dart

無(wú)論是什么操作系統(tǒng),安裝方式都是有兩種:通過(guò)工具安裝直接下載SDK,配置環(huán)境變量

1.通過(guò)工具安裝

  • Windows可以通過(guò)Chocolatey

  • macOS可以通過(guò)homebrew

  • 具體安裝操作官網(wǎng)網(wǎng)站有詳細(xì)的解釋

2.直接下載SDK,配置環(huán)境變量

1.3. VSCode配置

學(xué)習(xí)Dart過(guò)程中,我使用VSCode作為編輯器

  • 一方面編寫(xiě)代碼非常方便,而且界面風(fēng)格我也很喜歡

  • 另一方面我可以快速在終端看到我編寫(xiě)代碼的效果

使用VSCode編寫(xiě)Dart需要安裝Dart插件:我目前給這個(gè)VSCode裝了四個(gè)插件

  • Dart和Flutter插件是為Flutter開(kāi)發(fā)準(zhǔn)備的

  • Atom One Dark Theme是我個(gè)人比較喜歡的一個(gè)主題

  • Code Runner可以點(diǎn)擊右上角的按鈕讓我快速運(yùn)行代碼

image.gif

二. Hello Dart

2.1. Hello World

接下來(lái),就可以步入正題了。學(xué)習(xí)編程語(yǔ)言,從祖?zhèn)鞯腍ello World開(kāi)始。

在VSCode中新建一個(gè)helloWorld.dart文件,添加下面的內(nèi)容:

main(List<String> args) {
  print('Hello World');
}

然后在終端執(zhí)行dart helloWorld.dart,就能看到Hello World的結(jié)果了。

完成了這個(gè)執(zhí)行過(guò)程之后,以你之前學(xué)習(xí)的編程語(yǔ)言來(lái)看,你能得到多少信息呢?

2.2. 程序的分析

接下來(lái),就是我自己的總結(jié):

  • 一、Dart語(yǔ)言的入口也是main函數(shù),并且必須顯式的進(jìn)行定義;

  • 二、Dart的入口函數(shù)main是沒(méi)有返回值的;

  • 三、傳遞給main的命令行參數(shù),是通過(guò)List<String>完成的。
    從字面值就可以理解List是Dart中的集合類型。
    其中的每一個(gè)String都表示傳遞給main的一個(gè)參數(shù);

main(List<String> args) {
  // List<String> args -> 列表<String> - 泛型
  print("Hello World");
}
  • 四、定義字符串的時(shí)候,可以使用單引號(hào)或雙引號(hào);

  • 五、每行語(yǔ)句必須使用分號(hào)結(jié)尾,很多語(yǔ)言并不需要分號(hào),比如Swift、JavaScript;

三. 定義變量

3.1. 明確聲明(Explicit)

明確聲明變量的方式, 格式如下:

變量類型 變量名稱 = 賦值;

示例代碼:

String name = 'coderwhy';
int age = 18;
double height = 1.88;
print('${name}, ${age}, ${height}'); // 拼接方式后續(xù)會(huì)講解

注意事項(xiàng): 定義的變量可以修改值, 但是不能賦值其他類型

String content = 'Hello Dart';
content = 'Hello World'; // 正確的
content = 111; // 錯(cuò)誤的, 將一個(gè)int值賦值給一個(gè)String變量

3.2. 類型推導(dǎo)(Type Inference)

類型推導(dǎo)聲明變量的方式, 格式如下:

var/dynamic/const/final 變量名稱 = 賦值;

3.3.1. var的使用

var的使用示例:

  • runtimeType用于獲取變量當(dāng)前的類型
var name = 'coderwhy';
name = 'kobe';
print(name.runtimeType); // String

var的錯(cuò)誤用法:

var age = 18;
age = 'why'; // 不可以將String賦值給一個(gè)int類型

3.3.2. dynamic的使用

如果確實(shí)希望這樣做,可以使用dynamic來(lái)聲明變量:

  • 但是在開(kāi)發(fā)中, 通常情況下不使用dynamic, 因?yàn)轭愋偷淖兞繒?huì)帶來(lái)潛在的危險(xiǎn)
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'; // 錯(cuò)誤做法

const age = 18;
age = 20; // 錯(cuò)誤做法

final和const有什么區(qū)別呢?

  • const在賦值時(shí), 賦值的內(nèi)容必須是在編譯期間就確定下來(lái)的

  • final在賦值時(shí), 可以動(dòng)態(tài)獲取, 比如賦值一個(gè)函數(shù)

String getName() {
  return 'coderwhy';
}

main(List<String> args) {
  const name = getName(); // 錯(cuò)誤的做法, 因?yàn)橐獔?zhí)行函數(shù)才能獲取到值
  final name = getName(); // 正確的做法
}

final和const小案例:

  • 首先, const是不可以賦值為DateTime.now()

  • 其次, final一旦被賦值后就有確定的結(jié)果, 不會(huì)再次賦值

// const time = DateTime.now(); // 錯(cuò)誤的賦值方式
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放在賦值語(yǔ)句的右邊,可以共享對(duì)象,提高性能:

  • 這里可以暫時(shí)先做了解,后面講解類的常量構(gòu)造函數(shù)時(shí),我會(huì)再次提到這個(gè)概念
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
}

四. 數(shù)據(jù)類型

4.1. 數(shù)字類型

對(duì)于數(shù)值來(lái)說(shuō),我們也不用關(guān)心它是否有符號(hào),以及數(shù)據(jù)的寬度和精度等問(wèn)題。只要記著整數(shù)用int,浮點(diǎn)數(shù)用double就行了。

不過(guò),要說(shuō)明一下的是Dart中的intdouble可表示的范圍并不是固定的,它取決于運(yùn)行Dart的平臺(tái)。

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

// 2.浮點(diǎn)類型double
double height = 1.88;
print(height);

字符串和數(shù)字之間的轉(zhuǎn)化:

// 字符串和數(shù)字轉(zhuǎn)化
// 1.字符串轉(zhuǎn)數(shù)字
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.數(shù)字轉(zhuǎn)字符串
var num1 = 123;
var num2 = 123.456;
var num1Str = num1.toString();
var num2Str = num2.toString();
var num2StrD = num2.toStringAsFixed(2); // 保留兩位小數(shù)
print('${num1Str} ${num1Str.runtimeType}'); // 123 String
print('${num2Str} ${num2Str.runtimeType}'); // 123.456 String
print('${num2StrD} ${num2StrD.runtimeType}'); // 123.46 String

4.2. 布爾類型

布爾類型中,Dart提供了一個(gè)bool的類型, 取值為true和false

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

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

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

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

4.3. 字符串類型

Dart字符串是UTF-16編碼單元的序列。您可以使用單引號(hào)或雙引號(hào)創(chuàng)建一個(gè)字符串:

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

可以使用三個(gè)單引號(hào)或者雙引號(hào)表示多行字符串:

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

字符串和其他變量或表達(dá)式拼接: 使用${expression}, 如果表達(dá)式是一個(gè)標(biāo)識(shí)符, 那么{}可以省略

// 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. 集合類型的定義

對(duì)于集合類型,Dart則內(nèi)置了最常用的三種:List / Set / Map。

其中,List可以這樣來(lái)定義:

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

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

其中,set可以這樣來(lái)定義:

  • 其實(shí),也就是把[]換成{}就好了。

  • SetList最大的兩個(gè)不同就是:Set是無(wú)序的,并且元素是不重復(fù)的。

// Set的定義
// 1.使用類型推導(dǎo)定義
var lettersSet = {'a', 'b', 'c', 'd'};
print('$lettersSet ${lettersSet.runtimeType}');

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

最后,Map是我們常說(shuō)的字典類型,它的定義是這樣的:

// Map的定義
// 1.使用類型推導(dǎo)定義
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. 集合的常見(jiàn)操作

了解了這三個(gè)集合的定義方式之后,我們來(lái)看一些最基礎(chǔ)的公共操作

第一類,是所有集合都支持的獲取長(zhǎng)度的屬性length

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

第二類, 是添加/刪除/包含操作

  • 并且,對(duì)List來(lái)說(shuō),由于元素是有序的,它還提供了一個(gè)刪除指定索引位置上元素的方法
// 添加/刪除/包含元素
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根據(jù)index刪除元素
numbers.removeAt(3);
print('$numbers');

第三類,是Map的操作

  • 由于它有key和value,因此無(wú)論是讀取值,還是操作,都要明確是基于key的,還是基于value的,或者是基于key/value對(duì)的。
// Map的操作
// 1.根據(jù)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.判斷是否包含某個(gè)key或者value
print('${infoMap1.containsKey('age')} ${infoMap1.containsValue(18)}'); // true true

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

五. 函數(shù)

5.1. 函數(shù)的基本定義

Dart是一種真正的面向?qū)ο笳Z(yǔ)言,所以即使函數(shù)也是對(duì)象,所有也有類型, 類型就是Function。

這也就意味著函數(shù)可以作為變量定義或者作為其他函數(shù)的參數(shù)或者返回值.

函數(shù)的定義方式:

返回值 函數(shù)的名稱(參數(shù)列表) {
  函數(shù)體
  return 返回值
}

按照上面的定義方式, 我們定義一個(gè)完整的函數(shù):

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

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

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

另外, 如果函數(shù)中只有一個(gè)表達(dá)式, 那么可以使用箭頭語(yǔ)法(arrow syntax)

  • 注意, 這里面只能是一個(gè)表達(dá)式, 不能是一個(gè)語(yǔ)句
sum(num1, num2) => num1 + num2;

5.2. 函數(shù)的參數(shù)問(wèn)題

函數(shù)的參數(shù)可以分成兩類: 必須參數(shù)和可選參數(shù)

前面使用的參數(shù)都是必須參數(shù).

5.2.1. 可選參數(shù)

可選參數(shù)可以分為 命名可選參數(shù)位置可選參數(shù)

定義方式:

命名可選參數(shù): {param1, param2, ...}
位置可選參數(shù): [param1, param2, ...]

命名可選參數(shù)的演示:

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

// 調(diào)用printInfo1函數(shù)
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

位置可選參數(shù)的演示:

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

// 調(diào)用printInfo2函數(shù)
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

命名可選參數(shù), 可以指定某個(gè)參數(shù)是必傳的(使用@required, 有問(wèn)題)

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

5.2.2. 參數(shù)默認(rèn)值

參數(shù)可以有默認(rèn)值, 在不傳入的情況下, 使用默認(rèn)值

  • 注意, 只有可選參數(shù)才可以有默認(rèn)值, 必須參數(shù)不能有默認(rèn)值
// 參數(shù)的默認(rèn)值
printInfo4(String name, {int age = 18, double height=1.88}) {
  print('name=$name age=$age height=$height');
}

Dart中的main函數(shù)就是一個(gè)接受可選的列表參數(shù)作為參數(shù)的, 所以在使用main函數(shù)時(shí), 我們可以傳入?yún)?shù), 也可以不傳入

5.3. 函數(shù)是一等公民

在很多語(yǔ)言中, 函數(shù)并不能作為一等公民來(lái)使用, 比如Java/OC. 這種限制讓編程不夠靈活, 所以現(xiàn)代的編程語(yǔ)言基本都支持函數(shù)作為一等公民來(lái)使用, Dart也支持.

這就意味著你可以將函數(shù)賦值給一個(gè)變量, 也可以將函數(shù)作為另外一個(gè)函數(shù)的參數(shù)或者返回值來(lái)使用.

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

  // 2.將函數(shù)作為另一個(gè)函數(shù)的參數(shù)
  test(foo);

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

// 1.定義一個(gè)函數(shù)
foo(String name) {
  print('傳入的name:$name');
}

// 2.將函數(shù)作為另外一個(gè)函數(shù)的參數(shù)
test(Function func) {
  func('coderwhy');
}

// 3.將函數(shù)作為另一個(gè)函數(shù)的返回值
getFunc() {
  return foo;
}

5.4. 匿名函數(shù)的使用

大部分我們定義的函數(shù)都會(huì)有自己的名字, 比如前面定義的foo、test函數(shù)等等。

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

main(List<String> args) {
  // 1.定義數(shù)組
  var movies = ['盜夢(mèng)空間', '星際穿越', '少年派', '大話西游'];

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

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

5.5. 詞法作用域

dart中的詞法有自己明確的作用域范圍,它是根據(jù)代碼的結(jié)構(gòu)({})來(lái)決定作用域范圍的

優(yōu)先使用自己作用域中的變量,如果沒(méi)有找到,則一層層向外查找。

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

  foo();
}

5.6. 詞法閉包

閉包可以訪問(wèn)其詞法范圍內(nèi)的變量,即使函數(shù)在其他地方被使用,也可以正常的訪問(wèn)。

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. 返回值問(wèn)題

所有函數(shù)都返回一個(gè)值。如果沒(méi)有指定返回值,則語(yǔ)句返回null;隱式附加到函數(shù)體。

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

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

備注:所有內(nèi)容首發(fā)于公眾號(hào),之后除了Flutter也會(huì)更新其他技術(shù)文章,TypeScript、React、Node、uniapp、mpvue、數(shù)據(jù)結(jié)構(gòu)與算法等等,也會(huì)更新一些自己的學(xué)習(xí)心得等,歡迎大家關(guān)注

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容