Skip to content

Dart 語言基本教學筆記

Last Updated on 2021-10-12 by Clay

過去在某堂課上，老師突發奇想（？）要讓每位同學交一份自己撰寫的手機 APP 當作期末專題的成品；也正是在那個時候，在某位朋友的推薦下，我嘗試學習著使用 Flutter 框架進行手機 APP 的開發。

不得不說，其實光看 Flutter 的官方指南就真的真的、已經很夠入門來開發一個簡單的小 APP 了。但是，隨著想要開發的功能不斷升級、變得越來越複雜，我對於用來開發的 Flutter 的 Dart 語言的不熟就暴露出來了：在需要完成很多在其他語言可以很快完成的程式邏輯中，我卻需要反覆查詢 Dart 的語法 —— 說穿了，其實我就是『對 Dart 這個程式語言不夠熟悉』。

當然，我並不會說不能直接學習如何使用 Flutter 進行開發。相信也有許多的前輩是這樣一路學習上來，還練就了一番好功夫的。

充其量，我只是想要簡單紀錄下 Dart 這個程式語言的一些基本特性與語法，試圖讓自己更了解如何去撰寫 Flutter。

Dart 介紹

Dart 是一種由 Google 所開發的程式語言，最早是用於瀏覽器的腳本語言，也是類似 JavaScript 的物件導向語言。（不過相對打對台的 JavaScript 以及系出同源的 Golang，Dart 的知名度明顯低上不少。）

近年來，由於 Flutter 開發套件的發展，我身邊也有著一些朋友開始學習 Dart，算是 Dart 發展至今相對順遂的時間點。

值得一提的是，Dart 的執行方式有兩種：

  • 在原生的虛擬機器上執行
  • 將 Dart 程式碼轉成 JavaScript

而在本文中紀錄的一些簡單的語法，若是想要測試，推薦使用 DartPad 這個線上工具直接執行。DartPad 的畫面如下：

左邊為編輯器，可以寫下想要測試的 Dart 程式碼；而在點擊下藍色的 RUN 按鈕後，執行結果會呈現在右方 Console 的區塊中。

如何撰寫 Dart 程式碼（基礎）

我將 Dart 的語法按照以下的幾個小單元紀錄：

  • Hello World
  • 註解
  • 變數與資料型態
  • 流程控制
  • 函式 Function
  • 類別 Class
  • 匯入 Import


Hello World (& how to print)

學習一個新的程式語言，不能免俗地，我們先從 Hello World 開始。

void main() {
  print("Hello World!");
}


Output:

Hello World!


在 Dart 語言中，main() 是程式的進入點，從這裡開始執行程式；而若是要印出字串，則可以使用 print() 函式。

順帶一提，要寫成 'Hello World!' 或是 "Hello World!" 都是可以的。


註解（comment）

/*
void main() {
  print("Hello World!");
}
*/

void main() {
  // This is a one-line comment
  print("Hello World!");
}


Output:

Hello World


註解跟 C 很相像，有分成單行註解以及多行註解。


變數與資料型態

在開始建立變數前，我先紀錄 Dart 的基本資料型態：

Data Type
資料型態		Keyword
關鍵字		Description
描述
Numbernum, int, double數值型態，又分成整數及浮點數
StringsString字串（字元序列）
Booleansbool分成 true 跟 false
ListsList有序陣列物件
MapsMapKey-Value pairs
String name = "Clay"; // Strings
int age = 18;      // Numbers 
bool fat = false;   // Boolean
List hobbies = [    // Lists
  "eating",
  "playing",
  "coding",
];

void main() {
  print("name: ${name} (${name.runtimeType})");
  print("age: ${age} (${age.runtimeType})");
  print("fat: ${fat} (${fat.runtimeType})");
  print("hobbies: ${hobbies} (${hobbies.runtimeType})");
}


Output:

name: Clay (String)
age: 18 (int)
fat: false (bool)
hobbies: [eating, playing, coding] (JSArray<dynamic>)


而除了指定變數的資料型態外，也可以跟 JavaScript 一樣使用 var 來宣告變數，讓變數依照賦值決定資料型態。

我們可以將上方的程式碼改寫為：

var name = "Clay"; // Strings
var age = 18;      // Numbers 
var fat = false;   // Boolean
var hobbies = [    // Lists
  "eating",
  "playing",
  "coding",
];

void main() {
  print("name: ${name} (${name.runtimeType})");
  print("age: ${age} (${age.runtimeType})");
  print("fat: ${fat} (${fat.runtimeType})");
  print("hobbies: ${hobbies} (${hobbies.runtimeType})");
}


這種寫法不影響輸出結果。


流程控制

For 迴圈

首先，先來看 Dart 中的 for 迴圈該如何撰寫，跟 C 的寫法非常像。

void main() {
  for (int i=0; i<10; ++i) {
    print(i);
  }
}


Output:

0
1
2
3
4
5
6
7
8
9



while 迴圈

再來看個 while 迴圈的版本。

void main() {
  int i = 0;
  while (i < 10) {
    print(i);
    ++i;
  }
}


Output:

0
1
2
3
4
5
6
7
8
9



if else 條件判斷式 + continue, break 流程控制

簡單來說，跟其他的程式語言類似：

  • if: 是第一個判斷條件
  • else if: 是第 N （N >= 2）個判斷條件
  • else: 是所有條件都不符合時，執行的區塊

另外，在迴圈的區塊中：

  • continue: 跳過底下執行的部分，直接開始下次迴圈
  • break: 跳出迴圈，不再執行迴圈中的程式碼

我們來看個例子，讓 i 從 0 計數到 50，在 20 以前都不印出、20 到 30 印出，然後在 31 時跳出迴圈。

void main() {
  int i = 0;
  while (i < 50) {
    ++i;
    if (i < 20) {
      continue;
    }
    else if (i == 31) {
      break;
    }
    
    print(i);
  }
}


Output:

20
21
22
23
24
25
26
27
28
29
30



函式 Function

int sum(int a, int b) {
  return a + b;
}


void main() {
  int a = 2;
  int b = 3;
  int c = sum(a, b);
  
  print(c);
}


Output:

5



類別 Class

物件與類別的介紹在這裡就先略過不表；我們直接來看個如何建造 Class 的例子。

class human {
  String name;
  int age;
  bool fat;
  
  // Init
  human(String name, int age, bool fat) {
    this.name = name;
    this.age = age;
    this.fat = fat;
  }
  
  // Method
  void info() {
    print("My name is ${this.name}");
    print("I am ${this.age} years old.");
    
    if (this.fat == true) {
      print("I am a little fat. =(");
    }
    else {
      print("I am not fat!");
    }
  }
}


void main() {
  // Init
  var clay = human("Clay", 18, false);
  var atlas = human("Atlas", 25, true);
  
  // Describe
  clay.info();
  atlas.info();
}


Output:

My name is Clay
I am 18 years old.
I am not fat!
My name is Atlas
I am 25 years old.
I am a little fat. =(


這是一個我很喜歡舉的例子，將『人物資訊』包裝成一個 Class 來作為範例。


匯入 Import

import "dart:math";               // Import Dart library
import "package:xxx/xxx.dart";    // Import Packages
import "PATH/TO/DART_FILE.dart";  // Import files


References

Read More

Tags:

2 thoughts on “Dart 語言基本教學筆記”

Leave a Reply