ToB企服应用市场:ToB评测及商务社交产业平台

标题: 鸿蒙9+在TV端焦点封装控制 [打印本页]
作者: 南七星之家    时间: 2024-7-31 09:32
标题: 鸿蒙9+在TV端焦点封装控制
鸿蒙9+ 现在不支持鸿蒙体系电视，但是以后肯定是必须会支持的，以是直接学arkts就完事了，现在的api9+对焦点控制还是不够直接简便，估计还在完善中，但是可以通过自定义component来实现一下
首先踩坑：
  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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4