Flutter Widget目錄

2020-08-27 14:46 更新

使用Flutter的一套的視覺(jué)、結(jié)構(gòu)、平臺(tái)、和交互式的widgets,快速創(chuàng)建漂亮的APP.

除了按類別瀏覽widget外,您還可以在Flutter widget 索引瀏覽Flutter中的所有widgets。


基礎(chǔ) Widgets

  • Container:一個(gè)擁有繪制、定位、調(diào)整大小的 widget
  • Row:在水平方向上排列子widget的列表
  • Column:在垂直方向上排列子widget的列表
  • Image:一個(gè)顯示圖片的widget
  • Text:?jiǎn)我桓袷降奈谋?/li>
  • Icon:A Material Design icon.
  • RaisedButton:Material Design中的button, 一個(gè)凸起的材質(zhì)矩形按鈕
  • Scaffold:Material Design布局結(jié)構(gòu)的基本實(shí)現(xiàn)。此類提供了用于顯示drawer、snackbar和底部sheet的API
  • Appbar:一個(gè)Material Design應(yīng)用程序欄,由工具欄和其他可能的widget(如TabBar和FlexibleSpaceBar)組成
  • FlutterLogo:Flutter logo, 以widget形式. 這個(gè)widget遵從IconTheme。
  • Placeholder:一個(gè)繪制了一個(gè)盒子的的widget,代表日后有widget將會(huì)被添加到該盒子中


Material Components Widgets

App結(jié)構(gòu)和導(dǎo)航

  • Scaffold:Material Design布局結(jié)構(gòu)的基本實(shí)現(xiàn)。此類提供了用于顯示drawer、snackbar和底部sheet的API。
  • Appbar:一個(gè)Material Design應(yīng)用程序欄,由工具欄和其他可能的widget(如TabBar和FlexibleSpaceBar)組成。
  • ButtomNavigationBar:底部導(dǎo)航條,可以很容易地在tap之間切換和瀏覽頂級(jí)視圖。
  • TabBar:一個(gè)顯示水平選項(xiàng)卡的Material Design widget。
  • TabBarView:顯示與當(dāng)前選中的選項(xiàng)卡相對(duì)應(yīng)的頁(yè)面視圖。通常和TabBar一起使用。
  • MaterialApp:一個(gè)方便的widget,它封裝了應(yīng)用程序?qū)崿F(xiàn)Material Design所需要的一些widget。
  • WidgetsApp:一個(gè)方便的類,它封裝了應(yīng)用程序通常需要的一些widget。
  • Drawer:從Scaffold邊緣水平滑動(dòng)以顯示應(yīng)用程序中導(dǎo)航鏈接的Material Design面板

按鈕

  • RaisedButton:Material Design中的button, 一個(gè)凸起的材質(zhì)矩形按鈕
  • FloatingActionButton:一個(gè)圓形圖標(biāo)按鈕,它懸停在內(nèi)容之上,以展示應(yīng)用程序中的主要?jiǎng)幼?。FloatingActionButton通常用于Scaffold.floatingActionButton字段。
  • FlatButton:一個(gè)扁平的Material按鈕
  • IconButton:一個(gè)Material圖標(biāo)按鈕,點(diǎn)擊時(shí)會(huì)有水波動(dòng)畫
  • PopupMenuButton:當(dāng)菜單隱藏式,點(diǎn)擊或調(diào)用onSelected時(shí)顯示一個(gè)彈出式菜單列表
  • ButtonBar:水平排列的按鈕組

輸入框和選擇框

  • TextField:文本輸入框
  • Checkbox:復(fù)選框,允許用戶從一組中選擇多個(gè)選項(xiàng)
  • Radio:?jiǎn)芜x框,允許用戶從一組中選擇一個(gè)選項(xiàng)。
  • Switch:On/off 用于切換一個(gè)單一狀態(tài)
  • Slider:滑塊,允許用戶通過(guò)滑動(dòng)滑塊來(lái)從一系列值中選擇。
  • Date & Time Pickers:日期&時(shí)間選擇器

對(duì)話框、Alert、Panel

  • SimpleDialog:簡(jiǎn)單對(duì)話框可以顯示附加的提示或操作
  • AlertDialog:一個(gè)會(huì)中斷用戶操作的對(duì)話款,需要用戶確認(rèn)
  • BottomSheet:一個(gè)從屏幕底部滑起的列表(以顯示更多的內(nèi)容)。你可以調(diào)用showBottomSheet()或showModalBottomSheet彈出
  • ExpansionPanel:Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.
  • SnackBar:具有可選操作的輕量級(jí)消息提示,在屏幕的底部顯示。

信息展示

  • Image:一個(gè)顯示圖片的widget
  • Icon:A Material Design icon.
  • Chip:標(biāo)簽,一個(gè)Material widget。 它可以將一個(gè)復(fù)雜內(nèi)容實(shí)體展現(xiàn)在一個(gè)小塊中,如聯(lián)系人。
  • Tooltip:一個(gè)文本提示工具,幫助解釋一個(gè)按鈕或其他用戶界面,當(dāng)widget長(zhǎng)時(shí)間按下時(shí)(當(dāng)用戶采取其他適當(dāng)操作時(shí))顯示一個(gè)提示標(biāo)簽。‘
  • DataTable:數(shù)據(jù)表顯示原始數(shù)據(jù)集。它們通常出現(xiàn)在桌面企業(yè)產(chǎn)品中。DataTable Widget實(shí)現(xiàn)這個(gè)組件
  • Card:一個(gè) Material Design 卡片。擁有一個(gè)圓角和陰影
  • LinearProgressIndicator:一個(gè)線性進(jìn)度條,另外還有一個(gè)圓形進(jìn)度條CircularProgressIndicator

布局

  • ListTile:一個(gè)固定高度的行,通常包含一些文本,以及一個(gè)行前或行尾圖標(biāo)
  • Stepper:一個(gè)Material Design 步驟指示器,顯示一系列步驟的過(guò)程
  • Divider:一個(gè)邏輯1像素厚的水平分割線,兩邊都有填充


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


Layout

擁有單個(gè)子元素的布局widget

  • Container:一個(gè)擁有繪制、定位、調(diào)整大小的 widget
  • Padding:一個(gè)widget, 會(huì)給其子widget添加指定的填充
  • Center:將其子widget居中顯示在自身內(nèi)部的widget
  • Align:一個(gè)widget,它可以將其子widget對(duì)齊,并可以根據(jù)子widget的大小自動(dòng)調(diào)整大小
  • FittedBox:按自己的大小調(diào)整其子widget的大小和位置
  • AspectRatio:一個(gè)widget,試圖將子widget的大小指定為某個(gè)特定的長(zhǎng)寬比
  • ConstrainedBox:對(duì)其子項(xiàng)施加附加約束的widget
  • Baseline:根據(jù)子項(xiàng)的基線對(duì)它們的位置進(jìn)行定位的widget
  • FractionallySizedBox:一個(gè)widget,它把它的子項(xiàng)放在可用空間的一小部分。關(guān)于布局算法的更多細(xì)節(jié),見(jiàn)RenderFractionallySizedOverflowBox
  • IntrinsicHeight:一個(gè)widget,它將它的子widget的高度調(diào)整其本身實(shí)際的高度
  • IntrinsicWidth:一個(gè)widget,它將它的子widget的寬度調(diào)整其本身實(shí)際的寬度
  • LimitedBox:一個(gè)當(dāng)其自身不受約束時(shí)才限制其大小的盒子
  • Offstage:一個(gè)布局widget,可以控制其子widget的顯示和隱藏
  • OverflowBox:對(duì)其子項(xiàng)施加不同約束的widget,它可能允許子項(xiàng)溢出父級(jí)
  • SizedBox:一個(gè)特定大小的盒子。這個(gè)widget強(qiáng)制它的孩子有一個(gè)特定的寬度和高度。如果寬度或高度為NULL,則此widget將調(diào)整自身大小以匹配該維度中的孩子的大小
  • SizedOverflowBox:一個(gè)特定大小的widget,但是會(huì)將它的原始約束傳遞給它的孩子,它可能會(huì)溢出
  • Transform:在繪制子widget之前應(yīng)用轉(zhuǎn)換的widget
  • CustomSingleChildLayout:一個(gè)自定義的擁有單個(gè)子widget的布局widget

擁有多個(gè)子元素的布局widget

  • Row:在水平方向上排列子widget的列表
  • Column:在垂直方向上排列子widget的列表
  • Stack:可以允許其子widget簡(jiǎn)單的堆疊在一起
  • IndexedStack:從一個(gè)子widget列表中顯示單個(gè)孩子的Stack
  • Flow:一個(gè)實(shí)現(xiàn)流式布局算法的widget
  • Table:為其子widget使用表格布局算法的widget
  • Wrap:可以在水平或垂直方向多行顯示其子widget
  • ListBody:一個(gè)widget,它沿著一個(gè)給定的軸,順序排列它的子元素
  • ListView:可滾動(dòng)的列表控件。ListView是最常用的滾動(dòng)widget,它在滾動(dòng)方向上一個(gè)接一個(gè)地顯示它的孩子。在縱軸上,孩子們被要求填充ListView
  • CustomMultiChildLayout:使用一個(gè)委托來(lái)對(duì)多個(gè)孩子進(jìn)行設(shè)置大小和定位的小部件

Layout helpers

  • LayoutBuilder:構(gòu)建一個(gè)可以依賴父窗口大小的widget樹






以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)