Flutter - 小部件簡介

正如我們在前面章節中學到的，小部件是 Flutter 框架中的所有內容。我們已經在前面的章節中學習瞭如何在 Flutter 中建立新的小部件。

在本節中，讓我們瞭解建立小部件背後的實際概念以及 Flutter 框架中可用的不同型別的小部件。

讓我們檢查一下 Hello World 應用程式的 MyHomePage 小部件。用於此目的的程式碼如下所示：

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   
   final String title; 
   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar(title: Text(this.title), ), 
         body: Center(child: Text( 'Hello World',)),
      );
   }
}

在這裡，我們透過擴充套件 StatelessWidget 建立了一個新的小部件。

請注意，StatelessWidget 僅需要在其派生類中實現一個 build 方法。build 方法獲取構建小部件所需的上下文環境，透過 BuildContext 引數，並返回它構建的小部件。

在程式碼中，我們使用了 title 作為建構函式引數之一，還使用了 Key 作為另一個引數。title 用於顯示標題，Key 用於在構建環境中識別小部件。

在這裡，build 方法呼叫 Scaffold 的 build 方法，後者又呼叫 AppBar 和 Center 的 build 方法來構建其使用者介面。

最後，Center 的 build 方法呼叫 Text 的 build 方法。

為了更好地理解，下面給出了相同的視覺表示：

小部件構建視覺化

在 Flutter 中，可以根據小部件的功能將其分為多個類別，如下所示：

平臺特定小部件
佈局小部件
狀態維護小部件
平臺無關/基本小部件

現在讓我們詳細討論一下每個小部件。

平臺特定小部件

Flutter 擁有特定於特定平臺（Android 或 iOS）的小部件。

Android 特定小部件是根據 Android 作業系統的 Material Design 指南 設計的。Android 特定小部件稱為 Material 小部件。

iOS 特定小部件是根據 Apple 的 Human Interface Guidelines 設計的，它們被稱為 Cupertino 小部件。

一些最常用的 Material 小部件如下：

Scaffold
AppBar
BottomNavigationBar
TabBar
TabBarView
ListTile
RaisedButton
FloatingActionButton
FlatButton
IconButton
DropdownButton
PopupMenuButton
ButtonBar
TextField
Checkbox
Radio
Switch
Slider
日期和時間選擇器
SimpleDialog
AlertDialog

一些最常用的 Cupertino 小部件如下：

CupertinoButton
CupertinoPicker
CupertinoDatePicker
CupertinoTimerPicker
CupertinoNavigationBar
CupertinoTabBar
CupertinoTabScaffold
CupertinoTabView
CupertinoTextField
CupertinoDialog
CupertinoDialogAction
CupertinoFullscreenDialogTransition
CupertinoPageScaffold
CupertinoPageTransition
CupertinoActionSheet
CupertinoActivityIndicator
CupertinoAlertDialog
CupertinoPopupSurface
CupertinoSlider

佈局小部件

在 Flutter 中，可以透過組合一個或多個小部件來建立小部件。為了將多個小部件組合成一個，Flutter 提供了大量具有佈局功能的小部件。例如，可以使用 Center 小部件將子小部件居中。

一些流行的佈局小部件如下：

Container - 使用 BoxDecoration 小部件（帶有背景、邊框和陰影）裝飾的矩形框。
Center - 將其子小部件居中。
Row - 水平排列其子元素。
Column - 垂直排列其子元素。
Stack - 一個疊加在另一個之上。

我們將在即將推出的 佈局小部件簡介 章節中詳細檢查佈局小部件。

狀態維護小部件

在 Flutter 中，所有小部件都派生自 StatelessWidget 或 StatefulWidget。

派生自 StatelessWidget 的小部件沒有任何狀態資訊，但它可能包含派生自 StatefulWidget 的小部件。應用程式的動態特性是透過小部件的互動行為實現的，狀態在互動過程中發生變化。例如，點選計數器按鈕會將計數器的內部狀態增加/減少 1，並且 Flutter 小部件的反應特性將使用新的狀態資訊自動重新渲染小部件。

我們將在即將推出的 狀態管理章節 中詳細學習 StatefulWidget 小部件的概念。

平臺無關/基本小部件

Flutter 提供了大量基本小部件，以平臺無關的方式建立簡單和複雜的使用者介面。讓我們在本節中瞭解一些基本小部件。

Text

Text 小部件用於顯示一段字串。可以使用 style 屬性和 TextStyle 類設定字串的樣式。用於此目的的示例程式碼如下：

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold))

Text 小部件有一個特殊的建構函式 Text.rich，它接受型別為 TextSpan 的子元素以指定具有不同樣式的字串。TextSpan 小部件本質上是遞迴的，它接受 TextSpan 作為其子元素。用於此目的的示例程式碼如下：

Text.rich( 
   TextSpan( 
      children: <TextSpan>[ 
         TextSpan(text: "Hello ", style:  
         TextStyle(fontStyle: FontStyle.italic)),  
         TextSpan(text: "World", style: 
         TextStyle(fontWeight: FontWeight.bold)),  
      ], 
   ), 
)

Text 小部件最重要的屬性如下：

maxLines, int - 要顯示的最大行數
overflow, TextOverFlow - 使用 TextOverFlow 類指定如何處理視覺溢位
style, TextStyle - 使用 TextStyle 類指定字串的樣式
textAlign, TextAlign - 使用 TextAlign 類指定文字的對齊方式，例如右對齊、左對齊、兩端對齊等。
textDirection, TextDirection - 文字流的方向，從左到右或從右到左

Image

Image 小部件用於在應用程式中顯示影像。Image 小部件提供不同的建構函式來從多個來源載入影像，它們如下：

Image - 使用 ImageProvider 的通用影像載入器
Image.asset - 從 Flutter 專案的資源載入影像
Image.file - 從系統資料夾載入影像
Image.memory - 從記憶體載入影像
Image.Network - 從網路載入影像

在 Flutter 中載入和顯示影像的最簡單方法是將影像作為應用程式的資源，並在需要時將其載入到小部件中。

在專案資料夾中建立一個名為 assets 的資料夾，並將必要的影像放在其中。
在 pubspec.yaml 中指定資源，如下所示：

flutter: 
   assets: 
      - assets/smiley.png

現在，在應用程式中載入並顯示影像。

Image.asset('assets/smiley.png')

MyHomePage 小部件（hello world 應用程式）的完整原始碼和結果如下所示。

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar( title: Text(this.title), ), 
         body: Center( child: Image.asset("assets/smiley.png")),
      ); 
   }
}

載入的影像如下所示：

Image 小部件最重要的屬性如下：

image, ImageProvider - 要載入的實際影像
width, double - 影像的寬度
height, double - 影像的高度
alignment, AlignmentGeometry - 如何在其邊界內對齊影像

Icon

Icon 小部件用於顯示 IconData 類中描述的字型中的字形。載入簡單電子郵件圖示的程式碼如下：

Icon(Icons.email)

在 hello world 應用程式中應用它的完整原始碼如下：

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center( child: Icon(Icons.email)),
      );
   }
}

載入的圖示如下所示：

列印頁面