鸿蒙9+在TV端焦点封装控制

鸿蒙9+ 现在不支持鸿蒙体系电视，但是以后肯定是必须会支持的，以是直接学arkts就完事了，现在的api9+对焦点控制还是不够直接简便，估计还在完善中，但是可以通过自定义component来实现一下
首先踩坑：

• Row官方说自身属性是可获焦的，但是单独利用是没法获焦的，以是必须在里面添加一个可获焦的子view，但是通常所有的子view都是由获焦和离焦状态的，以是不能所有的子view都加上focusable=true，这里可以通过@Consume来同步整个组件内部的焦点状态, 注意这个修饰符达到同步的条件是参数名千篇一律！！！
  

1. @Component
2. export struct RowFocusable {
4.   compWidth: Length = '90vp'
5.   compHeight: Length = '28vp'
6.   compBorderRadius: Length = '14vp'
7.   alignItems: VerticalAlign = VerticalAlign.Center
8.   justifyContent: FlexAlign = FlexAlign.Center
10.   @Consume focusState: number
12.   @Builder doAddChild(){}
13.   @BuilderParam addChild: () => void = this.doAddChild;
15.   build() {
16.     Row() {
17.       //扯淡的玩意，容器布局的子节点没有获焦能力的话，容器布局就不会获焦，
18.       //但是子节点能获焦的话，那其他所有有焦点态的子节点也必须设置可获焦，那走焦的时候会在子节点之间走动，不合理，非常的不合理，
19.       //竟然没有父组件拦截焦点的方法
20.       Text('').focusable(true)
21.         .onFocus(()=>{
22.           this.focusState = ComponentsConstants.FOCUS_STATE_FOCUSED
23.         })
24.         .onBlur(()=>{
25.           this.focusState = ComponentsConstants.FOCUS_STATE_NORMAL
26.         }).width('0vp')
27.       this.addChild()
28.     }
29.     .width(this.compWidth).height(this.compHeight)
30.     .justifyContent(this.justifyContent)
31.     .alignItems(this.alignItems)
32.     .focusOnTouch(true)
33.     .borderWidth(2)
34.     .borderRadius(this.compBorderRadius)
35.     .borderStyle(BorderStyle.Solid)
36.     .onFocus(()=>{
37.     })
38.     .onBlur(()=>{
39.     })
40.     .stateStyles({
41.       focused: {
42.         .backgroundColor($r('app.color.transparent')
43.       },
44.       normal: {
45.         .backgroundColor($r('app.color.transparent')
46.       },
47.     })
48.   }
49. }

复制代码

自定义component 反面直接设置底子属性，像上面这种只有一个@BuildParam方法的可以直接这样写，在大括号反面接上必要添加的子组件即可：

1. @Component
2. export struct ImageButton {
3.   btnWidth: Length = '90vp'
4.   btnHeight: Length = '28vp'
5.   imgWidth: Length = '15vp'
6.   imgHeight: Length = '15vp'
7.   tvCfg: TextFocusConfig | undefined = undefined
8.   imgCfg: ImageFocusConfig | undefined = undefined
9.   @Provide focusState: number = ComponentsConstants.FOCUS_STATE_NORMAL
11.   @Builder buildImage() {
12.     ImageFocusable({imgCfg: this.imgCfg}).width(this.imgWidth).height(this.imgHeight)
13.   }
15.   @Builder buildText() {
16.     TextFocusable({tvCfg: this.tvCfg})
17.   }
19.   build() {
20.     RowFocusable({ compWidth: this.btnWidth, compHeight: this.btnHeight }) {
21.       this.buildImage()
22.       this.buildText()
23.     }
24.   }
25. }
27. //自定义，统一设置占位图
28. @Component
29. export struct ImageFocusable {
31.   @Consume focusState: number
32.   imgCfg: ImageFocusConfig|undefined
34.   build() {
35.     Image(this.focusState==ComponentsConstants.FOCUS_STATE_FOCUSED ? this.imgCfg.imgResFocused : this.imgCfg.imgResNormal)
36.       .objectFit(ImageFit.Contain)
37.       .enabled(true)
38.       .alt($r('app.media.poster_placeholder'))
39.   }
40. }
42. //这里定义成config类，是为了方便组件层级太深时，更好的透传，比如上面ImageButton
43. export class ImageFocusConfig {
44.   imgResNormal: ResourceStr
45.   imgResFocused: ResourceStr
47.   constructor(imgResNormal,imgResFocused) {
48.     this.imgResNormal = imgResNormal
49.     this.imgResFocused = imgResFocused
50.   }
51. }
53. @Component
54. export struct TextFocusable {
55.   @Consume focusState: number
57.   tvCfg: TextFocusConfig | undefined
59.   build() {
60.     if (this.tvCfg != null) {
61.       Text(this.tvCfg!.text)
62.         .fontColor(this.focusState == ComponentsConstants.FOCUS_STATE_FOCUSED ? this.tvCfg!.focusColor : this.tvCfg.normalColor)
63.         .textAlign(this.tvCfg.textAlign)
64.         .maxLines(this.tvCfg.maxLine)
65.         .textOverflow({overflow: this.tvCfg.textOverFlow})
66.         .align(Alignment.Center)
67.         .width(this.tvCfg.width)
68.         .height(this.tvCfg.height)
69.         .fontSize(this.tvCfg.textSize)
70.     }
71.   }
72. }
74. export class TextFocusConfig {
75.   text: ResourceStr
76.   textSize: Length
77.   width: Length
78.   height: Length
79.   normalColor: ResourceColor
80.   focusColor: ResourceColor
81.   selectColor: ResourceColor
82.   textAlign: TextAlign
83.   maxLine: number
84.   textOverFlow: TextOverflow
86.   constructor()
87.   constructor(text?)
88.   constructor(text?, tvSize?)
89.   constructor(text?, tvSize?, width?, height?)
90.   constructor(text?, tvSize?, width?, height?, normalColor?, focusColor?, selectColor?)
91.   constructor(text?, tvSize?, width?, height?, normalColor?, focusColor?, selectColor?, textAlign?, maxLine?, textOverFlow?) {
92.     this.text = text ?? ''
93.     this.textSize = tvSize ?? '14vp'
94.     this.width = width ?? 'auto'
95.     this.height = height ?? 'auto'
96.     this.normalColor = normalColor ?? $r('app.color.white_70')
97.     this.focusColor = focusColor ?? $r('app.color.white_100')
98.     this.selectColor = selectColor ?? $r('app.color.tv_color_selected')
99.     this.textAlign = textAlign ?? TextAlign.Start
100.     this.maxLine = maxLine ?? 1
101.     this.textOverFlow = textOverFlow ?? TextOverflow.Ellipsis
102.   }
104.   setText(text): TextFocusConfig {
105.     this.text = text
106.     return this
107.   }
109.   setTextSize(size): TextFocusConfig {
110.     this.textSize = size
111.     return this
112.   }
114.   setWith(w): TextFocusConfig {
115.     this.width = w
116.     return this
117.   }
119.   setHeight(h): TextFocusConfig {
120.     this.height = h
121.     return this
122.   }
123. }

复制代码

像自定义text这种组件，很多属性都没法直接设置，以是必要添加自己定名的属性，然后也没有焦点态的方法，以是只能通过@Consume focusState: number 来同步父子组件之间的焦点状态，别的封装成config的利益还是挺多的，自我挖掘吧

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。