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')],
    ]
}

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

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

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

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

HarmonyOS
2天前
浏览
收藏 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())
    })
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
状态装饰 ui刷新问题
2563浏览 • 1回复 待解决
HarmonyOS 装饰刷新问题
339浏览 • 1回复 待解决
HarmonyOS LazyForEach问题刷新UI问题
189浏览 • 1回复 待解决
HarmonyOS 装饰问题class
173浏览 • 1回复 待解决
HarmonyOS 关于组件装饰问题
260浏览 • 1回复 待解决
HarmonyOS @Observed装饰问题咨询
203浏览 • 1回复 待解决
HarmonyOS @Builder UI刷新问题
130浏览 • 1回复 待解决
HarmonyOS UI刷新问题
170浏览 • 1回复 待解决
HarmonyOS UI刷新问题
678浏览 • 0回复 待解决
HarmonyOS 自定义装饰this指向问题
164浏览 • 1回复 待解决
自定义装饰使用问题
931浏览 • 1回复 待解决
HarmonyOS 通知列表刷新事件
241浏览 • 1回复 待解决
HarmonyOS UI刷新
229浏览 • 1回复 待解决
HarmonyOS 主线程刷新UI
460浏览 • 1回复 待解决