DetailDialog.ets 1.73 KB
@Preview
@CustomDialog
export struct DetailDialog {
  controller: CustomDialogController
  @Prop name: string
  @Prop title: string
  @Prop summary: string
  @Link isOpenDetail: boolean

  build() {

    Column() {
      Scroll() {
        Column() {
          if (this.name) {
            Text(`@${this.name}`)
              .fontColor(Color.White)
              .fontSize(14)
              .fontWeight(600)
              .lineHeight(17)
              .margin({ top: 8 })
          }

          if (this.title) {
            Text(this.title)
              .fontColor(Color.White)
              .fontSize(16)
              .fontWeight(600)
              .margin({ top: 8 })
              .lineHeight(24)
          }

          Text(this.summary)
            .fontColor(Color.White)
            .fontSize(14)
            .fontWeight(400)
            .margin({ top: 8 })
            .lineHeight(21)
        }
        .alignItems(HorizontalAlign.Start)

      }
      .height(200)

      Row() {
        Image($r('app.media.ic_close'))
          .height(24).margin({ top: 20 }).onClick(() => {
          this.controller.close()
          if (this.isOpenDetail) {
            this.isOpenDetail = !this.isOpenDetail
          }
        })
      }.width('100%').justifyContent(FlexAlign.Center)

    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
    // .backgroundColor('#80000000')
    // .linearGradient({
    //   direction: GradientDirection.Top, // 渐变方向
    //   repeating: false, // 渐变颜色是否重复
    //   colors: [['rgba(0, 0, 0, 0.1)', 0.0], ['rgba(0, 0, 0, 0)', 1.0]] // 数组末尾元素占比小于1时满足重复着色效果
    // })
    .padding({
      top: 20,
      bottom: 30,
      left: 16,
      right: 16
    })

  }
}