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