HarmonyOS UI绘制装饰器无法通知刷新的问题

现在有一个界面,我发现在struct层级定义的@State变量,他的变动通知,不会影响到 struct内部的 @Builder装饰的方法。

具体代码如下

import { ContactTabs } from '@ohos/contact/src/main/ets/pages/ContactTabs';
import { ConversationListPage } from '@ohos/message/Index';
import { SocialCircle, WorkbenchPage } from '@ohos/socialcircle';
import { HomeTab } from '../views/HomeTab'
import { ValuesBucket } from '@kit.ArkData';

@Entry
@Component
export struct HomePage{
  private swiperController: SwiperController = new SwiperController()
  pages:Array<number> = [0,1,2];
  @State selectIndex :number = 0;
  build() {
    Column(){
      Swiper(this.swiperController){
        ForEach(this.pages, (item:number, index)=>{
            if(index == 0){
              ConversationListPage()
            }else if(index == 1){
              WorkbenchPage()
            }else if(index == 2){
              ContactTabs()
            }
        })

      }.width("100%")
      .layoutWeight(1)
      .autoPlay(false)
      .index(this.selectIndex)
      .loop(false)
      .indicator(false)
      .onChange(index=>{
        this.selectIndex = index;
      })

      Row(){
        this.bottomTab(0, this.selectIndex == 0)
        this.bottomTab(1, this.selectIndex == 1)
        this.bottomTab(2, this.selectIndex == 2)
      }.width("100%")
      .height(54)
    }
  }

  @Builder
  private bottomTab(index:number, selected:boolean){
    Column(){
      Image(selected?this.tabConfig[index][2]:this.tabConfig[index][1])
        .width(24)
        .height(24)
        .margin({top:8})

      Text(this.tabConfig[index][0])
        .fontSize(10)
        .fontColor(selected?0x05b0a2:0xa1a3a6)
        .margin({top:2})

    }.height(54)
    .layoutWeight(1)
    .alignItems(HorizontalAlign.Center)
    .onClick(()=>{
      this.selectIndex = index;
    })
  }

  tabConfig: (string | Resource )[][] = [
    ["消息", $r('app.media.im_tab_msg_ic_nor'), $r('app.media.im_tab_msg_ic_sle')],
    ["工作台", $r('app.media.im_tab_work_ic_nor'), $r('app.media.im_tab_work_ic_sle')],
    ["通讯录", $r('app.media.im_tab_contact_ic_nor'), $r('app.media.im_tab_contact_ic_sle')],
    ]
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.

该页面的功能,主要是点击底部tab,实现页面的切换。截图如下。

我发现,不论我怎么修改这个selectIndex, 这个private bottomTab(index:number, selected:boolean) 函数不会被触发执行。

请问,这里该怎么修改,才能刷新bottomTab

HarmonyOS UI绘制装饰器无法通知刷新的问题 -鸿蒙开发者社区

HarmonyOS
2025-01-09 13:53:14
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
fox280

参考文档:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builder-V5

Demo更改如下

class Tmp {
  tabIndex:number = 0
  isSelect:boolean = true

}
@Entry
@Component
struct HomePage{
  private swiperController: SwiperController = new SwiperController()
  pages:Array<number> = [0,1,2];
  @State selectIndex :number = 0;
   @State tabConfig: (string | Resource )[][] = [
    ["消息", $r('app.media.icon'), $r('app.media.hello')],
    ["工作台", $r('app.media.icon'), $r('app.media.hello')],
    ["通讯录", $r('app.media.icon'), $r('app.media.hello')],
  ]
  build() {
    Column(){
      Swiper(this.swiperController){
        ForEach(this.pages, (item:number, index)=>{
          if(index == 0){
           Text('1111')
          }else if(index == 1){
            Text('222')
          }else if(index == 2){
            Text('333')
          }
        })

      }.width("100%")
      .layoutWeight(1)
      .autoPlay(false)
      .index(this.selectIndex)
      .loop(false)
      .indicator(false)
      .onChange(index=>{
        this.selectIndex = index;
      })

      Row(){
        this.bottomTab({tabIndex: 0,isSelect: this.selectIndex == 0})
        this.bottomTab({tabIndex: 1,isSelect: this.selectIndex == 1})
        this.bottomTab({tabIndex: 2,isSelect: this.selectIndex == 2})
      }.width("100%")
      .height(54)
    }
  }

  @Builder
  bottomTab($$: Tmp){
    Column(){

      Image($$.isSelect?this.tabConfig[$$.tabIndex][2]:this.tabConfig[$$.tabIndex][1])
        .width(24)
        .height(24)
        .margin({top:8})

      Text(this.tabConfig[$$.tabIndex][0])
        .fontSize(10)
        .fontColor($$.isSelect?0x05b0a2:0xa1a3a6)
        .margin({top:2})

    }.height(54)
    .layoutWeight(1)
    .alignItems(HorizontalAlign.Center)
    .onClick(()=>{
      this.selectIndex = $$.tabIndex;
      console.log("this.Index:",$$.tabIndex.toString())
      console.log("this.selectIndex:",this.selectIndex.toString())
      console.log("selected:",$$.isSelect.toString())
    })
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
分享
微博
QQ
微信
回复
2025-01-09 16:27:27
相关问题
状态装饰 ui刷新问题
3091浏览 • 1回复 待解决
HarmonyOS 装饰刷新问题
862浏览 • 1回复 待解决
HarmonyOS LazyForEach问题刷新UI问题
937浏览 • 1回复 待解决
HarmonyOS 装饰问题class
794浏览 • 1回复 待解决
HarmonyOS 关于组件装饰问题
911浏览 • 1回复 待解决
HarmonyOS @Observed装饰问题咨询
876浏览 • 1回复 待解决
HarmonyOS UI刷新问题
1355浏览 • 0回复 待解决
HarmonyOS @Builder UI刷新问题
737浏览 • 1回复 待解决
HarmonyOS UI刷新问题
785浏览 • 1回复 待解决
HarmonyOS 自定义装饰this指向问题
821浏览 • 1回复 待解决
自定义装饰使用问题
1466浏览 • 1回复 待解决
HarmonyOS 通知列表刷新事件
714浏览 • 1回复 待解决
HarmonyOS UI刷新
799浏览 • 1回复 待解决
HarmonyOS 主线程刷新UI
1116浏览 • 1回复 待解决