OpenHarmony开发者论坛

标题: 在openHarmony中，如何通过遥控器左右切换自定义TabBar的焦点（TV）? [打印本页]

作者: 丝攻积木 时间: 2024-5-27 17:11
标题: 在openHarmony中，如何通过遥控器左右切换自定义TabBar的焦点（TV）?
【问题描述】
问题现象和发生的背景
不知如何使用现有的焦点逻辑和onKeyEvent来进行焦点的左右移动

相关的代码，截图，日志信息
@Builder tabBuilder(index: number,  label:string , icon: string ,isDefaultFocus:boolean) {
  Column() {
Image(icon)
   .width(this.currentIndex === index ? 170:160)
   .height(this.currentIndex === index ? 170:160)
   .margin({ top:10,bottom: 5})
   .objectFit(ImageFit.Contain)
Text(label)
   .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
   .fontSize(this.currentIndex === index ? 40:30)
   // .focusable(true)
   // .focusOnTouch(true)
  }
  .id(index.toString())
  .defaultFocus(isDefaultFocus)
  .onFocus(()=>{
hilog.info(0x0000, 'testTag', 'Focused is '+this.currentIndex);
  })
  .focusable(true)
  .focusOnTouch(true)
  .width(this.currentIndex === index ?225:205)
  .height(this.currentIndex === index ?240:215)
  .justifyContent(FlexAlign.Center)
  .margin(10)
}

build() {
Column() {
Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
   ForEach(this.labels,(item:string,index:number) =>{

      TabContent() {
      Column() {
            Text("This Page is"+index)
            .fontSize(140)
            .fontColor(Color.Black)
            .align(Alignment.Center)

      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Green)
      }.tabBar(this.tabBuilder(index, item ,  this.icons[index] , index==0))
   })
}
.scrollable(true)
.vertical(false)
.barMode(BarMode.Scrollable)
.barHeight(250)
.onChange((index: number) => {
   this.currentIndex = index
})
.width('100%')
.height('100%')

  }
  .onKeyEvent((event)=>{
if(event.type == KeyType.Down && event.keyCode == KeyCode.KEYCODE_DPAD_LEFT){
   if(this.currentIndex != 0){
      this.currentIndex--
      this.controller.changeIndex(this.currentIndex)//切换页面
      let boole =focusControl.requestFocus(this.currentIndex.toString())//问题切换焦点不成功,bools是false 找不到相应的TabBar id
      hilog.info(0x0000, 'testTag', 'focusControl.requestFocus '+boole);
   }
   return
//最左边就不
}else if(event.type == KeyType.Down && event.keyCode == KeyCode.KEYCODE_DPAD_RIGHT){
   if(this.currentIndex +1 <= this.labels.length ){//4
      this.currentIndex++
      this.controller.changeIndex(this.currentIndex)//切换页面
      let boole =focusControl.requestFocus(this.currentIndex.toString())
      hilog.info(0x0000, 'testTag', 'focusControl.requestFocus '+boole);
   }
   return

}
  })
  .onClick(()=>{
this.content.startAbility(this.wants[this.currentIndex])
  })
  .width('100%')
  .backgroundColor(Color.Gray)
}

我尝试过的解决方法和结果
查找文档得知，似乎requestFocus仅支持这些组件：TextInput、TextArea、Search、Button、Text、Image、List、Grid。不知可还有其他方法达到：通过遥控器的左右切换自定义TabBar的焦点.

我想要达到的结果
  TabBar的onFocus事件触发

【运行环境】
DevEvoStudio版本：4.1
SDK版本：4.1

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)