HarmonyOs透明弹窗(选择照片弹窗样式)

1.鸿蒙中需要实现一个如下图的弹窗

2.需求拆解：

由上图中可以得出，只需要三个Text组件依次向下排列，弹窗背景设置透明即可，弹窗代码如下(仅展示弹窗样式)：

/***
 * 自定义选择图片弹窗
 *
 * 外部定义需要导出
 */
@CustomDialog //自定义弹窗
export struct SelectImageDialog{
  viewWidth: string = '96%' // 视图宽度 便于统一调整
  viewRadius: number = 10 // 视图中可见的圆角 便于统一调整
  centerPadding: number = 10 // 按钮的上下内边距 便于统一调整按钮高度
  controller: CustomDialogController // 自定义弹窗控制器
  build() {
    Column(){
      // 拍照按钮
      Text('拍照')
        .width(this.viewWidth)
        .backgroundColor('#EFEFF1')
        .fontColor('#578CDA')
        .textAlign(TextAlign.Center)
        .padding({
          top: this.centerPadding,
          bottom: this.centerPadding
        })
        .margin({
          left: 10,
          right: 10
        })
        .borderRadius({
          topLeft: this.viewRadius,
          topRight: this.viewRadius
        })
        .onClick(()=>{
          // 跳转拍照逻辑

        })

      // 分割线
      Line()
        .width(this.viewWidth)
        .backgroundColor('#BFBFC0')
        .height(0.5)

      // 相册按钮
      Text('相册')
        .width(this.viewWidth)
        .backgroundColor('#EFEFF1')
        .fontColor('#578CDA')
        .textAlign(TextAlign.Center)
        .padding({
          top: this.centerPadding,
          bottom: this.centerPadding
        })
        .borderRadius({
          bottomLeft: this.viewRadius,
          bottomRight: this.viewRadius
        })
        .onClick(()=>{
          // 跳转到相册逻辑

        })

      // 取消按钮
      Text('取消')
        .width(this.viewWidth)
        .backgroundColor('#FFF')
        .fontColor('#3677F4')
        .textAlign(TextAlign.Center)
        .border({
          radius: this.viewRadius
        })
        .padding({
          top: this.centerPadding,
          bottom: this.centerPadding
        })
        .margin({
          top: 10
        })
        .onClick(()=>{
          // 通过弹窗控制器关闭弹窗
          this.controller.close()
        })
    }
  }
}

3.代码使用

自定义弹窗的使用，代码如下(仅展示弹窗样式)：

import router from '@ohos.router'
import CommonConstants from '../../constants/CommonConstants'
import { SelectImageDialog } from './dialog/SelectImageDialog'

/**
 * 显示用户信息页面
 * 
 */
@Entry
@Component
struct UserInfoPages {

  @State userName: string = "用户昵称"
  @State userHead: string = "https://img1.baidu.com/it/u=1437670132,3069407764&fm=253&fmt=auto&app=138&f=JPEG?w=516&h=500"
  // 弹窗控制器
  dialogController: CustomDialogController = new CustomDialogController({
    builder: SelectImageDialog({}), //
    alignment: DialogAlignment.Bottom, // 弹窗底部弹出
    backgroundColor: Color.Transparent, // 弹窗的背景颜色设置为透明色
    borderColor: Color.Transparent, // 弹窗的边框颜色设置为透明色
    cornerRadius: 0, // 弹窗的圆角半径
    customStyle: true, // 是否使用自定义样式？(很重要，未设置会有默认的背景色)
    width: '100%', // 弹窗宽度
    offset: { // 偏移量
      dx: 0,
      dy: -24 // 太靠近底部会有一部分遮挡
    }
  })

  build() {
    Column() {
      // 自定义标题视图
      TitleView({
        title: '个人信息',
        quitIcon: 'app.media.icon_exit_black'
      })
      // 自定义用户信息视图
      UserInfoView({
        name: '头像',
        rightIcon: this.userHead,
      })
        .onClick(()=>{
          this.dialogController.open()
        })
      // 自定义用户信息视图
      UserInfoView({
        name: '昵称',
        rightText: this.userName,
        centerPadding: 15
      })
      .onClick(() => {
        // 跳转到修改用户昵称的页面
        router.pushUrl({ url: CommonConstants.USER_EDIT_PAGES })
      })
    }
  }

}

/**
 * 标题栏
 */
@Component
struct TitleView{

  @Prop title: string// 标题栏标题
  @Prop line: boolean = true// 标题栏是否显示分割线？默认显示
  @Prop quitIcon: string// 退出图标 默认不显示
  @Prop optionIcon: string// 选项图标 默认不显示
  // 选项按钮回调
  clickOption: (() => void) | null = null
  // 退出按钮回调
  clickQuit: (() => void) | null = ()=>{
    router.back()
  }

  build(){
    Column(){
      RelativeContainer(){
        // 标题
        Text(this.title)
          .width('100%')
          .textAlign(TextAlign.Center)
          .maxLines(1)
          .id("title")
          .ellipsisMode(EllipsisMode.END)
          .margin({
            bottom: 8
          })
          .alignRules({
            bottom: {
              anchor: '__container__',
              align: VerticalAlign.Bottom
            },
            left: {
              anchor: '__container__',
              align: HorizontalAlign.Start
            },

            right: {
              anchor: '__container__',
              align: HorizontalAlign.End
            }
          })

        //退出按钮
        if (this.quitIcon){
          Image($r(this.quitIcon))
            .width(9)
            .objectFit(ImageFit.Contain)
            .id("quitIcon")
            .margin({
              left: 16,
              bottom: 12
            })
            .onClick(this.clickQuit)
            .alignRules({
              bottom: {
                anchor: '__container__',
                align: VerticalAlign.Bottom
              },
              left: {
                anchor: '__container__',
                align: HorizontalAlign.Start
              }
            })
        }

        //选项
        if (this.optionIcon){
          Image($r(this.optionIcon))
            .width(24)
            .height(24)
            .objectFit(ImageFit.Contain)
            .margin({
              right: 16,
              bottom: 8
            })
            .id("optionIcon")
            .onClick(this.clickOption)
            .alignRules({
              bottom: {
                anchor: '__container__',
                align: VerticalAlign.Bottom
              },
              right: {
                anchor: '__container__',
                align: HorizontalAlign.End
              }
            })
        }
      }
      .width('100%')
      .height(63)
      .padding({
        top: 19
      })

      //分割线
      if (this.line){
        Line()
          .height(1)
          .width("100%")
          .backgroundColor('#E8E8E8')
      }
    }
    .height(63)
    .width('100%')

  }

}

/***
 * 用户信息自定义视图
 */
@Component
struct UserInfoView{
  @Prop name: string // 功能名称
  @Prop rightIcon: string // 右边的图标
  @Prop rightText: string // 右边的文字
  @Prop centerPadding: number = 10 // 上下间距

  build() {
    Column(){
      Row() {
        Text(this.name)
          .margin({
            left: 15
          })
        // 通过 空白填充组件 将 后面的组件全部挤到最右边
        Blank()
        // 右边的图标
        if (this.rightIcon){
          Image(this.rightIcon)
            .alt($r('app.media.icon_loading_error'))
            .width(64)
            .height(64)
            .borderRadius(64)
            .margin({
              right: 5
            })
        }
        // 右边的文字
        if (this.rightText){
          Text(this.rightText)
            .fontColor('#999999')
            .margin({
              right: 5
            })
        }
        // 箭头图标
        Image($r('app.media.icon_to_right'))
          .margin({
            right: 15
          })
          .width(17)
          .height(17)
      }
      .padding({
        top: this.centerPadding,
        bottom: this.centerPadding
      })
      .width('100%')
      Line()
        .height(1)
        .width("90%")
        .backgroundColor('#E8E8E8')
    }
  }
}