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')}}
}