美文网首页
鸿蒙开发-builder使用

鸿蒙开发-builder使用

作者: 激扬飞雪 | 来源:发表于2024-05-19 21:33 被阅读0次
@Entry
@Component
struct BuilderCase {
  @State message: string = 'Hello World'
  @State formData: FormData = {
    type: '漏油',
    location: '北京',
    time: '10-10'
  }

  @Builder itemLayout($$: CellParam) {
    Row(){
      Text($$.leftTitle)
        .fontSize(18)
      Text($$.rightTitle)
        .fontSize(18)
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
    .backgroundColor(Color.White)
    .borderRadius(12)
    .padding({
      top: 15,
      bottom: 15,
      left: 10,
      right: 10
    })
  }
  build() {
    Row() {

      Column({space: 10}) {
        Text(JSON.stringify(this.formData))
        this.itemLayout({leftTitle: '异常类型', rightTitle: this.formData.type})
        this.itemLayout({leftTitle: '异常地址', rightTitle: this.formData.location})
        this.itemLayout({leftTitle: '异常时间', rightTitle: this.formData.time})
        Button('修改异常位置')
          .onClick(() => {
            this.formData.location = '河北省'
          })
      }
      .margin({
        left: 10,
        right: 10
      })
    }
    .height('100%')
    .backgroundColor(Color.Gray)
  }
}

class FormData {
  type: string = ""
  location: string = ""
  time: string = ""
}

class CellParam {
  leftTitle: string
  rightTitle: string
}
image.png

相关文章

网友评论

      本文标题:鸿蒙开发-builder使用

      本文链接:https://www.haomeiwen.com/subject/sjzwfjtx.html