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

Image

一个显示图像的部件。

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

支持以下图像格式:JPEG,PNG,GIF,GIF动画,WebP,WebP动画,BMP和WBMP

要自动执行像素密度感知资产解析,请使用AssetImage指定图像并确保在部件树中的Image部件外部存在MaterialAppWidgetsAppMediaQuery部件。

该图像使用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<StringString> 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

也可以看看:

继承关系 

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部件。 通常这是由WidgetsAppMaterialApp自动引入的。

也可以看看:

继承结构

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进行过度覆盖。

也可以看看:

继承结构

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王金龙的专栏

svg.js教程及使用手册详解(二)

上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法。

38240
来自专栏Golang语言社区

【Go 语言社区】HTML5 canvas验证码识别

canvas 的历史这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把...

50640
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(二)文本、标签、特性

当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

10960
来自专栏Java帮帮-微信公众号-技术文章全总结

【Java案例】打印五环

案例描述 在屏幕上画出奥运五环旗,如图1.7所示。 ? 图1.7 奥运五环旗 案例分析 观察奥运五环旗的图案,直观的感觉,由五个圆组成,每个圆的颜色不一样...

41850
来自专栏小灰灰

Java 实现图片合成

图片合成 利用Java的绘图方法,实现图片合成 在开始之前,先定一个小目标,我们希望通过图片合成的方式,创建一个类似下面样式的图片 ? I. 设计思路 首先...

1.8K100
来自专栏听雨堂

从MapX到MapXtreme2004[11]-坐标概论

        坐标的问题是Mapxtreme中最郁闷的问题,前几天在这上面耗了很多时间,没有搞定,今天又是不得不钻研,还好,小有心得。         1、...

22370
来自专栏前端说吧

css布局 - 九宫格布局的方法汇总(更新中...)

其实换一种角度和思路,又是一个解决方法,不用margin负值,我们想要li要对其ul两端效果,之所以纠结是因为li又需要margin-right,而右边最后一个...

31320
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之border

1、border-width   border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法。   bor...

32590
来自专栏用户2442861的专栏

python数字图像处理(12):基本图形的绘制

skimage.draw.set_color(img, coords, color)

21020
来自专栏九彩拼盘的叨叨叨

SVG 直线路径写法示例

大写字母表示到后面值为绝对值,小写字母表示后面值为相对当前点的值 画一条起点是(10, 10)终点点是 (20, 30) 的线

10040

扫码关注云+社区

领取腾讯云代金券