HarmonyOS 鸿蒙Next:在ListItem内,如何监听到ItemModel的某个属性的值的变化,以及根据itemModel里的isShow值的变化决定是否显示ListItem内的某一个组件。我现在在ListItem的组件里给itemModel添加了@ObjectL

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next:在ListItem内,如何监听到ItemModel的某个属性的值的变化,以及根据itemModel里的isShow值的变化决定是否显示ListItem内的某一个组件。我现在在ListItem的组件里给itemModel添加了@ObjectL 在ListItem内,如何监听到ItemModel的某个属性的值的变化
ListItem内的某一个组件,根据itemModel里的isShow值的变化决定是否显示
我现在在ListItem的组件里给itemModel添加了@ObjectLink,也给itemModel类添加了@Observed,但似乎没有效果


更多关于HarmonyOS 鸿蒙Next:在ListItem内,如何监听到ItemModel的某个属性的值的变化,以及根据itemModel里的isShow值的变化决定是否显示ListItem内的某一个组件。我现在在ListItem的组件里给itemModel添加了@ObjectL的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

文档:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/properly-use-state-management-to-develope.md#使用observed装饰或被声明为状态变量的类对象订阅组件

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5#对象数组

参考这个demo

@Observed
export class ControlList extends Array<Controls> {
  constructor() {
    super();
  }
}

@Observed
export class Controls {
  uuid: string
  control_type: string
  control_weights: string
  control_name: string
  control_status: string
  control_location: string
  control_menu_levels: string
  control_position: string
  control_h_name: string
  control_value: string
  isSelect: boolean
  constructor(param: Controls) {
    this.uuid = param.uuid
    this.control_type = param.control_type
    this.control_weights = param.control_weights
    this.control_name = param.control_name
    this.control_status = param.control_status
    this.control_location = param.control_location
    this.control_menu_levels = param.control_menu_levels
    this.control_position = param.control_position
    this.control_h_name = param.control_h_name
    this.control_value = param.control_value
    this.isSelect = param.isSelect
  }
}

@Component
export struct TestPage {
  @ObjectLink dataSource: ControlList
  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.dataSource, (item: Controls, index) => {
          ListItem() {
            ControlItem({
              item: item,
              dataSource: this.dataSource,
            })
          }
        })
      }.margin({ top: 10, bottom: 10 })
    }
  }
}

@Component
struct ControlItem {
  @ObjectLink item: Controls
  @Link dataSource: ControlList
  build() {
    Row() {
      if (this.item.isSelect) {
        Row() {
          Text(this.item.control_h_name).fontSize(15).fontColor('#B11F1A')
          Image($r('app.media.startIcon')).width(20).height(20)
        }
        .width('100%')
        .borderRadius(18)
        .borderWidth(1)
        .borderColor('#FFAE2921')
        .padding(5)
        .justifyContent(FlexAlign.SpaceBetween

更多关于HarmonyOS 鸿蒙Next:在ListItem内,如何监听到ItemModel的某个属性的值的变化,以及根据itemModel里的isShow值的变化决定是否显示ListItem内的某一个组件。我现在在ListItem的组件里给itemModel添加了@ObjectL的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中,若想在ListItem内监听到ItemModel的某个属性(如isShow)的值的变化,并据此决定是否显示ListItem内的某一个组件,可以通过数据绑定和观察者模式来实现。

具体来说,你需要确保ItemModel类中的属性(如isShow)使用了@ObjectLink@Observable注解(取决于鸿蒙的具体版本和API设计),这样当属性值变化时,能够触发UI的更新。

  1. 数据绑定:在ListItem的组件中,通过数据绑定将ItemModel的属性与UI组件的属性关联起来。例如,如果有一个Text组件需要根据isShow的值来决定是否显示,可以在Text组件的visible属性上绑定itemModel.isShow

  2. 监听属性变化:由于ItemModel的属性被标记为可观察(使用了@ObjectLink@Observable),当属性值变化时,系统会自动通知绑定的UI组件进行更新。

  3. 条件渲染:在组件的模板中,使用条件语句(如if)来根据isShow的值决定是否渲染某个组件。

如果上述方法未能解决你的问题,可能是由于版本差异或特定实现细节导致。此时,建议直接查阅鸿蒙系统的官方文档或联系官网客服获取更专业的帮助。官网地址是:https://www.itying.com/category-93-b0.html

回到顶部