做(zuò)自(zì)由與創造的先行(xíng)者

Flutter Widget目錄

Flutter開(kāi)發手冊

使用Flutter的一(yī)套的視(shì)覺、結構、平台、和(hé)交互式的widgets,快(kuài)速創建漂亮的APP.

除了(le)按類别浏覽widget外(wài),您還可(kě)以在Flutter widget 索引浏覽Flutter中的所有widgets。

基礎 Widgets

Container:一(yī)個擁有繪制、定位、調整大小的 widget

Row:在水平方向上(shàng)排列子widget的列表

Column:在垂直方向上(shàng)排列子widget的列表

Image:一(yī)個顯示圖片的widget

Text:單一(yī)格式的文本

Icon:A Material Design icon.

RaisedButton:Material Design中的button, 一(yī)個凸起的材質矩形按鈕

Scaffold:Material Design布局結構的基本實現。此類提供了(le)用于顯示drawer、snackbar和(hé)底部sheet的API

Appbar:一(yī)個Material Design應用程序欄,由工(gōng)具欄和(hé)其他(tā)可(kě)能(néng)的widget(如(rú)TabBar和(hé)FlexibleSpaceBar)組成

FlutterLogo:Flutter logo, 以widget形式. 這(zhè)個widget遵從(cóng)IconTheme。

Placeholder:一(yī)個繪制了(le)一(yī)個盒子的的widget,代表日後有widget将會被添加到該盒子中

Material Components Widgets

App結構和(hé)導航

Scaffold:Material Design布局結構的基本實現。此類提供了(le)用于顯示drawer、snackbar和(hé)底部sheet的API。

Appbar:一(yī)個Material Design應用程序欄,由工(gōng)具欄和(hé)其他(tā)可(kě)能(néng)的widget(如(rú)TabBar和(hé)FlexibleSpaceBar)組成。

ButtomNavigationBar:底部導航條,可(kě)以很(hěn)容易地(dì)在tap之間(jiān)切換和(hé)浏覽頂級視(shì)圖。

TabBar:一(yī)個顯示水平選項卡的Material Design widget。

TabBarView:顯示與當前選中的選項卡相對應的頁面視(shì)圖。通(tōng)常和(hé)TabBar一(yī)起使用。

MaterialApp:一(yī)個方便的widget,它封裝了(le)應用程序實現Material Design所需要(yào)的一(yī)些widget。

WidgetsApp:一(yī)個方便的類,它封裝了(le)應用程序通(tōng)常需要(yào)的一(yī)些widget。

Drawer:從(cóng)Scaffold邊緣水平滑動以顯示應用程序中導航鏈接的Material Design面闆

按鈕

RaisedButton:Material Design中的button, 一(yī)個凸起的材質矩形按鈕

FloatingActionButton:一(yī)個圓形圖标按鈕,它懸停在內(nèi)容之上(shàng),以展示應用程序中的主要(yào)動作(zuò)。FloatingActionButton通(tōng)常用于Scaffold.floatingActionButton字段。

FlatButton:一(yī)個扁平的Material按鈕

IconButton:一(yī)個Material圖标按鈕,點擊時(shí)會有水波動畫(huà)

PopupMenuButton:當菜單隐藏式,點擊或調用onSelected時(shí)顯示一(yī)個彈出式菜單列表

ButtonBar:水平排列的按鈕組

輸入框和(hé)選擇框

TextField:文本輸入框

Checkbox:複選框,允許用戶從(cóng)一(yī)組中選擇多個選項

Radio:單選框,允許用戶從(cóng)一(yī)組中選擇一(yī)個選項。

Switch:On/off 用于切換一(yī)個單一(yī)狀态

Slider:滑塊,允許用戶通(tōng)過滑動滑塊來從(cóng)一(yī)系列值中選擇。

Date & Time Pickers:日期&時(shí)間(jiān)選擇器

對話框、Alert、Panel

SimpleDialog:簡單對話框可(kě)以顯示附加的提示或操作(zuò)

AlertDialog:一(yī)個會中斷用戶操作(zuò)的對話款,需要(yào)用戶确認

BottomSheet:一(yī)個從(cóng)屏幕底部滑起的列表(以顯示更多的內(nèi)容)。你可(kě)以調用showBottomSheet()或showModalBottomSheet彈出

ExpansionPanel:Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.

SnackBar:具有可(kě)選操作(zuò)的輕量級消息提示,在屏幕的底部顯示。

信息展示

Image:一(yī)個顯示圖片的widget

Icon:A Material Design icon.

Chip:标簽,一(yī)個Material widget。 它可(kě)以将一(yī)個複雜(zá)內(nèi)容實體展現在一(yī)個小塊中,如(rú)聯系人(rén)。

Tooltip:一(yī)個文本提示工(gōng)具,幫助解釋一(yī)個按鈕或其他(tā)用戶界面,當widget長(cháng)時(shí)間(jiān)按下(xià)時(shí)(當用戶采取其他(tā)适當操作(zuò)時(shí))顯示一(yī)個提示标簽。‘

DataTable:數(shù)據表顯示原始數(shù)據集。它們通(tōng)常出現在桌面企業産品中。DataTable Widget實現這(zhè)個組件

Card:一(yī)個 Material Design 卡片。擁有一(yī)個圓角和(hé)陰影

LinearProgressIndicator:一(yī)個線性進度條,另外(wài)還有一(yī)個圓形進度條CircularProgressIndicator

布局

ListTile:一(yī)個固定高度的行(xíng),通(tōng)常包含一(yī)些文本,以及一(yī)個行(xíng)前或行(xíng)尾圖标

Stepper:一(yī)個Material Design 步驟指示器,顯示一(yī)系列步驟的過程

Divider:一(yī)個邏輯1像素厚的水平分割線,兩邊都(dōu)有填充

Cupertino(iOS風(fēng)格的widget)

CupertinoActivityIndicator:一(yī)個iOS風(fēng)格的loading指示器。顯示一(yī)個圓形的轉圈菊花

CupertinoAlertDialog:iOS風(fēng)格的alert dialog

CupertinoButton:iOS風(fēng)格的button

CupertinoDialog:iOS風(fēng)格的對話框

CupertinoDialogAction:通(tōng)常用于CupertinoAlertDialog的一(yī)個button

CupertinoSlider:從(cóng)一(yī)個範圍中選一(yī)個值

CupertinoSwitch:iOS風(fēng)格的開(kāi)關. 用于單一(yī)狀态的開(kāi)/關

CupertinoPageTransition:提供iOS風(fēng)格的頁面過度動畫(huà)

CupertinoFullscreenDialogTransition:一(yī)個iOS風(fēng)格的過渡,用于調用全屏對話框

CupertinoNavigationBar:iOS風(fēng)格的導航欄. 通(tōng)常和(hé)CupertinoPageScaffold一(yī)起使用

CupertinoTabBar:iOS風(fēng)格的底部選項卡。 通(tōng)常和(hé)CupertinoTabScaffold一(yī)起使用

CupertinoPageScaffold:一(yī)個iOS風(fēng)格的頁面的基本布局結構。包含內(nèi)容和(hé)導航欄

CupertinoTabScaffold:标簽式iOS應用程序的結構。将選項卡欄放在內(nèi)容選項卡之上(shàng)

CupertinoTabView:支持選項卡間(jiān)并行(xíng)導航項卡的根內(nèi)容。通(tōng)常與CupertinoTabScaffolde一(yī)起使用

Layout

擁有單個子元素的布局widget

Container:一(yī)個擁有繪制、定位、調整大小的 widget

Padding:一(yī)個widget, 會給其子widget添加指定的填充

Center:将其子widget居中顯示在自(zì)身內(nèi)部的widget

Align:一(yī)個widget,它可(kě)以将其子widget對齊,并可(kě)以根據子widget的大小自(zì)動調整大小

FittedBox:按自(zì)己的大小調整其子widget的大小和(hé)位置

AspectRatio:一(yī)個widget,試圖将子widget的大小指定為(wèi)某個特定的長(cháng)寬比

ConstrainedBox:對其子項施加附加約束的widget

Baseline:根據子項的基線對它們的位置進行(xíng)定位的widget

FractionallySizedBox:一(yī)個widget,它把它的子項放在可(kě)用空間(jiān)的一(yī)小部分。關于布局算法的更多細節,見(jiàn)RenderFractionallySizedOverflowBox

IntrinsicHeight:一(yī)個widget,它将它的子widget的高度調整其本身實際的高度

IntrinsicWidth:一(yī)個widget,它将它的子widget的寬度調整其本身實際的寬度

LimitedBox:一(yī)個當其自(zì)身不受約束時(shí)才限制其大小的盒子

Offstage:一(yī)個布局widget,可(kě)以控制其子widget的顯示和(hé)隐藏

OverflowBox:對其子項施加不同約束的widget,它可(kě)能(néng)允許子項溢出父級

SizedBox:一(yī)個特定大小的盒子。這(zhè)個widget強制它的孩子有一(yī)個特定的寬度和(hé)高度。如(rú)果寬度或高度為(wèi)NULL,則此widget将調整自(zì)身大小以匹配該維度中的孩子的大小

SizedOverflowBox:一(yī)個特定大小的widget,但(dàn)是會将它的原始約束傳遞給它的孩子,它可(kě)能(néng)會溢出

Transform:在繪制子widget之前應用轉換的widget

CustomSingleChildLayout:一(yī)個自(zì)定義的擁有單個子widget的布局widget

擁有多個子元素的布局widget

Row:在水平方向上(shàng)排列子widget的列表

Column:在垂直方向上(shàng)排列子widget的列表

Stack:可(kě)以允許其子widget簡單的堆疊在一(yī)起

IndexedStack:從(cóng)一(yī)個子widget列表中顯示單個孩子的Stack

Flow:一(yī)個實現流式布局算法的widget

Table:為(wèi)其子widget使用表格布局算法的widget

Wrap:可(kě)以在水平或垂直方向多行(xíng)顯示其子widget

ListBody:一(yī)個widget,它沿着一(yī)個給定的軸,順序排列它的子元素

ListView:可(kě)滾動的列表控件。ListView是最常用的滾動widget,它在滾動方向上(shàng)一(yī)個接一(yī)個地(dì)顯示它的孩子。在縱軸上(shàng),孩子們被要(yào)求填充ListView

CustomMultiChildLayout:使用一(yī)個委托來對多個孩子進行(xíng)設置大小和(hé)定位的小部件

Layout helpers

LayoutBuilder:構建一(yī)個可(kě)以依賴父窗口大小的widget樹(shù)

網站建設開(kāi)發|APP設計開(kāi)發|小程序建設開(kāi)發
下(xià)一(yī)篇:Flutter 構建布局
上(shàng)一(yī)篇:Flutter Widget框架概述