此篇文章用來(lái)記錄學(xué)習(xí)Flutter 和 Dart 相關(guān)知識(shí)

---

零.Dart基本數(shù)據(jù)類型

Dart 是一種靜態(tài)類型的編程語(yǔ)言，它提供了一系列基本數(shù)據(jù)類型，用于存儲(chǔ)和操作不同種類的數(shù)據(jù)。以下是 Dart 中的一些基本數(shù)據(jù)類型以及它們的詳細(xì)介紹：

1. 整數(shù)類型（Integer）:

Dart 提供了兩種整數(shù)類型：int 和 num。
int 表示整數(shù)，可以存儲(chǔ)正數(shù)、負(fù)數(shù)和零。
num 是 int 和 double 的超類型，可以用來(lái)表示整數(shù)和浮點(diǎn)數(shù)。

int age = 30;
num temperature = 98.6;

2. 浮點(diǎn)數(shù)類型（Double）:

Dart 中的浮點(diǎn)數(shù)類型為 double，用于表示帶有小數(shù)點(diǎn)的數(shù)值。

double pi = 3.14159;

3.字符串類型（String）:

字符串類型用于表示文本數(shù)據(jù)。
字符串可以由單引號(hào)或雙引號(hào)包圍。

String greeting = 'Hello, Dart!';

4.布爾類型（Boolean）:

布爾類型只有兩個(gè)值：true 和 false，用于表示邏輯真值和假值。

bool isDartFun = true;

5.列表類型（List）:

列表是有序的數(shù)據(jù)集合，可以包含不同類型的元素。
列表使用方括號(hào) [] 定義，并可以通過(guò)索引訪問(wèn)元素。

List<int> numbers = [1, 2, 3, 4, 5];

6.映射類型（Map）:

映射是一組鍵值對(duì)的集合，其中每個(gè)鍵都與一個(gè)值相關(guān)聯(lián)。
映射使用大括號(hào) {} 定義。

Map<String, int> grades = {'Alice': 90, 'Bob': 85, 'Carol': 92};

7.符號(hào)類型（Symbol）:
符號(hào)類型用于表示運(yùn)行時(shí)的標(biāo)識(shí)符或運(yùn)算符。
符號(hào)使用 # 符號(hào)前綴定義。

Symbol mySymbol = #myIdentifier;

8.空類型（Null）:

Dart 有一個(gè)特殊的數(shù)據(jù)類型 Null，表示一個(gè)空值或缺失值。
在非空安全（null-safe）的 Dart 中，所有的變量默認(rèn)都不可以為 null，需要使用 ? 明確標(biāo)記為可為 null。

String? nullableString = null; // 可為 null 的字符串

9.動(dòng)態(tài)類型（Dynamic）:

dynamic 是 Dart 中的一個(gè)特殊類型，可以存儲(chǔ)任意類型的數(shù)據(jù)。
使用 dynamic 聲明的變量可以在運(yùn)行時(shí)改變其類型。

dynamic dynamicVariable = 42;
dynamicVariable = 'Hello';

這些是 Dart 中的一些基本數(shù)據(jù)類型。Dart 還支持更多高級(jí)數(shù)據(jù)類型，例如函數(shù)、類、枚舉等，以便更靈活地處理各種數(shù)據(jù)和邏輯。此外，Dart 2.12 引入了非空安全（null safety）功能。
注意
Dart 中沒(méi)有專門的字節(jié)數(shù)據(jù)類型，而是使用 int 來(lái)表示字節(jié)值，因?yàn)?Dart 的整數(shù)類型 int 可以存儲(chǔ) 8 位的無(wú)符號(hào)整數(shù)，正好對(duì)應(yīng)一個(gè)字節(jié)。如果你需要表示多個(gè)字節(jié)的數(shù)據(jù)，可以使用列表 (List) 或字節(jié)數(shù)組 (Uint8List，通常需要導(dǎo)入 dart:typed_data 庫(kù))。

一.Dart 一些語(yǔ)法

const:關(guān)鍵字，用于聲明一個(gè)編譯時(shí)常量

變量聲明
const int x = 5;構(gòu)造函數(shù): 用于聲明一個(gè)可以在編譯時(shí)確定值的常量構(gòu)造函數(shù)。
class MyClass {final int value;const MyClass(this.value);
}數(shù)組和映射字面量: 可以用 const 聲明編譯時(shí)常量的數(shù)組和映射。
const List<int> numbers = [1, 2, 3];
const Map<String, int> scores = {'John': 100, 'Jane': 90};

繼承關(guān)系
dart有三種方式，分別是extends(繼承)，with（混入） ，implements（實(shí)現(xiàn)），三種可以混合使用，其中with，implements后可以多繼承，用逗號(hào)隔開(kāi)，extends后面只能跟一個(gè)，優(yōu)先級(jí)順序?yàn)閣ith>extends>implements,當(dāng)with，implements后跟了多個(gè)的時(shí)候，優(yōu)先級(jí)最右邊大于左邊，依次類推，例如extends a with b,c implements d,h，優(yōu)先級(jí)為c>b>a>h>d;

函數(shù)可選參數(shù)
與java不同，dart中不支持重載，java支持方法重載，dart想要實(shí)現(xiàn)java類似的效果，可以通過(guò)可選參數(shù)來(lái)實(shí)現(xiàn)

selectFunction("張三");
selectFunction("李四",type: 1);
selectFunction("王五",type: 1,money: 83.2);void selectFunction(String name,{int? type,double? money}){print("名字：$name--類型：$type--金額：$money");
}
//注意dart可選參數(shù)必須要加？來(lái)表示該參數(shù)默認(rèn)值為null，如果去掉？可以手動(dòng)寫(xiě)個(gè)默認(rèn)值，例如
void selectFunction(String name,{int type = 0,double? money}){print("名字：$name--類型：$type--金額：$money");
}
//輸出結(jié)果：名字：張三--類型：null--金額：null
//名字：李四--類型：1--金額：null
//名字：王五--類型：1--金額：83.2

---

二.Flutter 中的一些基礎(chǔ)小部件

Center（居中對(duì)齊小部件）：

Center小部件用于在可用空間內(nèi)使其子小部件水平和垂直居中對(duì)齊。它接受一個(gè)需要居中的子小部件。Center小部件將擴(kuò)展以填充父小部件的所有可用空間，并在該空間內(nèi)居中其子小部件。

Center(child: Text('Hello, Flutter!',style: TextStyle(fontSize: 24.0),),
)

Text（文本小部件）：

Text小部件用于在屏幕上顯示一行文本?？梢宰远x文本的樣式，例如字體大小、顏色和對(duì)齊方式。通過(guò)將字符串傳遞給Text小部件的data參數(shù)，可以設(shè)置文本的內(nèi)容。

常用的Text屬性：

• data（String）：要顯示的文本內(nèi)容。
• style（TextStyle）：定義文本的樣式，如字體、大小、顏色等。
• textAlign（TextAlign）：指定文本在水平方向上的對(duì)齊方式。
  –TextAlign.left：文本左對(duì)齊。
  –TextAlign.right：文本右對(duì)齊。
  –TextAlign.center：文本居中對(duì)齊。
  –TextAlign.justify：文本兩端對(duì)齊，會(huì)調(diào)整單詞和字之間的間隔。
• textDirection（TextDirection）：指定文本的方向，如從左到右或從右到左。
• textScaleFactor（double）：指定文本的縮放比例。
• maxLines（int）：指定允許的最大行數(shù)，超過(guò)將使用"…"截?cái)唷?/li>
• overflow（TextOverflow）：定義文本溢出時(shí)的處理方式。
• softWrap（bool）：指定文本是否自動(dòng)換行。

 body: Center(child: Text('Hello, Flutter!',style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold,color: Colors.blue,),),),

Button(按鈕)

RaisedButton

RaisedButton 是一個(gè)具有凸起效果的按鈕，通常用于主要操作。

它具有各種自定義屬性，如 onPressed、child、color、disabledColor、textColor 等，以定制外觀和行為。

RaisedButton(onPressed: () {// 按鈕被點(diǎn)擊時(shí)執(zhí)行的操作},child: Text('Submit'),
)

FlatButton

FlatButton 是一個(gè)扁平化的按鈕，通常用于次要操作。

它有類似于 RaisedButton 的自定義屬性，可以根據(jù)需求進(jìn)行定制。

FlatButton(onPressed: () {// 按鈕被點(diǎn)擊時(shí)執(zhí)行的操作},child: Text('Cancel'),
)

OutlineButton

OutlineButton 是一個(gè)帶有邊框的按鈕，通常用于取消操作或與背景區(qū)分。

它也有類似于 RaisedButton 的自定義屬性，以便自定義外觀和行為。

OutlineButton(onPressed: () {// 按鈕被點(diǎn)擊時(shí)執(zhí)行的操作},child: Text('Clear'),
)

FloatingActionButton

FloatingActionButton 是一個(gè)圓形的浮動(dòng)操作按鈕，常用于應(yīng)用程序的主要操作。

它也具有各種自定義屬性和樣式，可以根據(jù)需求進(jìn)行調(diào)整。

FloatingActionButton(onPressed: () {// 按鈕被點(diǎn)擊時(shí)執(zhí)行的操作},child: Icon(Icons.add),
)

IconButton

IconButton 是一個(gè)只包含圖標(biāo)的按鈕，通常用于具有圖標(biāo)表示的操作。

它也有各種自定義屬性和樣式，以便自定義外觀和行為。

IconButton(onPressed: () {// 按鈕被點(diǎn)擊時(shí)執(zhí)行的操作},icon: Icon(Icons.favorite),
)

Container（容器小部件）：

Container小部件是一個(gè)多用途靈活的小部件，可以包含其他小部件。允許自定義屬性，如寬度、高度、填充、邊距、顏色等，以控制其子小部件的布局和外觀。它還可以對(duì)子小部件應(yīng)用變換、裝飾和約束。

Container(width: 200.0,height: 100.0,color: Colors.blue,child: Center(child: Text('Hello, Flutter!',style: TextStyle(fontSize: 24.0, color: Colors.white),),),
)

Row和Column（行和列小部件）：

這些布局小部件用于將其子小部件按水平（Row）或垂直（Column）線排列。它們可以包含多個(gè)子小部件，并根據(jù)子小部件的屬性和可用空間自動(dòng)調(diào)整大小和位置。可以使用特定參數(shù)控制子小部件的對(duì)齊方式、間距和調(diào)整大小的行為。

Row小部件具有以下一些常用的屬性：

• children（List<Widget>）：需要包含在Row中的子部件列表。
• mainAxisAlignment（MainAxisAlignment）：子部件在主軸方向上的對(duì)齊方式，默認(rèn)是start。
• crossAxisAlignment（CrossAxisAlignment）：子部件在交叉軸方向上的對(duì)齊方式，默認(rèn)是start。
• mainAxisSize（MainAxisSize）：Row在主軸方向上的大小約束，默認(rèn)是MainAxisSize.max。
• textDirection（TextDirection）：子部件的文本方向，默認(rèn)是TextDirection.ltr。
• verticalDirection（VerticalDirection）：子部件在垂直方向上布局的方向，默認(rèn)是VerticalDirection.down。

 body: Row(mainAxisAlignment: MainAxisAlignment.center, // 在水平方向上居中對(duì)齊crossAxisAlignment: CrossAxisAlignment.start, // 在垂直方向上上對(duì)齊mainAxisSize: MainAxisSize.min, // 占用盡可能少的水平空間textDirection: TextDirection.ltr, // 子部件的文本方向從左到右verticalDirection: VerticalDirection.down, // 從上到下布局children: [Text('First Item',style: TextStyle(fontSize: 24),),SizedBox(width: 20), // 在子部件之間增加間距Text('Second Item',style: TextStyle(fontSize: 24),),Container(color: Colors.blue,width: 200,height: 200,child: Text('Third Item',style: TextStyle(fontSize: 24, color: Colors.white),),),],),

Column小部件具有以下一些常用的屬性：

• children（List<Widget>）：需要包含在Column中的子部件列表。
• mainAxisAlignment（MainAxisAlignment）：子部件在主軸方向上的對(duì)齊方式，默認(rèn)是start。
• crossAxisAlignment（CrossAxisAlignment）：子部件在交叉軸方向上的對(duì)齊方式，默認(rèn)是start。
• mainAxisSize（MainAxisSize）：Column在主軸方向上的大小約束，默認(rèn)是MainAxisSize.max。
• verticalDirection（VerticalDirection）：子部件在垂直方向上布局的方向，默認(rèn)是VerticalDirection.down。

body: Column(mainAxisAlignment: MainAxisAlignment.center, // 在垂直方向上居中對(duì)齊crossAxisAlignment: CrossAxisAlignment.start, // 在水平方向上左對(duì)齊mainAxisSize: MainAxisSize.min, // 占用盡可能少的垂直空間verticalDirection: VerticalDirection.down, // 從上到下布局children: [Text('First Item',style: TextStyle(fontSize: 24),),SizedBox(height: 20), // 在子部件之間增加間距Text('Second Item',style: TextStyle(fontSize: 24),),Container(color: Colors.blue,width: 200,height: 200,child: Text('Third Item',style: TextStyle(fontSize: 24, color: Colors.white),),),],),

Image（圖像小部件）：

Image小部件用于在屏幕上顯示圖像。它支持各種圖像來(lái)源，例如本地資源、網(wǎng)絡(luò)圖像和內(nèi)存圖像?？梢宰远x其屬性，如大小、縮放和對(duì)齊方式，以及處理加載和錯(cuò)誤狀態(tài)。

Image(image: AssetImage('assets/images/flutter_logo.png'),width: 100.0,height: 100.0,
)

StatelessWidget和StatefulWidget

StatelessWidget：
StatelessWidget是一種無(wú)狀態(tài)的小部件，意味著它在創(chuàng)建后是不可變的，不會(huì)隨時(shí)間改變。它基于構(gòu)建函數(shù)的輸入?yún)?shù)，一旦構(gòu)建完成，就渲染出靜態(tài)的用戶界面。簡(jiǎn)單來(lái)說(shuō)，StatelessWidget沒(méi)有內(nèi)部狀態(tài)（state）。

import 'package:flutter/material.dart';class MyWidget extends StatelessWidget {final String text;MyWidget({required this.text});@overrideWidget build(BuildContext context) {return Container(child: Text(text),);}
}

StatefulWidget：
StatefulWidget是一種有狀態(tài)的小部件，它的內(nèi)部狀態(tài)可以隨時(shí)間變化，所以它可以在創(chuàng)建后重新構(gòu)建。StatefulWidget由兩個(gè)部分組成：一個(gè)是State對(duì)象，用于保存和管理小部件的狀態(tài)，另一個(gè)是StatefulWidget類本身，用于構(gòu)建小部件的UI。

import 'package:flutter/material.dart';class CounterWidget extends StatefulWidget {@override_CounterWidgetState createState() => _CounterWidgetState();
}class _CounterWidgetState extends State<CounterWidget> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return Column(children: [Text('Counter: $_counter'),ElevatedButton(onPressed: _incrementCounter,child: Text('Increment'),),],);}
}

GestureDetector

用于處理用戶手勢(shì)和觸摸事件。它可以用于識(shí)別和響應(yīng)各種手勢(shì)，如點(diǎn)擊、長(zhǎng)按、拖動(dòng)、縮放和滑動(dòng)等。GestureDetector 可以包裹任何其他小部件，并通過(guò)回調(diào)函數(shù)來(lái)響應(yīng)不同的手勢(shì)事件。

GestureDetector 的常用屬性和介紹：

• onTap: 當(dāng)用戶輕觸手勢(shì)時(shí)觸發(fā)的回調(diào)函數(shù)。
• onDoubleTap: 當(dāng)用戶雙擊手勢(shì)時(shí)觸發(fā)的回調(diào)函數(shù)。
• onLongPress: 當(dāng)用戶長(zhǎng)按手勢(shì)時(shí)觸發(fā)的回調(diào)函數(shù)。
• onLongPressMoveUpdate: 當(dāng)用戶在長(zhǎng)按手勢(shì)的情況下移動(dòng)時(shí)觸發(fā)的回調(diào)函數(shù)。
• onVerticalDragDown: 當(dāng)用戶在垂直方向開(kāi)始拖動(dòng)手勢(shì)時(shí)觸發(fā)的回調(diào)函數(shù)。
• onVerticalDragEnd: 當(dāng)用戶在垂直方向結(jié)束拖動(dòng)手勢(shì)時(shí)觸發(fā)的回調(diào)函數(shù)。
• onScaleStart: 當(dāng)用戶開(kāi)始縮放手勢(shì)時(shí)觸發(fā)的回調(diào)函數(shù)。
• onScaleUpdate: 當(dāng)用戶進(jìn)行縮放手勢(shì)時(shí)觸發(fā)的回調(diào)函數(shù)。
• behavior: 用于指定如何識(shí)別和處理手勢(shì)事件的 HitTestBehavior。

使用示例：

import 'package:flutter/material.dart';class MyGestureDetector extends StatelessWidget {@overrideWidget build(BuildContext context) {return GestureDetector(// 點(diǎn)擊事件onTap: () {print('onTap');},// 雙擊事件onDoubleTap: () {print('onDoubleTap');},// 長(zhǎng)按事件onLongPress: () {print('onLongPress');},// 縮放手勢(shì)onScaleStart: (details) {print('onScaleStart: ${details.focalPoint}');},onScaleUpdate: (details) {print('onScaleUpdate: ${details.focalPoint}, ${details.scale}');},onScaleEnd: (details) {print('onScaleEnd: ${details.velocity}');},// 拖動(dòng)手勢(shì)onPanStart: (details) {print('onPanStart: ${details.globalPosition}');},onPanUpdate: (details) {print('onPanUpdate: ${details.globalPosition}');},onPanEnd: (details) {print('onPanEnd: ${details.velocity}');},// 指針擊中測(cè)試behavior: HitTestBehavior.opaque,// 點(diǎn)擊區(qū)域的命中測(cè)試hitTestBehavior: HitTestBehavior.translucent,// 排除特定手勢(shì)excludeFromSemantics: true,// 雙擊事件的時(shí)間窗口doubleTapTimeout: Duration(milliseconds: 300),// 長(zhǎng)按事件的時(shí)間窗口longPressTimeout: Duration(milliseconds: 500),// 長(zhǎng)按事件的觸發(fā)間隔longPressMoveUpdateDelay: Duration(milliseconds: 200),// 其它屬性dragStartBehavior: DragStartBehavior.start,child: Container(width: 200,height: 200,color: Colors.blue,),);}
}

Stack

Stack 是一個(gè)用于將多個(gè)小部件（Widgets）疊加在一起的布局小部件。Stack 允許您將小部件堆疊在其他小部件之上，這樣可以創(chuàng)建各種復(fù)雜的布局，例如疊加式用戶界面元素，重疊的圖像和文本等。

Stack 的主要特點(diǎn)和用法包括：

1. 子部件的堆疊：Stack 可以包含多個(gè)子部件，它們會(huì)按照添加的順序堆疊在一起。最后添加的子部件位于最上面。

2. 定位子部件：通過(guò) Positioned 小部件，您可以精確控制子部件在 Stack 中的位置。通過(guò)設(shè)置 left、top、right 和 bottom 屬性，您可以指定子部件的左上角和右下角在 Stack 中的位置。

3. 溢出處理：當(dāng)子部件的大小超出 Stack 的邊界時(shí)，您可以使用 overflow 屬性來(lái)指定如何處理溢出內(nèi)容。常見(jiàn)的選項(xiàng)包括 Overflow.clip（剪切超出邊界的部分）和 Overflow.visible（允許子部件超出邊界）。

4. Alignment：您可以使用 alignment 屬性來(lái)控制 Stack 中所有子部件的對(duì)齊方式。這會(huì)影響所有子部件的位置，除非子部件自身使用 Positioned 進(jìn)行了具體定位。

示例：

Stack(alignment: Alignment.center, // 子部件的默認(rèn)對(duì)齊方式children: <Widget>[Container(width: 200,height: 200,color: Colors.blue,),Positioned(left: 50,top: 50,child: Container(width: 100,height: 100,color: Colors.red,),),Positioned(right: 50,bottom: 50,child: Container(width: 100,height: 100,color: Colors.green,),),],
)

Align

Align 是一個(gè)用于將單個(gè)子部件（Widget）相對(duì)于父部件進(jìn)行對(duì)齊的小部件。Align 允許您精確控制子部件在父部件內(nèi)的位置，并指定子部件在水平和垂直方向上的對(duì)齊方式。

Align 小部件的主要屬性包括：

1. alignment：alignment 屬性是 Alignment 類型的，用于指定子部件在父部件中的對(duì)齊方式。Alignment 使用 Alignment.x 和 Alignment.y 的值來(lái)表示水平和垂直方向上的對(duì)齊，它的取值范圍是從 -1.0 到 1.0，其中 -1.0 表示左側(cè)或頂部，1.0 表示右側(cè)或底部，0.0 表示居中。

2. child：child 屬性用于指定要對(duì)齊的子部件。這是一個(gè)單一的小部件，通常是一個(gè)容器或其他UI元素。

示例：

Align(alignment: Alignment.center, // 將子部件居中對(duì)齊child: Container(width: 100,height: 100,color: Colors.blue,child: Text('Centered', style: TextStyle(color: Colors.white)),),
)

---

三.對(duì)齊 widgets

mainAxisAlignment和crossAxisAlignment是用于定位和對(duì)齊子部件的屬性，它們通常用于Flex、Row和Column等布局小部件中。

mainAxisAlignment的值可以是以下之一：

• MainAxisAlignment.start：將子部件沿主軸的起始位置對(duì)齊。
• MainAxisAlignment.end：將子部件沿主軸的結(jié)束位置對(duì)齊。
• MainAxisAlignment.center：將子部件沿主軸的中心位置對(duì)齊。
• MainAxisAlignment.spaceBetween：將子部件均勻地分布在主軸上，使它們之間的間距相等，第一個(gè)子部件放置在起始位置，最后一個(gè)子部件放置在結(jié)束位置。
• MainAxisAlignment.spaceAround：將子部件均勻地分布在主軸上，使它們之間和兩端的間距相等。
• MainAxisAlignment.spaceEvenly：將子部件均勻地分布在主軸上，使它們之間的間距和兩端的間距相等。

mainAxisAlignment使用示例：

Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Container(color: Colors.red, width: 50, height: 50),Container(color: Colors.green, width: 50, height: 50),Container(color: Colors.blue, width: 50, height: 50),],
)

crossAxisAlignment的值可以是以下之一：

• CrossAxisAlignment.start：將子部件沿副軸的起始位置對(duì)齊。
• CrossAxisAlignment.end：將子部件沿副軸的結(jié)束位置對(duì)齊。
• CrossAxisAlignment.center：將子部件沿副軸的中心位置對(duì)齊。
• CrossAxisAlignment.stretch：將子部件沿副軸拉伸以填充可用空間。
• CrossAxisAlignment.baseline：將子部件的基線與副軸上的基準(zhǔn)線對(duì)齊，需要在子部件上設(shè)置基線對(duì)齊方式（如TextBaseline）。

crossAxisAlignment使用示例：

Column(crossAxisAlignment: CrossAxisAlignment.center,children: [Container(color: Colors.red, width: 50, height: 50),Container(color: Colors.green, width: 50, height: 50),Container(color: Colors.blue, width: 50, height: 50),],
)

---

四.調(diào)整widgets大小

Expanded widget
用于在父部件的剩余可用空間中擴(kuò)展一個(gè)子部件。它通常與Flex、Column或Row等靈活的布局小部件一起使用，以便在父部件中使用彈性盒子模型進(jìn)行布局。

當(dāng)Expanded小部件包裝在一個(gè)子部件周圍時(shí)，它會(huì)將該子部件填充并擴(kuò)展到可用空間的剩余部分，以沿著主軸方向占據(jù)所有剩余的空間。這使得子部件能夠靈活地從父部件中分配和占據(jù)可用空間，而不受其自身固定大小的限制。

使用示例

Row(children: [Container(color: Colors.red, width: 50, height: 50),Expanded(child: Container(color: Colors.green),),Container(color: Colors.blue, width: 50, height: 50),],
)

Flex
Flex用于創(chuàng)建靈活的布局，可以根據(jù)可用空間的大小動(dòng)態(tài)調(diào)整子部件的大小?？梢詫?Flex 小部件作為Expanded的子部件，并通過(guò)指定flex屬性來(lái)控制子部件在可用空間中的分配比例。
可以簡(jiǎn)單理解為L(zhǎng)inearLayout中的權(quán)重

使用示例

Row(children: [Container(color: Colors.red, width: 50, height: 50),Expanded(flex: 2,child: Container(color: Colors.green),),Expanded(flex: 1,child: Container(color: Colors.blue),),],
)

當(dāng)一個(gè)Expanded組件包含在一個(gè)垂直方向（或水平方向）的Flex容器（如Column或Row）中時(shí)，該Expanded組件會(huì)將其子組件填充到相應(yīng)方向上的所有可用空間。如果有多個(gè)垂直方向的Expanded組件，則它們會(huì)按照它們的flex屬性（默認(rèn)為1）來(lái)分配可用空間。

換句話說(shuō)，Expanded組件在默認(rèn)情況下會(huì)盡可能地?cái)U(kuò)展，以填充Flex容器中剩余的可用空間，但具體的高度取決于Flex容器的大小和其他子組件的約束條件

五.通用布局 widgets

標(biāo)準(zhǔn) widgets

• Container：向 widget 增加 padding、margins、borders、background color 或者其他的“裝飾”。

• GridView：將 widget 展示為一個(gè)可滾動(dòng)的網(wǎng)格。

• ListView：將 widget 展示為一個(gè)可滾動(dòng)的列表。

• Stack：將 widget 覆蓋在另一個(gè)的上面。

Material widgets

• Card：將相關(guān)信息整理到一個(gè)有圓角和陰影的盒子中。

• ListTile：將最多三行的文本、可選的導(dǎo)語(yǔ)以及后面的圖標(biāo)組織在一行中。

---

六.輸入表單

TextField (文本框)

用于接收用戶輸入文本的小部件，它提供了一個(gè)可編輯的文本框，用戶可以在其中輸入、編輯和選擇文本。

常用的屬性及其作用：

1. controller: 一個(gè) TextEditingController 對(duì)象，用于控制文本輸入框的值，獲取輸入的內(nèi)容或設(shè)置初始值。
2. focusNode: 一個(gè) FocusNode 對(duì)象，用于管理輸入框的焦點(diǎn)。
3. decoration: InputDecoration 類型的對(duì)象，用于定義輸入框的外觀，包括標(biāo)簽文本、提示文本、邊框樣式等。
4. keyboardType: TextInputType 枚舉類型，指定鍵盤的類型，以匹配輸入的預(yù)期內(nèi)容，如文本、數(shù)字、URL、電子郵件等。
5. textInputAction: TextInputAction 枚舉類型，定義了與輸入框關(guān)聯(lián)的操作按鈕的行為，如完成、下一步、搜索等。
6. onChanged: 輸入內(nèi)容變化時(shí)的回調(diào)函數(shù)，接受最新的輸入值作為參數(shù)，通常用于實(shí)時(shí)校驗(yàn)或更新?tīng)顟B(tài)。
7. onSubmitted: 用戶提交輸入后的回調(diào)函數(shù)，接受最終的輸入值作為參數(shù)。
8. obscureText: bool 值，用于指定是否要隱藏輸入內(nèi)容，常用于密碼輸入框。
9. maxLines: int 值，用于指定輸入框的最大行數(shù)。
10. maxLength: int 值，用于指定最大輸入長(zhǎng)度。
11. enabled: bool 值，用于指定輸入框是否可編輯。
12. autofocus: bool 值，用于指定是否自動(dòng)獲取焦點(diǎn)。
13. textAlign: TextAlign 枚舉類型，指定文本內(nèi)容的對(duì)齊方式，如左對(duì)齊、右對(duì)齊、居中等。
14. cursorColor: Color 對(duì)象，指定光標(biāo)的顏色。
15. cursorWidth: double 值，用于指定光標(biāo)的寬度。

使用示例：

import 'package:flutter/material.dart';class MyTextField extends StatefulWidget {@override_MyTextFieldState createState() => _MyTextFieldState();
}class _MyTextFieldState extends State<MyTextField> {TextEditingController _controller = TextEditingController();FocusNode _focusNode = FocusNode();@overridevoid dispose() {_controller.dispose();_focusNode.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return TextField(controller: _controller,focusNode: _focusNode,decoration: InputDecoration(labelText: 'Enter your name',hintText: 'John Doe',prefixIcon: Icon(Icons.person),suffixIcon: IconButton(icon: Icon(Icons.clear),onPressed: () {_controller.clear();},),border: OutlineInputBorder(),),keyboardType: TextInputType.text,textInputAction: TextInputAction.done,onChanged: (value) {print('Input: $value');},onSubmitted: (value) {print('Submitted: $value');_focusNode.unfocus();},);}
}

關(guān)于TextEditingController和FocusNode的介紹：

TextEditingController
TextEditingController是一個(gè)控制文本輸入的類，它提供了一些方法和屬性來(lái)獲取和修改TextField中輸入的文本。主要作用包括：

• 可以獲取TextField中的文本內(nèi)容：使用text屬性可以獲取TextField中當(dāng)前的文本內(nèi)容。
• 可以設(shè)置TextField的初始值或修改文本內(nèi)容：使用text屬性可以設(shè)置TextField的初始值，也可以通過(guò)textEditingController.text = newText來(lái)修改文本內(nèi)容。
• 可以監(jiān)聽(tīng)文本變化：可以通過(guò)注冊(cè)addListener()方法來(lái)監(jiān)聽(tīng)TextField中的文本變化，以便執(zhí)行特定的操作。

FocusNode
FocusNode是用于處理TextField焦點(diǎn)的類，它允許管理應(yīng)用程序中的焦點(diǎn)，并監(jiān)聽(tīng)焦點(diǎn)變化事件。主要作用包括：

• 管理TextField的焦點(diǎn)：通過(guò)將TextField的focusNode屬性設(shè)置為FocusNode對(duì)象，可以管理TextField的焦點(diǎn)。例如，可以使用focusNode.requestFocus()請(qǐng)求焦點(diǎn)，并使用focusNode.unfocus()取消焦點(diǎn)。
• 監(jiān)聽(tīng)焦點(diǎn)變化：可以通過(guò)注冊(cè)addListener()方法來(lái)監(jiān)聽(tīng)焦點(diǎn)的變化，以便在焦點(diǎn)狀態(tài)發(fā)生變化時(shí)執(zhí)行特定的操作，比如顯示或隱藏鍵盤。
• 控制鍵盤行為：通過(guò)設(shè)置keyboardType和textInputAction屬性，可以控制鍵盤的類型（例如純文本、數(shù)字等）和鍵盤完成按鈕的樣式（例如完成、下一個(gè)等）。

TextFormField (表單文本框)

TextFormField 是一個(gè)帶有表單功能的文本輸入字段小部件。它是基于 TextField 的封裝，并提供了一些額外的功能，如表單驗(yàn)證和錯(cuò)誤處理。

常用屬性及其作用：

1. controller: 一個(gè) TextEditingController 對(duì)象，用于控制文本輸入框的值，獲取輸入的內(nèi)容或設(shè)置初始值。

2. focusNode: 一個(gè) FocusNode 對(duì)象，用于管理輸入框的焦點(diǎn)。

3. decoration: InputDecoration 類型的對(duì)象，用于定義輸入框的外觀，包括標(biāo)簽文本、提示文本、邊框樣式等。

4. keyboardType: TextInputType 枚舉類型，指定鍵盤的類型，以匹配輸入的預(yù)期內(nèi)容，如文本、數(shù)字、URL、電子郵件等。

5. textInputAction: TextInputAction 枚舉類型，定義了與輸入框關(guān)聯(lián)的操作按鈕的行為，如完成、下一步、搜索等。

6. validator: 一個(gè)函數(shù)，接受輸入的字符串，根據(jù)需求返回一個(gè)錯(cuò)誤提示字符串，用于對(duì)輸入內(nèi)容進(jìn)行驗(yàn)證。

7. onChanged: 輸入內(nèi)容變化時(shí)的回調(diào)函數(shù)，接受最新的輸入值作為參數(shù)，通常用于實(shí)時(shí)校驗(yàn)或更新?tīng)顟B(tài)。

8. onFieldSubmitted: 用戶提交輸入后的回調(diào)函數(shù)，接受最終的輸入值作為參數(shù)。

使用示例：

import 'package:flutter/material.dart';class MyForm extends StatefulWidget {@override_MyFormState createState() => _MyFormState();
}class _MyFormState extends State<MyForm> {final _formKey = GlobalKey<FormState>();TextEditingController _nameController = TextEditingController();@overrideWidget build(BuildContext context) {return Form(key: _formKey,child: TextFormField(controller: _nameController,decoration: InputDecoration(labelText: 'Name',hintText: 'Enter your name',),validator: (value) {if (value.isEmpty) {return 'Please enter your name';}return null;},onFieldSubmitted: (value) {if (_formKey.currentState.validate()) {// 執(zhí)行提交操作}},),);}
}

---

七.關(guān)鍵詞

part

用于將多個(gè)Dart文件組織在一起，以便更好地管理和維護(hù)代碼。

part 指令是Dart語(yǔ)言的一部分，它允許你將一個(gè)Dart文件分成多個(gè)部分，并將它們組合在一起以形成一個(gè)完整的庫(kù)。這對(duì)于將大型代碼庫(kù)分解為更小的可管理部分非常有用。

part ‘WeiBoCommentList.g.dart’; 表示當(dāng)前的Dart文件是一個(gè)庫(kù)的一部分，并且需要引入另一個(gè)名為 WeiBoCommentList.g.dart 的Dart文件，以共享一些代碼或聲明。

通常，part 指令在使用代碼生成工具時(shí)非常有用，例如json_serializable或moor_generator。這些工具可以根據(jù)模型類自動(dòng)生成代碼，而將生成的代碼放在單獨(dú)的文件中，然后使用 part 指令將其引入到主要的模型文件中。

例如，假設(shè) WeiBoCommentList.g.dart 包含自動(dòng)生成的序列化或數(shù)據(jù)庫(kù)訪問(wèn)代碼，而 WeiBoCommentList.dart 包含模型類的定義。通過(guò)使用 part 指令，你可以將自動(dòng)生成的代碼與手動(dòng)編寫(xiě)的代碼分離開(kāi)來(lái)，以便更輕松地維護(hù)和管理項(xiàng)目。

Completer

Completer 是一個(gè)用于處理異步操作的類，它允許你手動(dòng)控制異步操作的完成和結(jié)果返回。Completer 的主要作用是創(chuàng)建一個(gè) Future 對(duì)象，并允許你在某個(gè)后續(xù)時(shí)刻手動(dòng)完成這個(gè) Future，從而傳遞一個(gè)值或錯(cuò)誤。

以下是 Completer 的主要作用：

1. 手動(dòng)完成 Future：使用 Completer，你可以創(chuàng)建一個(gè)未來(lái)的實(shí)例，并在需要的時(shí)候手動(dòng)完成它。這對(duì)于異步操作，如網(wǎng)絡(luò)請(qǐng)求、文件讀寫(xiě)等，非常有用，因?yàn)槟憧梢栽诓僮魍瓿珊笸ㄟ^(guò) Completer 將結(jié)果傳遞給等待的代碼。

2. 處理異步操作的結(jié)果：當(dāng)你使用異步操作時(shí)，通常需要等待操作完成并獲取結(jié)果。通過(guò) Completer 創(chuàng)建的 Future，你可以使用 await 關(guān)鍵字或 .then() 方法等方式來(lái)等待操作完成，并獲取其結(jié)果。

示例：

import 'dart:async';Future<void> fetchData() async {Completer<void> completer = Completer<void>();// 模擬一個(gè)異步操作，等待2秒鐘后完成Future.delayed(Duration(seconds: 2), () {completer.complete(); // 手動(dòng)完成Future});await completer.future; // 等待Future完成print('Data fetched successfully');
}void main() {fetchData();print('Fetching data...'); // 這一行會(huì)在異步操作完成前執(zhí)行
}

StreamSubscription

StreamSubscription 是使用 Dart 中的流（Stream）的一種方式。流是一系列異步事件的序列，可以用于接收和處理來(lái)自異步操作（如網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)庫(kù)查詢等）的事件。

StreamSubscription 用于訂閱流，并可以跟蹤和取消訂閱。當(dāng)你訂閱一個(gè)流時(shí)，你可以指定一個(gè)回調(diào)函數(shù)來(lái)處理流中發(fā)出的事件?；卣{(diào)函數(shù)會(huì)在每個(gè)事件到達(dá)時(shí)被調(diào)用，而不是等待整個(gè)流完成。

訂閱流

要訂閱流，首先需要獲取一個(gè)流對(duì)象。在Flutter中，很多類（如StreamController、StreamTransformer等）都提供了流的實(shí)例化和管理。一旦獲取到流對(duì)象，你可以使用stream.listen()方法訂閱流，并提供一個(gè)回調(diào)函數(shù)來(lái)處理流中的事件。

Stream<int> countStream() async* {for (int i = 1; i <= 5; i++) {await Future.delayed(Duration(seconds: 1));yield i;}
}void main() {final stream = countStream();final subscription = stream.listen((data) {print('Received: $data');});// 取消訂閱subscription.cancel();
}

上面的示例中，創(chuàng)建了一個(gè)簡(jiǎn)單的計(jì)數(shù)流countStream()，它每隔一秒產(chǎn)生一個(gè)整數(shù)。我們通過(guò)stream.listen()方法訂閱了這個(gè)流，并提供了一個(gè)回調(diào)函數(shù)來(lái)處理每個(gè)事件。

取消訂閱

當(dāng)不再需要訂閱流時(shí)，應(yīng)該顯式地取消訂閱，以釋放資源和停止事件的處理?？梢哉{(diào)用StreamSubscription對(duì)象的cancel()方法來(lái)取消訂閱。

final subscription = stream.listen((data) {print('Received: $data');
});// 取消訂閱
subscription.cancel();

在上面的示例中，保存了StreamSubscription對(duì)象到subscription變量中，并在不再需要時(shí)調(diào)用了cancel()方法來(lái)取消訂閱。

使用StreamSubscription的其他方法和屬性

StreamSubscription提供了一些其他有用的方法和屬性，用于管理訂閱和檢查流的狀態(tài)，例如：

• pause()和resume()：暫停和恢復(fù)訂閱，以便控制事件的處理。
• onData()：設(shè)置一個(gè)新的事件回調(diào)函數(shù)，替換原來(lái)的回調(diào)函數(shù)。
• onError()：設(shè)置一個(gè)錯(cuò)誤回調(diào)函數(shù)，用于處理流中的錯(cuò)誤事件。
• onDone()：設(shè)置一個(gè)完成回調(diào)函數(shù)，用于處理流結(jié)束時(shí)的事件。
• isPaused：一個(gè)布爾值，表示當(dāng)前訂閱是否已暫停。

mixin

Mixin是一種強(qiáng)大的代碼重用機(jī)制，它允許你將一個(gè)類的成員添加到另一個(gè)類中，而無(wú)需繼承該類。Mixin提供了一種方式來(lái)在類之間共享代碼，同時(shí)保持類之間的分離性。

1. 基本語(yǔ)法

class MyClass with MyMixin {// 類的成員和方法
}mixin MyMixin {// Mixin中的成員和方法
}

在上面的代碼中，MyClass類通過(guò)with MyMixin語(yǔ)法引入了MyMixin的功能。

2. Mixin的特點(diǎn)

• Mixin類本身不能被實(shí)例化，它們只能被用作其他類的組成部分。
• 類可以使用多個(gè)Mixin，通過(guò)逗號(hào)分隔，這允許多個(gè)類的功能被組合到一個(gè)類中。
• Mixin可以有自己的屬性和方法，這些屬性和方法可以被包含Mixin的類訪問(wèn)和使用。
• 如果多個(gè)Mixin中有同名的方法或?qū)傩?#xff0c;那么包含Mixin的類必須通過(guò)顯式指定使用哪個(gè)Mixin的方式來(lái)解決沖突。
• Mixin的順序很重要，因?yàn)榉椒_突時(shí)會(huì)按照Mixin的順序來(lái)解析。

3. Mixin的應(yīng)用場(chǎng)景

3.1. 接口實(shí)現(xiàn)

Mixin可以用于實(shí)現(xiàn)接口，允許一個(gè)類同時(shí)具有多個(gè)接口的功能。

class MyWidget with WidgetMixin, ClickableMixin {// ...
}

3.2. 功能復(fù)用

Mixin可以用于將通用功能添加到多個(gè)類中，避免重復(fù)編寫(xiě)相似的代碼。

mixin LoggerMixin {void log(String message) {print(message);}
}class MyClass with LoggerMixin {// ...
}

3.3. 數(shù)據(jù)序列化與反序列化

Mixin可以用于為多個(gè)數(shù)據(jù)模型類添加數(shù)據(jù)序列化和反序列化的功能。

mixin JsonSerializable {Map<String, dynamic> toJson();void fromJson(Map<String, dynamic> json);
}class Person with JsonSerializable {// ...
}

3.4. 路由導(dǎo)航

在Flutter中，Mixin經(jīng)常用于處理路由導(dǎo)航，以減少頁(yè)面之間的代碼冗余。

3.5. 狀態(tài)管理

在Flutter中，StatefulWidget常常使用Mixin來(lái)添加狀態(tài)管理的功能。

with

with關(guān)鍵字用于在類定義中混入（mixin）一個(gè)或多個(gè) mixin 類。Mixin 是一種在 Dart 中實(shí)現(xiàn)代碼重用的機(jī)制，它允許你將一個(gè)或多個(gè) mixin 類的特性添加到一個(gè)類中，而無(wú)需繼承這些 mixin 類。

使用方式：

class MyClass with Mixin1, Mixin2, ... {// 類的成員和方法
}

關(guān)于 with 關(guān)鍵字的詳細(xì)介紹：

1. 混入Mixin的類：with 后面可以跟一個(gè)或多個(gè) mixin 類，用逗號(hào)分隔。這意味著你可以從多個(gè) mixin 類中繼承特性，將它們組合到一個(gè)類中，從而實(shí)現(xiàn)多重繼承的效果。

2. Mixin的順序：Mixin 的順序很重要，因?yàn)槿绻鄠€(gè) mixin 類中具有相同名稱的屬性或方法，類中將使用最后一個(gè) mixin 中定義的屬性或方法。這個(gè)規(guī)則確保了 mixin 類的順序?qū)︻惖男袨楫a(chǎn)生影響。

3. Mixin的特性：通過(guò)使用 with 關(guān)鍵字，類將繼承 mixin 類的屬性、方法和功能，這些特性會(huì)被添加到類中。這允許你在不繼承 mixin 類的情況下，使用 mixin 類的功能。

4. Mixin的用途：with 關(guān)鍵字通常用于以下情況：

• 實(shí)現(xiàn)接口：通過(guò)混入一個(gè) mixin 類，類可以實(shí)現(xiàn)多個(gè)接口的功能。
• 代碼復(fù)用：可以將通用功能添加到多個(gè)類中，以減少代碼重復(fù)性。
• 實(shí)現(xiàn)混合功能：在不使用多重繼承的情況下，將多個(gè) mixin 類的功能組合在一個(gè)類中。

dynamic和Object

1、Object 是dart所有對(duì)象的根基類，也就是說(shuō)所有類型都是Object的子類，所以任何類型的數(shù)據(jù)都可以賦值給Object聲明的對(duì)象.
2、dynamic與var一樣都是關(guān)鍵詞,聲明的變量可以賦值任意對(duì)象. 而dynamic與Object相同之處在于,他們聲明的變量可以在后期改變賦值類型.

typedef

用于創(chuàng)建自定義類型別名（type alias）。類型別名允許你為現(xiàn)有的數(shù)據(jù)類型或函數(shù)簽名定義一個(gè)新的名稱，以便在代碼中更清晰地表達(dá)類型或函數(shù)簽名的含義

以下是關(guān)于typedef關(guān)鍵字的詳細(xì)介紹：

1. 為數(shù)據(jù)類型創(chuàng)建類型別名：

typedef IntList = List<int>;
typedef StringMap = Map<String, String>;

2. 為函數(shù)簽名創(chuàng)建類型別名：
   對(duì)于回調(diào)函數(shù)或函數(shù)參數(shù)特別有用

typedef VoidCallback = void Function();
typedef BinaryOperation = int Function(int, int);

3. 與高階函數(shù)一起使用：

typedef FilterFunction<T> = bool Function(T);List<T> filterList<T>(List<T> list, FilterFunction<T> filter) {return list.where(filter).toList();
}

get

get關(guān)鍵字用于創(chuàng)建一個(gè)Getter方法，它允許你訪問(wèn)對(duì)象的屬性或計(jì)算屬性的值，就像訪問(wèn)類的實(shí)例變量一樣。Getter方法通常用于獲取對(duì)象的某個(gè)屬性值，而不是直接訪問(wèn)實(shí)例變量，以提供更多的封裝和控制。

1.創(chuàng)建Getter方法：通過(guò)在類中定義一個(gè)以get關(guān)鍵字開(kāi)頭的方法，你可以創(chuàng)建一個(gè)Getter方法，該方法用于獲取某個(gè)屬性的值。Getter方法的語(yǔ)法如下：

Type get propertyName {// 在這里計(jì)算和返回屬性的值
}

其中，Type是屬性的數(shù)據(jù)類型，propertyName是你希望暴露的屬性名稱。

2.延遲加載屬性：Getter方法可以用于延遲加載屬性的值。這意味著屬性的值只有在首次訪問(wèn)Getter方法時(shí)才會(huì)計(jì)算，而不是在對(duì)象創(chuàng)建時(shí)。這對(duì)于節(jié)省資源和提高性能很有用。

class LazyLoader {List<int> _data = [1, 2, 3, 4];int get sum {// 計(jì)算并返回列表元素的總和return _data.reduce((a, b) => a + b);}
}

3.屬性訪問(wèn)控制：使用Getter方法可以對(duì)屬性的訪問(wèn)進(jìn)行控制，例如，你可以在Getter方法中添加條件來(lái)檢查屬性的有效性，然后返回相應(yīng)的值。

class Temperature {double _celsius;Temperature(this._celsius);double get celsius {if (_celsius < -273.15) {throw ArgumentError("Temperature cannot be below absolute zero.");}return _celsius;}
}

4.在子類中覆蓋：Getter方法可以在子類中被覆蓋，允許你根據(jù)需要自定義子類的屬性訪問(wèn)行為。

class Parent {int get value => 42;
}class Child extends Parent {@overrideint get value => super.value * 2; // 在子類中覆蓋Getter方法
}

---

未完待續(xù)…