目录
常用基础组件
1、text
文本样式
针对包含文本元素的组件,例如Text、Span、Button、TextInput等,可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily这些文本样式,分别设置文本的颜色、大小、样式、粗细以及字体,文本样式的属性如下表:
名称 |
参数类型 |
描述 |
fontColor |
ResourceColor |
设置文本颜色。 |
fontSize |
Length | Resource |
设置文本尺寸,Length为number类型时,使用fp单位。 |
fontStyle |
FontStyle |
设置文本的字体样式。默认值:FontStyle.Normal。 |
fontWeight |
number | FontWeight | string |
设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。string类型仅支持number类型取值的字符串形式,例如“400”,以及“bold”、“bolder”、“lighter”、“regular”、“medium”,分别对应FontWeight中相应的枚举值。默认值:FontWeight.Normal。 |
fontFamily |
string | Resource |
设置文本的字体列表。使用多个字体,使用“,”进行分割,优先级按顺序生效。例如:“Arial,sans-serif”。 |
设置文本对齐方式
使用textAlign属性可以设置文本的对齐方式
1、Start(默认值):水平对齐首部。
2、Center:水平居中对齐。
3、End:水平对齐尾部。
设置文本超长显示
当文本内容较多超出了Text组件范围的时候,您可以使用textOverflow设置文本截取方式,需配合maxLines使用,单独设置不生效,maxLines用于设置文本显示最大行数。
设置文本装饰线
使用decoration设置文本装饰线样式及其颜色,大家在浏览网页的时候经常可以看到装饰线,例如带有下划线超链接文本。decoration包含type和color两个参数,其中type用于设置装饰线样式,参数类型为TextDecorationTyp,color为可选参数。
1、None:不使用文本装饰线。
2、Overline:文字上划线修饰。
3、LineThrough:穿过文本的修饰线
4、Underline:文字下划线修饰。
2、image
Image组件用来渲染展示图片,它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高,图片就能加载出来
设置缩放类型
ImageFit包含以下几种类型:
1、Contain:保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。
2、Cover(默认值):保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。
3、Auto:自适应显示。
4、Fill:不保持宽高比进行放大缩小,使得图片充满显示边界。
5、ScaleDown:保持宽高比显示,图片缩小或者保持不变。
6、None:保持原有尺寸显示。
加载网络图片
比如浏览新闻的时候,图片一般从网络加载而来,Image组件支持加载网络图片,将图片地址换成网络图片地址进行加载。
例:Image('https://www.example.com/xxx.png')
3、TextInput
TextInput组件用于输入单行文本,响应