Flutter開發之Dart語言基礎

Flutter 發展歷史

Flutter是Google開發的一款用於幫助開發者在iOS和Android兩個平臺構建高質量原生應用的全新移動UI框架。說到Flutter,不少同窗可能會將它和下面的幾個詞關聯起來:新興的、移動端、動態化、跨平臺、開發框架。前端

簡單來講,Flutter是一款移動應用程序SDK,包含框架、widget和工具,爲開發人員提供了一種在Android和iOS上構建和部署精美移動應用程序的簡單高效的方式。web

Flutter項目由來已久,但真正爲人所熟知確是在2017年5月Google I/O大會上,下面就讓咱們來看一下Flutter項目的發展歷程:express

  • 2014.10: Flutter的前身Sky在GitHub上開源。
  • 2015.10: 通過一年的開源,Sky正式更名爲Flutter,低調期。
  • 2017.5: Google I/O正式向外界公佈了Flutter,這個時候Flutter才正式進去你們的視野。
  • 2018.6: 距5月Google I/O 1個月的時間,Flutter1.0預覽版。
  • 2018.12:Flutter1.0發佈,它的發佈將你們對Flutter的學習和研究推到了一個新的起點。
  • 2019.2:Flutter1.2發佈主要增長對web的支持。
  • 2019.5 :Flutter 1.5 發佈,此版本Flutter 發佈了Web版本, 正式開啓了 Flutter 的全平臺 UI 框架之路。
  • 2019.7 :Flutter 1.7 發佈,新增對AndroidX、Android App Bundles 和 64 位的 Android 應用的支持,加入一些新的功能和Widget以及解決一些開發者提出的問題。

隨着Flutter逐漸走向成熟,其開發生態圈也在不斷的發展,學習Flutter成爲前端開發者不可缺乏的傍身技能。編程

Dart語言基礎

簡介

Dart是由Google開發的一門全新的計算機編程語言,後來被ECMA批准爲標準的計算機編程語言,適用於服務器、瀏覽器、移動應用和物聯網等領域的開發。 Dart SDK由谷歌推出,附帶其編譯器 - Dart VM。 SDK還包括一個實用程序 - dart2js,一個生成與Dart腳本等效的JavaScript的轉換程序。 整體來講,Dart是一種面向對象的語言,具備C語言風格的語法,能夠選擇將它編譯成JavaScript。它支持各類編程輔助工具,如:接口,類,集合,泛型和可選類型。 Dart能夠普遍用於建立單頁面應用程序。單頁應用程序僅適用於網站和Web應用程序。單頁應用程序能夠在網站的不一樣屏幕之間進行導航,而無需在瀏覽器中加載不一樣的網頁。windows

下面是Dart與JavaScript的一些簡單區別: 數組

在這裏插入圖片描述
ps:谷歌發佈了一個特殊的Chromium版本 - Dart VM 。使用Dartium能夠在瀏覽器上進行測試以前,沒必要將代碼編譯爲JavaScript。

Dart 開發環境

執行Dart 代碼,可使用兩種方式,本地編輯器環境和在線運行環境。瀏覽器

在線運行環境

可使用 dartpad.dartlang.org/ 在線編輯器在線運行代碼,以下圖所示: bash

在這裏插入圖片描述

本地編輯器

在本地運行Dart代碼須要先安裝Dart Sdk,能夠從如下地址進行下載:服務器

完成SDK安裝後,將Dart可執行文件添加環境變量,以下所示:閉包

<dart-sdk-path>\bin
複製代碼

若是要驗證是否成功安裝Dart,能夠打開命令提示符並輸入如下命令 :

dart
複製代碼

若是輸出相應的信息,即說明安裝成功!

IDE

目前,支持Dart的IDE主要有Eclipse、VSCode、IntelliJ、Android Studio和WebStorm。使用IDE開發Dart應用程序時,只須要安裝Dart插件便可。例如,下面是Android Studio安裝Dart插件:

在這裏插入圖片描述

dart2js工具

art2js工具用於將Dart代碼編譯爲JavaScript。將Dart代碼編譯爲JS能夠在不支持Dart VM的瀏覽器上運行Dart腳本。 dart2js工具做爲Dart SDK的一部分提供,能夠在/dartsdk/bin文件夾中找到。要將Dart編譯爲JavaScript,能夠在終端中鍵入如下命令:

dart2js - - out = <output_file>.js  <dart_script>.dart
複製代碼

運行此命令後輝生成一個文件,即與Dart代碼等效的JavaScript。

第一個Dart程序

學習一門新的語言,都會來一個「Hello World!」,學習Dart 以前,咱們也來一個「Hello World!」。

main() { 
   print("Hello World!"); 
}
複製代碼

其中,main()函數是Dart中的預約義方法,此方法充當應用程序的入口點。執行上面的代碼,輸出結果以下:

Hello World!
複製代碼

說明,JavaScript沒有預約義的入口函數,但在Dart程序中,每一個app都必須有一個頂級的main()函數做爲應用程序的入口點。

Dart基礎語法

代碼註釋

註釋是提升程序可讀性的一種有效方法,註釋一般包含代碼的做者、函數/構造提示等信息。編譯器在編譯程序時會忽略註釋。目前,Dart支持如下類型的註釋:

// 單行註釋

/*
 * 多行註釋
 */

/**
 * 文檔註釋
 */

/// 使用三個斜槓開頭
/// 這是Dart特有的文檔註釋
複製代碼

Dart關鍵字

關鍵字在語言的上下文中具備特殊含義,下表是Dart語言中的一些關鍵字:

在這裏插入圖片描述
說明,和Java等面嚮對象語言同樣,以下一些規則對Dart也適用:

空白和換行 Dart忽略程序中出現的空格,製表符和換行符。能夠在程序中自由使用空格,製表符和換行符,而且能夠自由地以簡潔一致的方式格式化和縮進程序,使代碼易於閱讀和理解。

大小寫區分 Dart區分大小寫,Dart中大寫和小寫字符表示不一樣地含義。

聲明以分號結尾 每行指令都稱爲語句。每一個dart語句必須以分號(;)結尾。一行能夠包含多個語句。可是,這些語句必須用分號分隔。

類與對象

Dart是一種面向對象的語言,面向對象是一種遵循真實世界建模的軟件開發範例。在面向對象的編程世界裏, 對象能夠認爲是任何實體的實時表示,具備以下幾個特徵:

  • 狀態:由對象的屬性描述。
  • 行爲:描述對象的行爲方式。
  • 標識:將對象與一組相似此類對象區分開的惟一值。

而類則是建立對象的藍圖/模板,類能夠封裝對象的數據。

class TestClass {   
   void display() {     
      print("Dart and Object Orientation"); 
   } 
}  
void main() {   
   TestClass c = new TestClass();   
   c.display();  
}
複製代碼

內置數據類型

Dart支持的內置數據類型主要有如下幾種:

  • numbers 數字
  • strings 字符串
  • booleans 布爾
  • lists(也被稱之爲arrays)list和數組
  • sets set集合
  • maps map集合
  • runes(用於在字符串中表示Unicode字符串)
  • symbols 符號

其中,沒有初始化的變量默認值爲 null。數值類型變量的默認值也是 null。數值類型num有兩個具體子類,分別爲int和double,其中int爲整數值,範圍是-2^53 -2^53之間;double則是64位的雙精度浮點數。

變量與常量

變量

Dart中定義變量有兩種方式,一種是靜態類型語言經常使用的方式,即顯式指定變量的類型;另外一種則是動態語言的經常使用方式,不指定類型,由vm自動推斷。例如:

// 1.經過顯式指定類型來定義變量
String name = "張三";
num age = 18;

// 2.使用關鍵字var,不指定類型
var address = "深南大道";
var id = 100;
複製代碼

須要說明的是,使用var定義變量時,即便未顯式指定類型,一旦賦值後類型就被固定,若是再改變變量的類型,則會報錯:

var number = 19;
// 如下代碼錯誤,沒法運行,number變量已肯定爲int類型
number = "2019";
複製代碼

對於上面的狀況,可使用動態改變變量的數據類型,即便用dynamic或Object來定義變量。

// dynamic聲明變量
dynamic var1 = "hello";
var1 = 19;
print(var1);                 // 19

// Object聲明變量
Object var2 = 20;
var2 = "Alice";
print(var2);              // Alice

複製代碼

常量

Dart支持的常量定義方式也有兩種,一種是使用final關鍵字,同Java中的用法, 一個 final 變量只能賦值一次;另外一種是Dart的方式,使用const關鍵字定義,也是JavaScript採用的方式。

// 使用final關鍵字定義常量
final height = 10;

// 使用const關鍵字定義常量
const pi = 3.14;
複製代碼

須要說明的是,final定義的常量是運行時常量,而const常量則是編譯時常量,也就是說final定義常量時,其值能夠是一個變量,而const定義的常量,其值必須是一個字面常量值。

final time = new DateTime.now(); // 正確
const time = new DateTime.now(); // 錯誤


const list = const[1,2,3];       // 正確
const list = [1,2,3];            // 錯誤

複製代碼

Dart基本類型操做

Dart支持的基本數據類型主要有如下幾種:

  • 數字
  • 字符串
  • 布爾
  • 列表(相似於數組)
  • 集合
  • 映射符文(用於表示字符串中的Unicode字符)
  • 符號

數字

Dart中的數字類型有兩種類型:整數和雙精度類型。

  • 整數:整數值表示非小數值,即沒有小數點的數值。例如,10是整數。
  • 雙精度數:Dart還支持小數數值,即帶小數點的值,Dart中的Double數據類型表示64位(雙精度)浮點數。例如,10.10。
//整數
var x = 123;
var hex = 0xDEADBEEF;

//雙精度數
var y = 1.199;
var exponents = 1.42e5;

複製代碼

從Dart 2.1開始,必要時整數會自動轉換爲雙精度數,例如:

double z = 10;  // 至關於 double z = 10.0.
複製代碼

除此以外,字符串也能夠轉換爲數字,例如:

// String 轉爲 int
var one = int.parse('1');
assert(one == 1);

// String 轉爲 double
var onePointOne = double.parse('1.1');
assert(onePointOne == 1.1);

// int 轉爲 String
String oneAsString = 1.toString();
assert(oneAsString == '1');

// double 轉爲 String
String piAsString = 3.14159.toStringAsFixed(2);
assert(piAsString == '3.14');
複製代碼

字符串

字符串表明一系列字符。例如,若是要存儲一些數據,如名稱,地址等,則應使用字符串數據類型。Dart字符串是一系列UTF-16代碼單元。符文用於表示UTF-32代碼單元序列。

Dart使用關鍵字String來表示字符串文字,字符串的值支持單引號或雙引號方式。

var s1 = 'Single quotes work well for string literals.';
var s2 = "Double quotes work just as well.";

複製代碼

同事,可使用${expression}將表達式的值放在字符串中。若是表達式是標識符,則能夠跳過{}。

var name = "王五";
var aStr = "hello,${name}";
print(aStr);  
複製代碼

Dart還支持使用"+"操做符拼接字符串。

var greet = "hello" + " world";
複製代碼

使用帶有單引號或雙引號的三引號建立多行字符串。

var s1 = ''' You can create multi-line strings like this one. ''';
複製代碼

布爾類型

和Java語言中的boolean類型相似,Dart中的布爾類型僅有false、true兩個值,不能使用0、非0或者null、非null來表達false和true。

bool flags;
print(flags);    // null
複製代碼

列表

在Dart中,數組是一個List對象,大多數人也將它稱爲列表。Dart中列表操做與JavaScript中的數組類似。

var list = [1, 2, 3];
複製代碼

列表使用從0開始的索引,其中0是第一個元素的索引,list.length-1是最後一個元素的索引。能夠得到列表的長度並像在JavaScript中同樣引用列表元素,例如:

var list = [1, 2, 3];
assert(list.length == 3);
assert(list[1] == 2);

list[1] = 1;
assert(list[1] == 1);
複製代碼

要建立一個編譯時常量的列表,能夠在列表文字以前添加const關鍵字,例如:

var constantList = const [1, 2, 3];
複製代碼

同事,Dart 在2.3版本引入了擴展運算符(...)和空值感知擴展運算符(...?),它提供了一種將多個元素插入集合的簡潔方法。例如,使用擴展運算符(...)將列表的全部元素插入另外一個列表:

var list = [1, 2, 3];
var list2 = [0, ...list];
assert(list2.length == 4);
複製代碼

若是擴展運算符右側的表達式可能爲null,則能夠經過使用支持null的擴展運算符(...?)來避免異常:

var list;
var list2 = [0, ...?list];
assert(list2.length == 1);
複製代碼

集合

Dart中的Set是無序的惟一項的集合,Dart支持由Set文字和Set類型提供的集合。例如,下面是一個簡單的Dart集合:

var test = {'yiibai.com', 'chlorine', 'bromine', 'iodine', 'astatine'};
複製代碼

集合支持使用add()或addAll()方法,例如:

var elements = <String>{};
elements.add('hello');
elements.addAll(test);
複製代碼

一樣,要建立一個編譯時常量的集合,請在set文字以前添加const關鍵字:

final constantSet = const {
  'fluorine',
  'chlorine',
  'bromine',
  'iodine',
  'astatine',
};
複製代碼

映射

映射,又稱爲關聯數組,至關於Java中的HashMap。映射由關聯鍵和值構成,鍵和值均可以是任何類型的對象。每一個鍵只出現一次,但能夠屢次使用相同的值。

var gifts = {
  // Key:    Value
  'first': 'partridge',
  'second': 'turtledoves',
  'fifth': 'golden rings'
};

var nobleGases = {
  2: 'helium',
  10: 'neon',
  18: 'argon',
};
複製代碼

固然,Dart還可使用Map構造函數建立相同的對象。

var gifts = Map();
gifts['first'] = 'partridge';
gifts['second'] = 'turtledoves';
gifts['fifth'] = 'golden rings';

var nobleGases = Map();
nobleGases[2] = 'helium';
nobleGases[10] = 'neon';
nobleGases[18] = 'argon';
複製代碼

要建立一個編譯時常量的映射,能夠在map文字以前添加const關鍵字,例如:

final constantMap = const {
  2: 'helium',
  10: 'neon',
  18: 'argon',
};
複製代碼

符文

在Dart中,符文使用的是字符串的UTF-32代碼點。Unicode爲世界上全部書寫系統中使用的每一個字母,數字和符號定義惟一的數值。因爲Dart字符串是UTF-16代碼單元的序列,所以在字符串中表示32位Unicode值須要使用特殊語法。

在Dart中,String類有幾個屬性可用於提取符文信息。codeUnitAt和codeUnit屬性返回16位代碼單元。

符號

Symbol對象表示Dart程序中聲明的運算符或標識符。可能永遠不須要使用符號,但它們對於按名稱引用標識符的API很是有用,由於縮小會更改標識符名稱而不會更改標識符符號。

要獲取標識符的符號,請使用符號文字,例如:

#radix
#bar
複製代碼

函數

函數是一組用於執行特定任務的代碼塊,咱們能夠將程序當作是多個函數按照某種邏輯組建的代碼塊。

在Dart中,函數(或方法)也是一個對象,它的類型是 Function。 這意味着,函數能夠賦值給變量,也能夠當作其餘函數的參數。

基本定義

在Dart中定義函數,基本上與Java相似,例如:

/ 定義一個不帶返回值的函數,能夠帶void, 也能夠不帶
void say(var word){
    print("I say '${word}'";
}
 
// 參數能夠不用指定類型,若是不指定,則默認是var
bool isInt(numVar){
    return numVar is int;
}
 
// 若是函數只有一個return 語句能夠用 => 簡寫
// 須要注意 => 後面只能是一個表達式或者是單條語句。
bool isInt2(numVar) => numVar is int;
 
main(){
   say('hello world'); // I say 'hello world'
   print(isInt('a')); // false
   print(isInt(1)); // true
}

複製代碼

參數

Dart支持命名可選參數和位置可選參數。其中,命名可選參數使用的是{}, 位置可選參數使用的是[]。區別就是, 若是用{}聲明,在使用時必須帶着參數名,如:a:123;若是用[]聲明,在使用時須要按照順序使用。 命令可選參數

// 定義一個函數,參數列表用花括號包裹
enableFlags({bool bold, bool hidden}) {
    // do something
}

// 調用方式,傳參時使用"參數名:值"的形式
enableFlags(hidden:true,bold:false);
複製代碼

位置可選參數

// 定義add函數
add(int x, [int y, int z]){
    int result = x;
    if (y !=  null){
        result = result + y;
    }

    if (z !=  null){
        result = result + z;
    }
    print(result);
}

// 調用
add(18);           // 18
add(18,12);        // 30
add(18, 12, 15);   // 45

複製代碼

若是要給位置可選參數設置默認值,可使用下面的方式:

add(int x, [int y=0, int z=0]){
    print(x +y+z);
}
複製代碼

匿名函數

大部分狀況下,函數都有本身的名字,但咱們也能夠建立沒有名字的函數,稱爲匿名函數。

var func = (x,y){
    return x + y;
};

print(func(10,11));        // 21
複製代碼

閉包

閉包(Closure)是一種能被調用對象,它保存了建立它的做用域的信息,所以閉包能夠讀取其餘做用域內的變量使用。使用匿名函數能夠輕鬆的實現Dart的閉包,例如:

Function makeAdder(num){
  return (addNum){
    return addNum + num;
  };
}
main(){
  var add5 = makeAdder(5);
  var add10 = makeAdder(10);
 
  print(add5(1)); // 6
  print(add10(1)); // 11
}

複製代碼

運算符

Dart語言中的運算符與Java中的運算符絕大多數相同,主要的運算符有以下一些:

  • 算術運算符
  • 相等和關係運算符
  • 類型檢查運算符
  • 按位運算符
  • 賦值運算符
  • 邏輯運算符

算術運算符

Dart的算術運算符,除了常見的+、-、*、/、%以外,Dart中又多出了一個整除運算符~/,與普通除號的區別是將相除後的結果取整返回。

在這裏插入圖片描述

assert(2 + 3 == 5);
assert(2 - 3 == -1);
assert(2 * 3 == 6);
assert(5 / 2 == 2.5);
assert(5 ~/ 2 == 2);
assert(5 % 2 == 1);
複製代碼

關係運算符

關係運算符測試或定義兩個實體之間的關係類型。Dart的關係運算符以下表:

在這裏插入圖片描述
例如:

assert(2 == 2);
assert(2 != 3);
assert(3 > 2);
assert(2 < 3);
assert(3 >= 3);
assert(2 <= 3);
複製代碼

類型檢查運算符

類型檢查運算符能夠方便地在運行時檢查類型,Dart的類型檢查運算符主要由as、is和is!組成。

在這裏插入圖片描述

按位運算符

Dart支持的按位運算符及其做用以下表:

在這裏插入圖片描述
例如:

final value = 0x22;
final bitmask = 0x0f;

assert((value & bitmask) == 0x02);
assert((value & ~bitmask) == 0x20);
assert((value | bitmask) == 0x2f);
assert((value ^ bitmask) == 0x2d);
assert((value << 4) == 0x220);
assert((value >> 4) == 0x02);

複製代碼

賦值運算符

賦值用 = 運算符,若是在前面加上其餘運算符(好比 += )就能夠組成複合賦值運算符。Dart支持的賦值運算符以下表:

在這裏插入圖片描述

邏輯運算符

邏輯運算符用於組合兩個或多個條件, 邏輯運算符返回一個布爾值。

在這裏插入圖片描述
例如:

if (!done && (col == 0 || col == 3)) {
  // ...
}
複製代碼

條件分支

Dart中條件表達式和其餘語言相似,主要由if語句、if…else語句和else…if語句組成。

在這裏插入圖片描述
例如,if條件分支

if(i < 0){
  print('i < 0');
}else if(i == 0){
  print('i = 0');
} else {
  print('i > 0');
}
複製代碼

switch條件分支:

String command = 'OPEN';
switch (command) {
  case 'CLOSED':
    break;
  case 'OPEN':
    break;
  default:
    print('Default');
}
複製代碼

循環語句

和Java的循環語句相似,Dart的循環語句主要由for循環、while循環和do…while循環等循環語句構成。其中,for循環和for…in循環又稱爲肯定(Definite)循環,以下表:

在這裏插入圖片描述
例如:

for(int i = 0; i < 9; i++) {
  print(i);
}
複製代碼

while循環和do…while循環被稱爲無限循環,以下表:

在這裏插入圖片描述
例如:

/ while循環
while(true){
  //do something
}

// do-while循環
do{
  //do something
} while(true);
複製代碼

爲了控制循環語句,可使用break語句和continue語句,以下表:

在這裏插入圖片描述
例如: break控制語句

void main() { 
   outerloop: // This is the label name 

   for (var i = 0; i < 5; i++) { 
      print("Innerloop: ${i}"); 
      innerloop: 

      for (var j = 0; j < 5; j++) { 
         if (j > 3 ) break ; 

         // Quit the innermost loop 
         if (i == 2) break innerloop; 

         // Do the same thing 
         if (i == 4) break outerloop; 

         // Quit the outer loop 
         print("Innerloop: ${j}"); 
      } 
   } 
}
複製代碼

continue控制語句

void main() { 
   outerloop: // This is the label name 

   for (var i = 0; i < 3; i++) { 
      print("Outerloop:${i}"); 

      for (var j = 0; j < 5; j++) { 
         if (j == 3){ 
            continue outerloop; 
         } 
         print("Innerloop:${j}"); 
      } 
   } 
}
複製代碼

附錄:Dart語言基礎教程

相關文章
相關標籤/搜索