Flutter Widget目錄

2020-08-27 14:46 更新

使用Flutter的一套的視覺、結構、平臺、和交互式的widgets，快速創(chuàng)建漂亮的APP.

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


基礎 Widgets

  • Container：一個擁有繪制、定位、調整大小的 widget
  • Row：在水平方向上排列子widget的列表
  • Column：在垂直方向上排列子widget的列表
  • Image：一個顯示圖片的widget
  • Text：單一格式的文本
  • Icon：A Material Design icon.
  • RaisedButton：Material Design中的button， 一個凸起的材質矩形按鈕
  • Scaffold：Material Design布局結構的基本實現(xiàn)。此類提供了用于顯示drawer、snackbar和底部sheet的API
  • Appbar：一個Material Design應用程序欄，由工具欄和其他可能的widget（如TabBar和FlexibleSpaceBar）組成
  • FlutterLogo：Flutter logo, 以widget形式. 這個widget遵從IconTheme。
  • Placeholder：一個繪制了一個盒子的的widget，代表日后有widget將會被添加到該盒子中


Material Components Widgets

App結構和導航

  • Scaffold：Material Design布局結構的基本實現(xiàn)。此類提供了用于顯示drawer、snackbar和底部sheet的API。
  • Appbar：一個Material Design應用程序欄，由工具欄和其他可能的widget（如TabBar和FlexibleSpaceBar）組成。
  • ButtomNavigationBar：底部導航條，可以很容易地在tap之間切換和瀏覽頂級視圖。
  • TabBar：一個顯示水平選項卡的Material Design widget。
  • TabBarView：顯示與當前選中的選項卡相對應的頁面視圖。通常和TabBar一起使用。
  • MaterialApp：一個方便的widget，它封裝了應用程序實現(xiàn)Material Design所需要的一些widget。
  • WidgetsApp：一個方便的類，它封裝了應用程序通常需要的一些widget。
  • Drawer：從Scaffold邊緣水平滑動以顯示應用程序中導航鏈接的Material Design面板

按鈕

  • RaisedButton：Material Design中的button， 一個凸起的材質矩形按鈕
  • FloatingActionButton：一個圓形圖標按鈕，它懸停在內容之上，以展示應用程序中的主要動作。FloatingActionButton通常用于Scaffold.floatingActionButton字段。
  • FlatButton：一個扁平的Material按鈕
  • IconButton：一個Material圖標按鈕，點擊時會有水波動畫
  • PopupMenuButton：當菜單隱藏式，點擊或調用onSelected時顯示一個彈出式菜單列表
  • ButtonBar：水平排列的按鈕組

輸入框和選擇框

  • TextField：文本輸入框
  • Checkbox：復選框，允許用戶從一組中選擇多個選項
  • Radio：單選框，允許用戶從一組中選擇一個選項。
  • Switch：On/off 用于切換一個單一狀態(tài)
  • Slider：滑塊，允許用戶通過滑動滑塊來從一系列值中選擇。
  • Date & Time Pickers：日期&時間選擇器

對話框、Alert、Panel

  • SimpleDialog：簡單對話框可以顯示附加的提示或操作
  • AlertDialog：一個會中斷用戶操作的對話款，需要用戶確認
  • BottomSheet：一個從屏幕底部滑起的列表（以顯示更多的內容）。你可以調用showBottomSheet()或showModalBottomSheet彈出
  • ExpansionPanel：Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.
  • SnackBar：具有可選操作的輕量級消息提示，在屏幕的底部顯示。

信息展示

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

布局

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


Cupertino（iOS風格的widget）


Layout

擁有單個子元素的布局widget

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

擁有多個子元素的布局widget

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

Layout helpers

  • LayoutBuilder：構建一個可以依賴父窗口大小的widget樹






以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號