Flutter Widget整理

摘抄了flutter中文網的控件,友善自己查詢使用

1.基礎widget

文本/字型樣式

Text

• textAlign

  ：文本的對齊方式；

• maxLines

  、

  overflow

  ：指定文本顯示的最大行數;

• textScaleFactor

  ：代表文本相對于目前字型大小的縮放因子;

TextStyle

• height

  ：該屬性用于指定行高，具體的行高等于

  fontSize

  *

  height

  ;

• fontFamily

  ：由于不同平台預設支援的字型集不同;

• fontSize

  ：該屬性和Text的

  textScaleFactor

  都用于控制字型大小。但是有兩給主要差別：

  • fontSize

    可以精确指定字型大小，而

    textScaleFactor

    隻能通過縮放比例來控制。

  • textScaleFactor

    主要是用于系統字型大小設定改變時對Flutter應用字型進行全局調整，而

    fontSize

    通常用于單個文本。

TextSpan

DefaultTextStyle

按鈕

RaisedButton

FlatButton

OutlineButton

IconButton

圖檔及ICON

Image

ICON

單選開關和複選框

Switch:單選開關

Checkbox:複選框

輸入框及表單

TextField

• controller：編輯框的控制器;
• focusNode：用于控制TextField是否占有目前鍵盤的輸入焦點。它是我們和鍵盤互動的一個handle。
• InputDecoration：用于控制TextField的外觀顯示，如提示文本、背景顔色、邊框等。
• keyboardType：用于設定該輸入框預設的鍵盤輸入類型;
• textInputAction：鍵盤動作按鈕圖示(即Enter鍵位圖示);
• style：正在編輯的文本樣式。
• textAlign: 輸入框内編輯文本在水準方向的對齊方式。
• autofocus: 是否自動擷取焦點。
• obscureText：是否隐藏正在編輯的文本，如用于輸入密碼的場景等，文本内容會用“•”替換。
• maxLines：輸入框的最大行數，預設為1；如果為

  null

  ，則無行數限制。
• maxLength和maxLengthEnforced ：maxLength代表輸入框文本的最大長度;
• onChange：輸入框内容改變時的回調函數；注：内容改變事件也可以通過controller來監聽。
• onEditingComplete和onSubmitted：這兩個回調都是在輸入框輸入完成時觸發，比如按了鍵盤的完成鍵（對号圖示）或搜尋鍵（?圖示）。不同的是兩個回調簽名不同，onSubmitted回調是

  ValueChanged<String>

  類型，它接收目前輸入内容做為參數，而onEditingComplete不接收參數。
• inputFormatters：用于指定輸入格式；當使用者輸入内容改變時，會根據指定的格式來校驗。
• enable：如果為

  false

  ，則輸入框會被禁用，禁用狀态不接收輸入和事件，同時顯示禁用态樣式（在其decoration中定義）。
• cursorWidth、cursorRadius和cursorColor：這三個屬性是用于自定義輸入框光标寬度、圓角和顔色的。

Form

• autovalidate：是否自動校驗輸入内容；
• onWillPop：決定Form所在的路由是否可以直接傳回（如點選傳回按鈕），該回調傳回一個

  Future

  對象，如果Future的最終結果是false，則目前路由不會傳回；如果為

  true

  ，則會傳回到上一個路由。此屬性通常用于攔截傳回按鈕。
• onChanged：Form的任意一個子FormField内容發生變化時會觸發此回調。

2.布局類widget

Row:水準布局

• textDirection：表示水準方向子widget的布局順序;
• mainAxisSize：表示Row在主軸(水準)方向占用的空間;
• mainAxisAlignment：表示子Widgets在Row所占用的水準空間内對齊方式;
• verticalDirection：表示Row縱軸（垂直）的對齊方向，預設是

  VerticalDirection.down

  ，表示從上到下。
• crossAxisAlignment：表示子Widgets在縱軸方向的對齊方式;
• children ：子Widgets數組。

Column:垂直布局

Flex:彈性布局

Expanded:可以按比例“擴伸”Row、Column和Flex子widget所占用的空間

Wrap:流式布局

• spacing：主軸方向子widget的間距
• runSpacing：縱軸方向的間距
• runAlignment：縱軸方向的對齊方式

Flow:流式布局

Stack:層疊布局

Positioned:層疊布局在stack中定位用

3.容器類widget

Padding

EdgeInsets

ConstrainedBox

SizedBox

ConstrainedBox

BoxConstraints

UnconstrainedBox

DecoratedBox

BoxDecoration

Transform:變換

Container

4.可滾動的widget

SingleChildScrollView

ListView

GridView

CustomScrollView

ScrollController

5.功能型widget

WillPopScope

InheritedWidget

ThemeData