资源引用类型,用于设置组件属性的值
通过$r或者$rawfile来创建
- $r('belonging.type.name')
- belonging:系统资源(sys) / 应用资源(app)
- type:资源类型,支持'color'、'float'、'string'、'media'等
- name:资源名称,
- $rawfile('filename'):工程中resources/rawfile目录下的文件
@Entry
@Component
struct ResPage {
build() {
Row() {
Column({ space: 10 }) {
Image($r('app.media.icon'))
.width($r('app.float.text_width'))
.height($r('app.float.text_height'))
Image($rawfile('icon.png')).width(100).height(100)
Text($r('app.string.module_desc'))
.fontSize($r('app.float.float_20'))
.fontColor($r('app.color.color_white'))
.backgroundColor($r('app.color.color_red'))
}
.width('100%')
}
.height('100%')
}
}
长度类型,用于描述尺寸单位
Text("测试Length")
//显式指定像素单位
.fontSize('28sp')
.fontColor(Color.Blue)
//使用百分比
.width("100%")
//直接写数值,默认单位vp
.height(100)
.backgroundColor('#FF0000')
字符串类型,用于描述字符串入参可以使用的类型
颜色类型,用于描述资源颜色类型
padding:设置内边距,用于描述组件不同方向的内边距
margin:外边距,用于描述组件不同方向的外边距
类型都是Length,非必填
@Entry
@Component
struct ResPage {
build() {
Row() {
Column({ space: 10 }) {
Row() {
Image($r('app.media.icon')).width(100).height(100)
.padding({ left: 20, right: 20, top: 20, bottom: 20 })
Image($r('app.media.icon')).width(100).height(100)
.margin({ left: 20, top: 20 })
}.width('100%')
.height(400)
.backgroundColor(Color.Red)
}
.width('100%')
}
.height('100%')
}
}
Offset:相对布局完成位置的坐标偏移量
类型都是Length,非必填
使用方法:
名称 | 类型 | 必填 | 说明 |
---|---|---|---|
size | Length | 否 | 设置文本尺寸,Length为number类型时,使用fp单位 |
weight | FontWeight?| number | string | 否 | 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗 以及“bold”、“bolder”、“lighter”、“regular”、“medium”,分别对应FontWeight中相应的枚举值。默认值:FontWeight.Normal |
family | string |?Resource? | 否 | 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial, sans-serif' |
style | FontStyle | 否 | 设置文本的字体样式 |
color | ResourceColor | 否 | 设置文本颜色 |
Text("测试Font")
.fontSize(28)
.fontWeight(900)
.fontFamily('Arial')
.fontStyle(FontStyle.Italic)
.fontColor(Color.Green)
名称 | 类型 | 必填 | 说明 |
---|---|---|---|
width | Length | 是 | 目标元素的宽度,作为返回值时,类型为number,单位vp |
height | Length | 是 | 目标元素的高度,作为返回值时,类型为number,单位vp |
position | Position | 是 | 目标元素左上角相对父元素左上角的位置 |
globalPosition | Position | 是 | 目标元素左上角相对页面左上角的位置 |
Image($r('app.media.icon'))
.width(100)
.height(100)
.position({ x: 100, y: 100 })
组件布局时,进行尺寸范围限制
名称 | 类型 | 必填 | 说明 |
---|---|---|---|
minWidth | Length | 否 | 元素最小宽度 |
maxWidth | Length | 否 | 元素最大宽度 |
minHeight | Length | 否 | 元素最小高度 |
maxHeight | Length | 否 | 元素最大高度 |
border:用于描述边框相关信息??BorderOptions
名称 | 类型 | 必填 | 说明 |
---|---|---|---|
width | Length | 否 | 边框宽度 |
color | ResourceColor | 否 | 边框颜色 |
radius | Length | 否 | 边框圆角半径 |
style | BorderStyle | 否 | 边框样式 |
BorderStyle详情:
设置方法:
????????.border({ width: 5, color: Color.Green, radius: 10, style: BorderStyle.Dotted })