回复
OpenHarmony应用开发-组件通用信息-通用属性
素年锦时静待君丶
发布于 2023-4-14 15:32
浏览
0收藏
版本：v3.2 Release
悬浮态效果
设置组件的鼠标悬浮态显示效果。
说明：
从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
属性
名称 | 参数类型 | 描述 |
hoverEffect | 设置当前组件悬停态下的悬浮效果。 默认值：HoverEffect.Auto |
示例
// xxx.ets
@Entry
@Component
struct HoverExample {
@State isHoverVal: boolean = false
build() {
Column({ space: 5 }) {
Column({ space: 5 }) {
Text('Scale').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 80 })
Column()
.width('80%').height(200).backgroundColor(Color.Gray)
.position({ x: 40, y: 120 })
.hoverEffect(HoverEffect.Scale)
.onHover((isHover: boolean) => {
console.info('Scale isHover: ' + isHover)
this.isHoverVal = isHover
})
Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 })
Column()
.width('80%').height(200).backgroundColor(Color.Gray)
.hoverEffect(HoverEffect.Highlight)
.position({ x: 40, y: 420 })
.onHover((isHover: boolean) => {
console.info('Highlight isHover: ' +isHover )
this.isHoverVal = isHover
})
}
.hoverEffect(HoverEffect.None)
.width('100%').height('100%').border({ width: 1 })
.onHover((isHover: boolean) => {
console.info('HoverEffect.None')
this.isHoverVal组件标识
id为组件的唯一标识，在整个应用内唯一。本模块提供组件标识相关接口，可以获取指定id组件的属性，也提供向指定id组件发送事件的功能。
说明：
从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
属性
名称 | 参数说明 | 描述 |
id | string | 组件的唯一标识，唯一性由使用者保证。 默认值：‘’ 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
接口
getInspectorByKey9+
getInspectorByKey(id: string): string
获取指定id的组件的所有属性，不包括子组件信息。
此接口仅用于对应用的测试。
参数:
参数 | 类型 | 必填 | 描述 |
id | string | 是 | 要获取属性的组件id。 |
返回值:
类型 | 描述 |
string | 组件属性列表的JSON字符串。 |
getInspectorTree9+
getInspectorTree(): Object
获取组件树及组件属性。
此接口仅用于对应用的测试。
返回值:
类型 | 描述 |
Object | 组件树及组件属性列表的JSON对象。 |
sendEventByKey9+
sendEventByKey(id: string, action: number, params: string): boolean
给指定id的组件发送事件。
此接口仅用于对应用的测试。
参数:
参数 | 类型 | 必填 | 描述 |
id | string | 是 | 要触发事件的组件的id。 |
action | number | 是 | 要触发的事件类型，目前支持取值： - 点击事件Click: 10 - 长按事件LongClick: 11。 |
params | string | 是 | 事件参数，无参数传空字符串 “”。 |
返回值:
类型 | 描述 |
boolean | 找不到指定id的组件时返回false，其余情况返回true。 |
sendTouchEvent9+
sendTouchEvent(event: TouchObject): boolean
发送触摸事件。
此接口仅用于对应用的测试。
参数:
参数 | 类型 | 必填 | 描述 |
event | 是 | 触发触摸事件的位置，event参数见TouchEvent中TouchObject的介绍。 |
返回值:
类型 | 描述 |
boolean | 事件发送失败时返回false，其余情况返回true。 |
sendKeyEvent9+
sendKeyEvent(event: KeyEvent): boolean
发送按键事件。
此接口仅用于对应用的测试。
参数:
参数 | 类型 | 必填 | 描述 |
event | 是 | 按键事件，event参数见KeyEvent介绍。 |
返回值:
类型 | 描述 |
boolean | 事件发送失败时时返回false，其余情况返回true。 |
sendMouseEvent9+
sendMouseEvent(event: MouseEvent): boolean
发送鼠标事件。
此接口仅用于对应用的测试。
参数：
参数 | 类型 | 必填 | 描述 |
event | 是 | 鼠标事件，event参数见MouseEvent介绍。 |
返回值：
类型 | 描述 |
boolean | 事件发送失败时返回false，其余情况返回true。 |
示例
// xxx.ets
class Utils {
static rect_left
static rect_top
static rect_right
static rect_bottom
static rect_value
//获取组件所占矩形区域坐标
static getComponentRect(key) {
let strJson = getInspectorByKey(key)
let obj = JSON.parse(strJson)
console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj))
let rectInfo = JSON.parse('[' + obj.$rect + ']')
console.info("[getInspectorByKey] rectInfo is: " + rectInfo)
this.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]
this.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]
this.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]
this.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1]
return this.rect_value = {
"left": this.rect_left, "top": this.rect_top, "right": this.rect_right, "bottom": this.rect_bottom
}
}
}
@Entry
@Component
struct IdExample {
@State text: string = ''
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button() {
Text('onKeyTab').fontSize(25).fontWeight(FontWeight.Bold)
}.margin({ top: 20 }).backgroundColor('#0D9FFB')
.onKeyEvent(() => {
this.text = "onKeyTab"
})
Button() {
Text('click to start').fontSize(25).fontWeight(FontWeight.Bold)
}.margin({ top: 20 })
.onClick(() => {
console.info(getInspectorByKey("click"))
console.info(JSON.stringify(getInspectorTree()))
this.text = "Button 'click to start' is clicked"
setTimeout(() => {
sendEventByKey("longClick", 11, "") // 向id为"longClick"的组件发送长按事件
}, 2000)
}).id('click')
Button() {
Text('longClick').fontSize(25).fontWeight(FontWeight.Bold)
}.margin({ top: 20 }).backgroundColor('#0D9FFB')
.gesture(
LongPressGesture().onActionEnd(() => {
console.info('long clicked')
this.text = "Button 'longClick' is longclicked"
setTimeout(() => {
let rect = Utils.getComponentRect('onTouch') // 获取id为"onTouch"组件的矩形区域坐标
let touchPoint: TouchObject = {
id: 1,
x: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
y: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标
type: TouchType.Down,
screenX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
screenY: rect.left + (rect.right - rect.left) / 2, // 组件中心点y坐标
}
sendTouchEvent(touchPoint) // 发送触摸事件
touchPoint.type = TouchType.Up
sendTouchEvent(touchPoint) // 发送触摸事件
}, 2000)
})).id('longClick')
Button() {
Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold)
}.type(ButtonType.Capsule).margin({ top: 20 })
.onClick(() => {
console.info('onTouch is clicked')
this.text = "Button 'onTouch' is clicked"
setTimeout(() => {
let rect = Utils.getComponentRect('onMouse') // 获取id为"onMouse"组件的矩形区域坐标
let mouseEvent: MouseEvent = {
button: MouseButton.Left,
action: MouseAction.Press,
x: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
y: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标
screenX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
screenY: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标
timestamp: 1,
target: {
area: {
width: 1,
height: 1,
position: {
x: 1,
y: 1
},
globalPosition: {
x: 1,
y: 1
}
}
},
source: SourceType.Mouse,
pressure: 1,
tiltX: 1,
tiltY: 1,
sourceTool: SourceTool.Unknown
}
sendMouseEvent(mouseEvent) // 发送鼠标事件
}, 2000)
}).id('onTouch')
Button() {
Text('onMouse').fontSize(25).fontWeight(FontWeight.Bold)
}.margin({ top: 20 }).backgroundColor('#0D9FFB')
.onMouse(() => {
console.info('onMouse')
this.text = "Button 'onMouse' in onMouse"
setTimeout(() => {
let keyEvent: KeyEvent = {
type: KeyType.Down,
keyCode: 2049,
keyText: 'tab',
keySource: 4,
deviceId: 0,
metaKey: 0,
timestamp: 0
}
sendKeyEvent(keyEvent) // 发送按键事件
}, 2000)
}).id('onMouse')
Text(this.text).fontSize(25).padding(15)
}
.width('100%').height('100%')
}
}触摸热区设置
适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。
说明：
从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
属性
名称 | 参数类型 | 描述 |
responseRegion | Array<Rectangle> | Rectangle | 设置一个或多个触摸热区，包括位置和大小。 默认触摸热区为整个组件，默认值： { x：0, y：0, width：‘100%’, height：‘100%’ } 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
Rectangle对象说明
从API version 9开始，该接口支持在ArkTS卡片中使用。
名称 | 类型 | 必填 | 描述 |
x | Length | 否 | 触摸点相对于组件左上角的x轴坐标。 默认值：0vp |
y | Length | 否 | 触摸点相对于组件左上角的y轴坐标。 默认值：0vp |
width | Length | 否 | 触摸热区的宽度。 默认值：‘100%’ |
height | Length | 否 | 触摸热区的高度。 默认值：‘100%’ |
说明：
x和y可以设置正负值百分比。当x设置为’100%‘时表示热区往右偏移组件本身宽度大小，当x设置为’-100%'时表示热区往左偏移组件本身宽度大小。当y设置为’100%‘时表示热区往下偏移组件本身高度大小，当y设置为’-100%'时表示热区往上偏移组件本身高度大小。
width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么’100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。
百分比相对于组件自身宽高进行计算。
示例
// xxx.ets
@Entry
@Component
struct TouchTargetExample {
@State text: string = ""
build() {
Column({ space: 20 }) {
Text("{x:0,y:0,width:'50%',height:'100%'}")
// 热区宽度为按钮的一半，点击右侧无响应
Button("button1")
.responseRegion({ x: 0, y: 0, width: '50%', height: '100%' })
.onClick(() => {
this.text = 'button1 clicked'
})
// 热区宽度为按钮的一半，且右移一个按钮宽度，点击button2右侧左边，点击事件生效
Text("{x:'100%',y:0,width:'50%',height:'100%'}")
Button("button2")
.responseRegion({ x: '100%', y: 0, width: '50%', height: '100%' })
.onClick(() => {
this.text = 'button2 clicked'
})
// 热区大小为整个按钮，且下移一个按钮高度，点击button3下方按钮大小区域，点击事件生效
Text("{x:0,y:'100%',width:'100%',height:'100%'}")
Button("button3")
.responseRegion({ x: 0, y: '100%', width: '100%', height: '100%' })
.onClick(() => {
this.text = 'button3 clicked'
})
Text(this.text).margin({ top: 50 })
}.width('100%').margin({ top: 10 })
}
}
多态样式
设置组件不同状态下的样式。
说明：
从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
属性
名称 | 参数类型 | 描述 |
stateStyles | StateStyles | 设置组件不同状态的样式。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
StateStyles接口说明
从API version 9开始，该接口支持在ArkTS卡片中使用。
名称 | 类型 | 必填 | 描述 |
normal | ()=>void | 否 | 组件无状态时的样式。 |
pressed | ()=>void | 否 | 组件按下状态的样式。 |
disabled | ()=>void | 否 | 组件禁用状态的样式。 |
focused | ()=>void | 否 | 组件获焦状态的样式。 |
clicked | ()=>void | 否 | 组件点击状态的样式。 |
示例
// xxx.ets
@Entry
@Component
struct StyleExample {
@State isEnable: boolean = true
@Styles pressedStyles() {
.backgroundColor("#ED6F21")
.borderRadius(10)
.borderStyle(BorderStyle.Dashed)
.borderWidth(2)
.borderColor("#33000000")
.width(120)
.height(30)
.opacity(1)
}
@Styles disabledStyles() {
.backgroundColor("#E5E5E5")
.borderRadius(10)
.borderStyle(BorderStyle.Solid)
.borderWidth(2)
.borderColor("#2a4c1919")
.width(90)
.height(25)
.opacity(1)
}
@Styles normalStyles() {
.backgroundColor("#0A59F7")
.borderRadius(10)
.borderStyle(BorderStyle.Solid)
.borderWidth(2)
.borderColor("#33000000")
.width(100)
.height(25)
.opacity(1)
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
Text("normal")
.fontSize(14)
.fontColor(Color.White)
.opacity(0.5)
.stateStyles({
normal: this.normalStyles,
})
.margin({ bottom: 20 })
.textAlign(TextAlign.Center)
Text("pressed")
.backgroundColor("#0A59F7")
.borderRadius(20)
.borderStyle(BorderStyle.Dotted)
.borderWidth(2)
.borderColor(Color.Red)
.width(100)
.height(25)
.opacity(1)
.fontSize(14)
.fontColor(Color.White)
.stateStyles({
pressed: this.pressedStyles,
})
.margin({ bottom: 20 })
.textAlign(TextAlign.Center)
Text(this.isEnable == true ? "effective" : "disabled")
.backgroundColor("#0A59F7")
.borderRadius(20)
.borderStyle(BorderStyle.Solid)
.borderWidth(2)
.borderColor(Color.Gray)
.width(100)
.height(25)
.opacity(1)
.fontSize(14)
.fontColor(Color.White)
.enabled(this.isEnable)
.stateStyles({
disabled: this.disabledStyles,
})
.textAlign(TextAlign.Center)
Text("control disabled")
.onClick(() => {
this.isEnable = !this.isEnable
console.log(`${this.isEnable}`)
})
}
.width(350).height(300)
}
}
触摸测试控制
设置组件的触摸测试类型。ArkUI开发框架在处理触屏事件时，会在触屏事件触发前，进行按压点和组件区域的触摸测试来收集需要响应触屏事件的组件，然后基于触摸测试结果分发相应的触屏事件。hitTestBehavior属性可以设置不同的触摸测试响应模式，影响组件的触摸测试收集结果，最终影响后续的触屏事件分发，具体影响参考HitTestMode枚举说明。
说明：
- 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
- 当Stack组件中有多个节点触摸区域重叠时，如两个节点，默认只会对显示在最上层的节点做触摸测试，若需要显示在下层的节点触发触摸测试，请给显示在上层的节点设置hitTestBehavior为HitTestMode.Transparent。
属性
名称 | 参数类型 | 描述 |
hitTestBehavior | 设置当前组件的触摸测试类型。 默认值： HitTestMode.Default |
HitTestMode枚举说明
名称 | 描述 |
Default | 默认触摸测试效果，自身和子节点都响应触摸测试，但会阻塞兄弟节点的触摸测试。 |
Block | 自身响应触摸测试，阻塞子节点和兄弟节点的触摸测试。 |
Transparent | 自身和子节点都响应触摸测试，不会阻塞兄弟节点的触摸测试。 |
None | 自身不响应触摸测试，不会阻塞子节点和兄弟节点的触摸测试。 |
示例
Text组件设置hitTestBehavior为HitTestMode.Transparent，不会阻塞内层Stack的触摸测试，因此Text和内层Stack的onTouch事件都会触发。
内层Stack设置hitTestBehavior为HitTestMode.Block，会阻塞子节点和外层Button进行触摸测试，因此内层Button和外层Button组件不会响应onTouch事件。
// xxx.ets
@Entry
@Component
struct HitTestBehaviorExample {
build() {
// outer stack
Stack() {
Button('outer button')
.onTouch((event) => {
console.info('outer button touched type: ' + event.type)
})
// inner stack
Stack() {
Button('inner button')
.onTouch((event) => {
console.info('inner button touched type: ' + event.type)
})
}
.width("100%").height("100%")
.hitTestBehavior(HitTestMode.Block)
.onTouch((event) => {
console.info('stack touched type: ' + event.type)
})
Text('Transparent')
.hitTestBehavior(HitTestMode.Transparent)
.width("100%").height("100%")
.onTouch((event) => {
console.info('text touched type: ' + event.type)
})
}.width(300).height(300)
}
}组件背景模糊
为当前组件添加背景模糊效果。
说明：
从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
此接口为系统接口。
属性
名称 | 参数类型 | 描述 |
backgroundBlurStyle | 为当前组件提供一种在背景和内容之间的模糊能力，入参为模糊材质。 该接口支持在ArkTS卡片中使用。 |
BlurStyle
该接口支持在ArkTS卡片中使用。
名称 | 描述 |
Thin | 轻薄材质。 |
Regular | 普通厚度材质。 |
Thick | 厚材质。 |
示例
// xxx.ets
@Entry
@Component
struct Index {
build() {
Column() {
Row() {
Text("Thin Material")
}
.width(350)
.height(300)
.backgroundBlurStyle(BlurStyle.Thin)
.position({ x: "15%", y: "30%" })
}
.height('100%')
.width('100%')
.backgroundImage($r('app.media.bg'))
.backgroundImageSize(ImageSize.Cover)
}
}
分布式迁移标识
组件的分布式迁移标识，指明了该组件在分布式迁移场景下可以将特定状态恢复到对端设备。
说明：
从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
属性
名称 | 参数类型 | 描述 |
restoreId | number | 标记支持分布式迁移的组件Id，用于两端设备组件的配对。同一个应用中各个支持分布式迁移组件的Id必须不同。 |
支持的组件
组件名称 | 起始API版本 | 迁移状态 |
List | 8 | 迁移当前设备显示在顶部ListItem的索引值，迁移后在对端设备上，将迁移索引值对应的ListItem在List中完整地置顶显示。 |
Grid | 9 | 迁移当前设备显示在顶部GridItem的索引值，迁移后在对端设备上，将迁移索引值对应的GridItem在Grid中完整地置顶显示。ScrollBar位置无法迁移。 |
Scroll | 9 | 迁移距顶部滚动的绝对距离。两端设备显示规格不同等原因导致布局不一致，会影响迁移效果。 |
TextArea | 9 | 迁移输入的文本内容和光标位置。 |
TextInput | 9 | 迁移输入的文本内容和光标位置。 |
示例
// xxx.ets
@Entry
@Component
struct RestoreIdExample {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
build() {
Column() {
List({ space: 20 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(Color.Pink)
}
}, item => item)
}
.restoreId(1)
}
}
}标签
已于2023-4-14 15:32:27修改
赞
收藏
回复
相关推荐
