Flutte部件目录-基本部件(二)

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

Image

一个显示图像的部件。

Flutte部件目录-基本部件(二)_第1张图片

提供了几种构造函数,用于指定图像的各种方式:

  • 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 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 @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

单一风格的一连串文字。

Flutte部件目录-基本部件(二)_第2张图片

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 @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

材质设计图标。

Flutte部件目录-基本部件(二)_第3张图片

使用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 @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

材质设计凸起按钮。 一个凸起的按钮由一个矩形的材料悬停在界面上。

Flutte部件目录-基本部件(二)_第4张图片

一个凸起的按钮是基于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 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 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

由底层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 @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

转载于:https://my.oschina.net/u/3647851/blog/1790609

你可能感兴趣的:(python)