DetailDialog.ets 1.75 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.icon_arrow_left_white"))
          .rotate({ angle: -90, centerX: '50%', centerY: '50%' })
          .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.Bottom, // 渐变方向
      colors: [['rgba(0,0,0,0)', 0.1], ['#000000', 0.66],
        ['#000000', 1.0]] // 数组末尾元素占比小于1时满足重复着色效果
    })
    .padding({
      top: 20,
      bottom: 30,
      left: 16,
      right: 16
    })

  }
}