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