跳至主要內容

Material 元件 Widget

Flutter 提供多種視覺化、行為豐富且具動態效果的小工具 (widget),這些小工具實作了 Material 3 設計規範。Material 3 是 Flutter 的預設設計語言,讓您能夠設計和建構美觀、實用且能適應任何平台的應用程式。

若要查看這些小工具和其他小工具的實際運作情況,請查看 Material 3 示範 網頁應用程式。

動作

#
Rendered example of the Common buttons Material widget.
常用按鈕

可點擊的區塊,用於啟動動作,例如傳送電子郵件、分享文件或按讚留言。

Rendered example of the FloatingActionButton Material widget.
FloatingActionButton

包含圖示的可點擊區塊,可讓使用者隨時觸及重要的操作。

Rendered example of the Extended FloatingActionButton Material widget.
Extended FloatingActionButton

可觸發動作的可點擊區塊。這些較寬的區塊可以容納文字標籤,並提供較大的目標區域。

Rendered example of the IconButton Material widget.
IconButton

可點擊的圖示,用於提示應用程式使用者執行輔助操作。

Rendered example of the SegmentedButton Material widget.
SegmentedButton

單個或多個選定的可點擊區塊,可協助使用者選擇選項、切換視圖或排序元素。

通訊

#
Rendered example of the Badge Material widget.
Badge

類似圖示的區塊,可傳達動態內容,例如計數或狀態。它可以包含標籤或數字。

Rendered example of the LinearProgressIndicator Material widget.
LinearProgressIndicator

垂直線,隨著進行中的程序(例如載入應用程式或提交表單)完成而改變顏色。

Rendered example of the SnackBar Material widget.
SnackBar

關於應用程式流程的簡短訊息,顯示在螢幕底部。

包含

#
Rendered example of the AlertDialog Material widget.
AlertDialog

懸浮容器,提示應用程式使用者提供更多資料或做出決定。

Rendered example of the Bottom sheet Material widget.
底部表單 (Bottom sheet)

將輔助內容錨定在螢幕底部的容器。

Rendered example of the Card Material widget.
Card

用於簡短相關內容的容器,以圓角和陰影的方塊顯示。

Rendered example of the Divider Material widget.
Divider

用於在清單和容器中分組內容的細線。

Rendered example of the ListTile Material widget.
ListTile

單個固定高度的列,通常包含一些文字以及前導或後置圖示。

#
Rendered example of the AppBar Material widget.
AppBar

在螢幕頂部顯示內容和動作的容器。

Rendered example of the Bottom app bar Material widget.
底部應用程式列 (Bottom app bar)

在螢幕底部顯示導航和重要操作的容器。

Rendered example of the NavigationBar Material widget.
NavigationBar

持續存在的容器,用於在應用程式中的主要目的地之間切換。

Rendered example of the NavigationDrawer Material widget.
NavigationDrawer

從應用程式的前緣滑動以導航至應用程式其他部分的容器。

Rendered example of the Navigation rail Material widget.
導航軌 (Navigation rail)

平板電腦和桌面螢幕前緣上持續存在的容器,用於導航至應用程式的各個部分。

Rendered example of the TabBar Material widget.
TabBar

用於在不同螢幕、資料集和其他互動中組織內容的分層容器。

選取

#
Rendered example of the Checkbox Material widget.
Checkbox

表單控制項,應用程式使用者可以設定或清除以從一組選項中選擇一個或多個選項。

Rendered example of the Chip Material widget.
Chip

用於簡化資訊輸入、做出選擇、篩選內容或觸發操作的小區塊。

Rendered example of the DatePicker Material widget.
DatePicker

用於選擇日期或日期範圍的日曆介面。

Rendered example of the Menu Material widget.
Menu

在臨時介面上顯示選項清單的容器。

Rendered example of the Radio Material widget.
Radio

表單控制項,應用程式使用者可以設定或清除以從一組選項中僅選擇一個選項。

Rendered example of the Slider Material widget.
Slider

用於選擇值範圍的表單控制項。

Rendered example of the Switch Material widget.
Switch

用於將單個項目的狀態變更為開啟或關閉的切換控制項。

Rendered example of the TimePicker Material widget.
TimePicker

用於選擇和設定特定時間的時鐘介面。

文字輸入

#
Rendered example of the TextField Material widget.
TextField

應用程式使用者可以在其中輸入文字的方塊。它們出現在表單和對話方塊中。

Material 2 小工具目錄小工具目錄的其他類別中尋找更多小工具。