• Lv0
    粉丝0

积分1 / 贡献0

提问1答案被采纳0文章0

作者动态

    在openHarmony中,如何通过遥控器左右切换自定义TabBar的焦点(TV)?

    丝攻积木 显示全部楼层 发表于 2024-5-27 17:11:32
    【问题描述】
    问题现象和发生的背景
    不知如何使用现有的焦点逻辑和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仅支持这些组件:TextInputTextAreaSearchButtonTextImageListGrid。不知可还有其他方法达到:通过遥控器的左右切换自定义TabBar的焦点.

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

    【运行环境】
    DevEvoStudio版本:4.1
    SDK版本:4.1
    您尚未登录,无法参与评论,登录后可以:
    参与开源共建问题交流
    认同或收藏高质量问答
    获取积分成为开源共建先驱

    Copyright   ©2023  OpenHarmony开发者论坛  京ICP备2020036654号-3 |技术支持 Discuz!

    返回顶部