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

devtools/2024/12/22 18:06:46/

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


http://www.ppmy.cn/devtools/97875.html

相关文章

[数据集][目标检测]机械常用工具检测数据集VOC+YOLO格式4713张8类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):4713 标注数量(xml文件个数):4713 标注数量(txt文件个数):4713 标注…

又是一年秋

24年对于我个人来讲可能是最没有记忆点的一年,又却是最混乱的一年... 直至疫情结束后无论是工作还是生活仿佛产生了很多变化,我相信很多普通的同龄人和我情况也类似,不过类似这样的牢骚文网上有很多,我也不参与不赘述了&#xff0…

C++中 >>

uint16_t m 0x1234;qDebug()<< QString::number((m >> 8),16); "12" 右移8位 uint16_t m 0x1234;qDebug()<< QString::number((m >> 4),16); 右移4位 "123" uint16_t m 0x1234;qDebug()<< QString::number(((m >&g…

C语言独特的三目运算符深度解析

[大师C语言]合集&#xff3b;大师C语言(第一篇)&#xff3d;C语言栈溢出背后的秘密&#xff3b;大师C语言(第二十五篇)&#xff3d;C语言字符串探秘&#xff3b;大师C语言(第二篇)&#xff3d;C语言main函数背后的秘密&#xff3b;大师C语言(第二十六篇)&#xff3d;C语言结构体…

VulnStack1-内网渗透记录

网络结构 kali192.168.20.145windows7192.168.20.148/192.168.52.1432008192.168.52.138Win2k3192.168.52.130 三台虚拟机IP初始状态固定为192.168.52.0/24网段&#xff0c;所以将仅主机模式的网卡设置为192.168.52.0/24网段 漏洞利用 phpStudy 首先查看windows7的web服务…

【vue3|第24期】深入了解useRouter:方法、属性与使用示例

日期&#xff1a;2024年8月20日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…

每日一问:Kafka消息丢失与堆积问题分析(简化版)

Kafka 消息系统问题解析 在本篇博客中&#xff0c;我们将深入探讨 Kafka 中常见的两大问题&#xff1a;消息丢失和消息堆积。首先&#xff0c;我们将简要介绍 Kafka 的基本工作原理&#xff0c;随后分别分析消息丢失和堆积的原因&#xff0c;并提供针对性的解决方案。 关于其详…

Django后端架构开发:视图与模板的正确使用

&#x1f31f; Django后端架构开发&#xff1a;视图与模板的正确使用 &#x1f539; view、render、redirect 在Django中&#xff0c;视图&#xff08;view&#xff09;是处理用户请求的核心&#xff0c;它接收一个HttpRequest对象并返回一个HttpResponse对象。Django提供了两…