HarmonyOS中一个简单的自定义view

一个列表

• 点击内容后置灰选项。
  

自定义ItemView

• 两个可选的传入参数，message、isComplete

@Component
export struct ItemView {
  @State message: string = 'Hello World';
  @State isComplete: boolean = false

  build() {

    Text(this.message)
      .width('100%')
      .backgroundColor('#d1c4e9')
      .padding(10)
      .margin(4)
      .opacity(this.isComplete ? 0.5 : 1)
      .decoration({
        type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None
      })
      .onClick(() => {
        this.isComplete = !this.isComplete
      })

  }
}

使用

• 通过ForEach加载一个列表

import { ItemView } from './ItemView';

@Entry
@Component
struct Index {
  
  private list: Array<string> = ['内容1', '内容2', '内容3']

  build() {
    Column() {

      ForEach(this.list, (item: string) => {
        ItemView({ message: item })
      })

    }
    .height('100%')
    .width('100%')
  }
}