鸿蒙9+在TV端焦点封装控制
鸿蒙9+ 现在不支持鸿蒙体系电视，但是以后肯定是必须会支持的，以是直接学arkts就完事了，现在的api9+对焦点控制还是不够直接简便，估计还在完善中，但是可以通过自定义component来实现一下首先踩坑：
[*]Row官方说自身属性是可获焦的，但是单独利用是没法获焦的，以是必须在里面添加一个可获焦的子view，但是通常所有的子view都是由获焦和离焦状态的，以是不能所有的子view都加上focusable=true，这里可以通过@Consume来同步整个组件内部的焦点状态, 注意这个修饰符达到同步的条件是参数名千篇一律！！！
@Component
export struct RowFocusable {
compWidth: Length = '90vp'
compHeight: Length = '28vp'
compBorderRadius: Length = '14vp'
alignItems: VerticalAlign = VerticalAlign.Center
justifyContent: FlexAlign = FlexAlign.Center
@Consume focusState: number
@Builder doAddChild(){}
@BuilderParam addChild: () => void = this.doAddChild;
build() {
Row() {
//扯淡的玩意，容器布局的子节点没有获焦能力的话，容器布局就不会获焦，
//但是子节点能获焦的话，那其他所有有焦点态的子节点也必须设置可获焦，那走焦的时候会在子节点之间走动，不合理，非常的不合理，
//竟然没有父组件拦截焦点的方法
Text('').focusable(true)
.onFocus(()=>{
this.focusState = ComponentsConstants.FOCUS_STATE_FOCUSED
})
.onBlur(()=>{
this.focusState = ComponentsConstants.FOCUS_STATE_NORMAL
}).width('0vp')
this.addChild()
}
.width(this.compWidth).height(this.compHeight)
.justifyContent(this.justifyContent)
.alignItems(this.alignItems)
.focusOnTouch(true)
.borderWidth(2)
.borderRadius(this.compBorderRadius)
.borderStyle(BorderStyle.Solid)
.onFocus(()=>{
})
.onBlur(()=>{
})
.stateStyles({
focused: {
.backgroundColor($r('app.color.transparent')
},
normal: {
.backgroundColor($r('app.color.transparent')
},
})
}
}
自定义component 反面直接设置底子属性，像上面这种只有一个@BuildParam方法的可以直接这样写，在大括号反面接上必要添加的子组件即可：
@Component
export struct ImageButton {
btnWidth: Length = '90vp'
btnHeight: Length = '28vp'
imgWidth: Length = '15vp'
imgHeight: Length = '15vp'
tvCfg: TextFocusConfig | undefined = undefined
imgCfg: ImageFocusConfig | undefined = undefined
@Provide focusState: number = ComponentsConstants.FOCUS_STATE_NORMAL
@Builder buildImage() {
ImageFocusable({imgCfg: this.imgCfg}).width(this.imgWidth).height(this.imgHeight)
}
@Builder buildText() {
TextFocusable({tvCfg: this.tvCfg})
}
build() {
RowFocusable({ compWidth: this.btnWidth, compHeight: this.btnHeight }) {
this.buildImage()
this.buildText()
}
}
}
//自定义，统一设置占位图
@Component
export struct ImageFocusable {
@Consume focusState: number
imgCfg: ImageFocusConfig|undefined
build() {
Image(this.focusState==ComponentsConstants.FOCUS_STATE_FOCUSED ? this.imgCfg.imgResFocused : this.imgCfg.imgResNormal)
.objectFit(ImageFit.Contain)
.enabled(true)
.alt($r('app.media.poster_placeholder'))
}
}
//这里定义成config类，是为了方便组件层级太深时，更好的透传，比如上面ImageButton
export class ImageFocusConfig {
imgResNormal: ResourceStr
imgResFocused: ResourceStr
constructor(imgResNormal,imgResFocused) {
this.imgResNormal = imgResNormal
this.imgResFocused = imgResFocused
}
}
@Component
export struct TextFocusable {
@Consume focusState: number
tvCfg: TextFocusConfig | undefined
build() {
if (this.tvCfg != null) {
Text(this.tvCfg!.text)
.fontColor(this.focusState == ComponentsConstants.FOCUS_STATE_FOCUSED ? this.tvCfg!.focusColor : this.tvCfg.normalColor)
.textAlign(this.tvCfg.textAlign)
.maxLines(this.tvCfg.maxLine)
.textOverflow({overflow: this.tvCfg.textOverFlow})
.align(Alignment.Center)
.width(this.tvCfg.width)
.height(this.tvCfg.height)
.fontSize(this.tvCfg.textSize)
}
}
}
export class TextFocusConfig {
text: ResourceStr
textSize: Length
width: Length
height: Length
normalColor: ResourceColor
focusColor: ResourceColor
selectColor: ResourceColor
textAlign: TextAlign
maxLine: number
textOverFlow: TextOverflow
constructor()
constructor(text?)
constructor(text?, tvSize?)
constructor(text?, tvSize?, width?, height?)
constructor(text?, tvSize?, width?, height?, normalColor?, focusColor?, selectColor?)
constructor(text?, tvSize?, width?, height?, normalColor?, focusColor?, selectColor?, textAlign?, maxLine?, textOverFlow?) {
this.text = text ?? ''
this.textSize = tvSize ?? '14vp'
this.width = width ?? 'auto'
this.height = height ?? 'auto'
this.normalColor = normalColor ?? $r('app.color.white_70')
this.focusColor = focusColor ?? $r('app.color.white_100')
this.selectColor = selectColor ?? $r('app.color.tv_color_selected')
this.textAlign = textAlign ?? TextAlign.Start
this.maxLine = maxLine ?? 1
this.textOverFlow = textOverFlow ?? TextOverflow.Ellipsis
}
setText(text): TextFocusConfig {
this.text = text
return this
}
setTextSize(size): TextFocusConfig {
this.textSize = size
return this
}
setWith(w): TextFocusConfig {
this.width = w
return this
}
setHeight(h): TextFocusConfig {
this.height = h
return this
}
}
像自定义text这种组件，很多属性都没法直接设置，以是必要添加自己定名的属性，然后也没有焦点态的方法，以是只能通过@Consume focusState: number 来同步父子组件之间的焦点状态，别的封装成config的利益还是挺多的，自我挖掘吧
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]