HarmonyOS鸿蒙Next中怎么让右上角菜单项的图标实时变化？

HarmonyOS鸿蒙Next中怎么让右上角菜单项的图标实时变化？

@Builder
export function ItemViewBuilder(name: string, param: Object) {
  ItemView()
}


@Component
struct ItemView {
  @StorageProp("topRectHeight") topRectHeight : number = 0
  @State lockStatus: boolean = true

  @State LockItemMenu: NavigationMenuItem = {value: "Lock", icon: this.lockStatus ? $r("app.media.lock") : $r("app.media.unlock"), action: ()=>{
    this.lockStatus = !this.lockStatus
  }}

  build() {
    NavDestination(){

    }
    .menus([this.LockItemMenu])
    .padding({ top: this.getUIContext().px2vp(this.topRectHeight) })
  }
}

更多关于HarmonyOS鸿蒙Next中怎么让右上角菜单项的图标实时变化？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

【解决方案】

你好，你可以参考以下链接：navigation页面布局，在demo基础上进行修改，在NavigationMenus中做三元表达式的判断，如下：

@Builder
NavigationMenus() {
  Row() {
    Image(this.lockStatus ? $r("app.media.img") : $r("app.media.img_1"))
      .width(24)
      .height(24)
  }
}

更多关于HarmonyOS鸿蒙Next中怎么让右上角菜单项的图标实时变化？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


不要直接在定义时使用三元表达式，要在需要替换的时候动态进行属性赋值：

lock: Resource = $r("app.media.lock")
unLock:Resource = $r("app.media.unlock")

@State lockStatus: boolean = true
@State LockItemMenu: NavigationMenuItem = {
  value: "Lock",
  icon: this.lock,
  action: () => {
    this.lockStatus = !this.lockStatus
    if (this.lockStatus) {
      this.LockItemMenu.icon = this.lock
    } else {
      this.LockItemMenu.icon = this.unLock
    }
  }
}

另外系统也提供一些symbol供开发者使用：点此链接

lock:SymbolGlyphModifier = new SymbolGlyphModifier($r("sys.symbol.lock_fill"))
unLock:SymbolGlyphModifier = new SymbolGlyphModifier($r("sys.symbol.lock_open_fill"))

@State LockItemMenu: NavigationMenuItem = {
  // ... 省略一些属性
  symbolIcon: this.lock,
  // ... 省略action
}

在HarmonyOS Next中，通过StateManagement机制管理菜单项图标状态。使用@State装饰器声明图标资源变量，当状态变化时系统自动触发UI更新。在build()函数中，将状态变量绑定到菜单项的icon属性，例如：

[@State](/user/State) iconResource: Resource = $r('app.icon.default')

build() {
  // 菜单项配置
  MenuItem({ icon: this.iconResource })
}

通过状态变更方法修改iconResource值即可实现图标实时切换，无需手动刷新界面。支持动态加载不同图标资源，确保状态驱动视图更新。

在HarmonyOS Next中，右上角菜单项图标需要实时变化时，你的代码存在状态更新后菜单项未刷新的问题。这是因为LockItemMenu在初始化后不会自动响应lockStatus的变化。

解决方案如下：

  1. 使用计算属性替代静态定义：
getLockItemMenu(): NavigationMenuItem {
  return {
    value: "Lock",
    icon: this.lockStatus ? $r("app.media.lock") : $r("app.media.unlock"),
    action: () => {
      this.lockStatus = !this.lockStatus
    }
  }
}
  1. 在build方法中动态绑定：
build() {
  NavDestination(){
    // 页面内容
  }
  .menus([this.getLockItemMenu()]) // 每次build都会重新计算
  .padding({ top: this.getUIContext().px2vp(this.topRectHeight) })
}
  1. 或者使用@Watch监听状态变化：
[@Watch](/user/Watch)('lockStatus')
onLockStatusChange() {
  // 强制更新菜单
  this.menuItems = [this.getLockItemMenu()]
}

关键点在于确保每次状态变化时都能重新计算菜单项的icon属性，这样图标就会根据lockStatus的当前值实时更新。

回到顶部