Flutte部件目錄-基本部件（二）

Image

一個顯示圖像的部件。

提供了幾種構造函數，用於指定圖像的各類方式：

• new Image, 用於從ImageProvider獲取圖像.
• new Image.asset, 用於使用鍵從AssetBundle獲取圖像.
• new Image.network, 用於從URL獲取圖像.
• new Image.file,用於從文件獲取圖像.
• new Image.memory,用於從Uint8List得到圖像.

支持如下圖像格式：JPEG，PNG，GIF，GIF動畫，WebP，WebP動畫，BMP和WBMP

要自動執行像素密度感知資產解析，請使用AssetImage指定圖像並確保在部件樹中的Image部件外部存在MaterialApp，WidgetsApp或MediaQuery部件。

該圖像使用paintImage繪製，它更詳細地描述了該類上各個字段的含義。

也能夠看看:

• Icon, 顯示來自字體的圖像.
• new Ink.image,這是在材質應用程序中顯示圖像的首選方式（特別是若是圖像位於Material中，而且在其上會有InkWell）.

繼承結構

Object>Diagnosticable>DiagnosticableTree >Widget >StatefulWidget >Image

構造函數

Image({Key key, @required ImageProvider image, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false })

建立一個顯示圖像的小部件. [...]

const

Image.asset(String name, { Key key, AssetBundle bundle, double scale, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, String package })

建立一個顯示從資產包獲取的ImageStream的部件。 圖像的Key是由name參數給出 . [...]

Image.file(File file, { Key key, double scale: 1.0, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false })

建立一個顯示從File獲取的ImageStream的部件. [...]

Image.memory(Uint8List bytes, { Key key, double scale: 1.0, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false })

建立一個顯示從Uint8List獲取的ImageStream的部件. [...]

Image.network(String src, { Key key, double scale: 1.0, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, Map<String, String> headers })

建立一個顯示從網上獲取的ImageStream的部件. [...]

屬性

alignment → AlignmentGeometry

如何在邊界內對齊圖像. [...]

final

centerSlice → Rect

九片圖像的中心切片. [...]

final

color → Color

若是非null，則使用colorBlendMode將此顏色與每一個圖像像素混合。

final

colorBlendMode → BlendMode

用於將顏色與此圖像組合. [...]

final

fit → BoxFit

如何將圖像寫入佈局過程當中分配的空間. [...]

final

gaplessPlayback → bool

當圖像提供者發生變化時，是繼續顯示舊圖像（true）仍是暫時不顯示（false）.

final

height → double

若是非null，則要求圖像具備此高度. [...]

final

image → ImageProvider

要顯示的圖像.

final

matchTextDirection → bool

是否按照TextDirection的方向繪製圖像. [...]

final

repeat → ImageRepeat

如何繪製圖像未覆蓋的佈局邊界的全部部分.

final

width → double

若是非null，則要求圖像具備此寬度. [...]

final

hashCode → int

此對象的哈希碼. [...]

read-only, inherited

key → Key

控制一個部件如何替換樹中的另外一個部件. [...]

final, inherited

runtimeType → Type

對象的運行時類型的表示.

read-only, inherited

方法

createState() → _ImageState

在樹中的給定位置爲此小部件建立可變狀態. [...]

debugFillProperties(DiagnosticPropertiesBuilder description) → void

createElement() → StatefulElement inherited

debugDescribeChildren() → List<DiagnosticsNode> @protected, inherited

noSuchMethod(Invocation invocation) → dynamic inherited

toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode inherited

toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShort() → String inherited

操做符

operator ==(other) → bool

等值運算符. [...]

inherited

Text

單一風格的一連串文字。

Text部件顯示單個樣式的文本字符串。 該字符串可能會跨越多行，或者可能所有顯示在同一行上，具體取決於佈局約束。

style參數是可選的。 省略時，文本將使用最接近的DefaultTextStyle中的樣式。 若是給定樣式的TextStyle.inherit屬性爲true，則給定的樣式將與最近的封閉DefaultTextStyle合併。 這種合併行爲很是有用，例如，在使用默認字體系列和大小時使文本變爲粗體。

使用新的TextSpan.rich構造函數，還可使用TextSpan建立Text部件，以顯示使用多種樣式的文本（例如，帶有粗體字的段落）。

示例

new Text(
  'Hello, $_name! How are you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: new TextStyle(fontWeight: FontWeight.bold),
)

互動

爲了使文本對觸摸事件做出反應，請將其用GestureDetector.onTap處理程序包裝到GestureDetector部件中。

在材料設計應用程序中，請考慮使用FlatButton，或者若是不合適，至少使用InkWell而不是GestureDetector。

要使文本的各個部分交互，請使用RichText並將TapGestureRecognizer指定爲文本的相關部分TextSpan.recognizer。

也能夠看看:

• RichText, 這使您能夠更好地控制文本樣式.
• DefaultTextStyle, 它爲Text部件設置默認樣式.

繼承關係 

Object>Diagnosticable>DiagnosticableTree​​​​​​​>Widget​​​​​​​>StatelessWidget>Text

構造函數

Text(String data, { Key key, TextStyle style, TextAlign textAlign, TextDirection textDirection, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines })

建立一個文本部件. [...]

const

Text.rich(TextSpan textSpan, { Key key, TextStyle style, TextAlign textAlign, TextDirection textDirection, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines })

使用TextSpan建立一個文本部件.

const

屬性

data → String

要顯示的文本. [...]

final

maxLines → int

可選的最大文本行數，以便在須要時進行包裝。 若是文本超出了給定的行數，它將根據溢出被截斷. [...]

final

overflow → TextOverflow

應該如何處理視覺溢出.

final

softWrap → bool

文本是否應該在軟換行上截斷. [...]

final

style → TextStyle

若是非null，則用於此文本的樣式. [...]

final

textAlign → TextAlign

How the text should be aligned horizontally.

final

textDirection → TextDirection

文本的方向. [...]

final

textScaleFactor → double

每一個邏輯像素的字體像素數. [...]

final

textSpan → TextSpan

要做爲TextSpan顯示的文本. [...]

final

hashCode → int  read-only, inherited

key → Key final, inherited

runtimeType → Type read-only, inherited

方法

build(BuildContext context) → Widget

介紹由此部件表示的用戶界面的一部分. [...]

debugFillProperties(DiagnosticPropertiesBuilder description) → void

createElement() → StatelessElement inherited

debugDescribeChildren() → List<DiagnosticsNode> @protected, inherited

noSuchMethod(Invocation invocation) → dynamic inherited

toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode inherited

toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShort() → String inherited

操做符

operator ==(other) → bool inherited

Icon

材質設計圖標。

使用IconData中描述的字體的字形繪製的圖形圖標部件，例如Icons中材質的預約義IconDatas。

圖標不是互動的。 對於交互式圖標，請考慮材質的IconButton。

使用圖標時必須有一個被包圍着的Directionality部件。 一般這是由WidgetsApp或MaterialApp自動引入的。

也能夠看看:

• IconButton, 交互式圖標.
• Icons, 查看可用於此類的圖標列表.
• IconTheme, 爲圖標提供環境配置.
• ImageIcon, 用於顯示來自AssetImages或其餘ImageProviders的圖標.

繼承結構

Object​​​​​​​>Diagnosticable​​​​​​​>DiagnosticableTree​​​​​​​>Widget​​​​​​​>StatelessWidget>Icon

屬性

color → Color

繪製圖標時使用的顏色. [...]

final

icon → IconData

要顯示的圖標。 Icons中描述了可用的圖標. [...]

final

semanticLabel → String

圖標的語義標籤. [...]

final

size → double

邏輯像素中圖標的大小. [...]

final

textDirection → TextDirection

用於呈現圖標的文本方向. [...]

final

hashCode → int read-only, inherited

key → Key final, inherited

runtimeType → Type read-only, inherited

方法

build(BuildContext context) → Widget

介紹由此部件表明的用戶界面的一部分. [...]

debugFillProperties(DiagnosticPropertiesBuilder description) → void

createElement() → StatelessElement inherited

debugDescribeChildren() → List<DiagnosticsNode> @protected, inherited

noSuchMethod(Invocation invocation) → dynamic inherited

toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode inherited

toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShort() → String inherited

操做符

operator ==(other) → bool inherited

RaisedButton

材質設計凸起按鈕。 一個凸起的按鈕由一個矩形的材料懸停在界面上。

一個凸起的按鈕是基於Material.elevation在按下按鈕時提升的Material部件。

使用凸起的按鈕將給其餘大多數平面佈局添加維度，例如在漫長的內容列表中，或在普遍的空間中。避免在已凸起的內容（如對話框或卡片）上使用凸起的按鈕。

若是onPressed回調爲空，那麼該按鈕將被禁用，而且默認狀況下將相似於disabledColor中的平面按鈕。 若是您試圖更改按鈕的color而且沒有任何效果，請檢查您是否傳遞了非空onPressed處理函數。

若是您想爲點擊提供墨水飛濺效果，但不想使用按鈕，請考慮直接使用InkWell。

凸起按鈕的最小尺寸爲88.0×36.0，可使用ButtonTheme進行過分覆蓋。

也能夠看看:

• FlatButton, 沒有陰影的材料設計按鈕.
• DropdownButton, 顯示可供選擇的選項按鈕.
• FloatingActionButton, 材料應用程序中的圓形按鈕.
• IconButton, 建立只包含圖標的按鈕.
• InkWell, 它實現了平面按鈕的墨水飛濺部分.
• RawMaterialButton, 這個部件基於的部件.
• material.google.com/components/buttons.html

繼承結構

Object​​​​​​​>Diagnosticable​​​​​​​>DiagnosticableTree​​​​​​​>Widget​​​​​​​>StatelessWidget>RaisedButton

構造函數

RaisedButton({Key key, @required VoidCallback onPressed, ValueChanged<bool> onHighlightChanged, ButtonTextTheme textTheme, Color textColor, Color disabledTextColor, Color color, Color disabledColor, Color highlightColor, Color splashColor, Brightness colorBrightness, double elevation: 2.0, double highlightElevation: 8.0, double disabledElevation: 0.0, EdgeInsetsGeometry padding, ShapeBorder shape, Duration animationDuration: kThemeChangeDuration, Widget child })

建立一個填充按鈕. [...]

const

RaisedButton.icon({Key key, @required VoidCallback onPressed, ValueChanged<bool> onHighlightChanged, ButtonTextTheme textTheme, Color textColor, Color disabledTextColor, Color color, Color disabledColor, Color highlightColor, Color splashColor, Brightness colorBrightness, double elevation: 2.0, double highlightElevation: 8.0, double disabledElevation: 0.0, ShapeBorder shape, Duration animationDuration: kThemeChangeDuration, @required Widget icon, @required Widget label })

從一對用做按鈕圖標和標籤的部件建立一個填充按鈕. [...]

屬性

animationDuration → Duration

定義形狀和高度的動畫更改的持續時間. [...]

final

child → Widget

按鈕的標籤. [...]

final

color → Color

按鈕的填充顏色由其材質顯示，但處於其默認（未按下狀態）狀態. [...]

final

colorBrightness → Brightness

用於此按鈕的主題亮度. [...]

final

disabledColor → Color

按鈕被禁用時按鈕的填充顏色. [...]

final

disabledElevation → double

未啓用按鈕時按鈕材質的高度. [...]

final

disabledTextColor → Color

禁用按鈕時用於此按鈕文本的顏色. [...]

final

elevation → double

放置此按鈕的z座標。 這將控制凸起按鈕下面陰影的大小. [...]

final

enabled → bool

該按鈕是啓用仍是禁用. [...]

read-only

highlightColor → Color

該按鈕的InkWell的高光顏色. [...]

final

highlightElevation → double

按鈕啓用但未按下時按鈕材質的高度. [...]

final

onHighlightChanged → ValueChanged<bool>

由底層InkWell部件的InkWell.onHighlightChanged回調調用.

final

onPressed → VoidCallback

當點擊按鈕或以其餘方式激活時調用. [...]

final

padding → EdgeInsetsGeometry

按鈕的子部件（按鈕文本）的內部填充. [...]

final

shape → ShapeBorder

按鈕材質的形狀. [...]

final

splashColor → Color

按鈕的InkWell的飛濺顏色. [...]

final

textColor → Color

用於此按鈕文本的顏色. [...]

final

textTheme → ButtonTextTheme

定義按鈕的基本顏色，以及按鈕的最小尺寸，內部填充和形狀的默認值. [...]

final

hashCode → int read-only, inherited

key → Key final, inherited

runtimeType → Type read-only, inherited

方法

build(BuildContext context) → Widget

介紹由此部件呈現的用戶界面的一部分. [...]

debugFillProperties(DiagnosticPropertiesBuilder description) → void

createElement() → StatelessElement inherited

debugDescribeChildren() → List<DiagnosticsNode> @protected, inherited

noSuchMethod(Invocation invocation) → dynamic inherited

toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode inherited

toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShort() → String inherited

操做符

operator ==(other) → bool inherited