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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/406416.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android13顶部状态栏里面调节背光,不隐藏状态栏面板

总纲 android13 rom 开发总纲说明 目录 1.前言 2.代码分析 3.修改方法 4.编译运行 5.彩蛋 1.前言 android13顶部状态栏里面调节背光,这个时候状态栏面板会被隐藏掉,有些需求就需要不隐藏这个面板。 2.代码分析 查找亮度条属性 id/brightness_slider ./frameworks/b…

TOMCAT入门到精通

目录 一 WEB技术 1.1 HTTP协议和B/S 结构 1.2 前端三大核心技术 1.2.1 HTML 1.2.2 CSS(Cascading Style Sheets)层叠样式表 1.2.3 JavaScript 二 WEB框架 2.2后台应用架构 2.2.1单体架构 2.2.2微服务 2.2.3单体架构和微服务比较 三 tomcat的…

2024Go语言面试宝典Golang零基础实战项目面试八股力扣算法笔记等

2024最新Golang面试八股文,以及各种零基础全套实战项目,经典力扣算法题以及常见的面试题型,大厂面试题。go语言面试必备。包括GO基础类、GO并发编程、GO RUNTIME、微服务、容器技术、Redis、MySQL、Linux、缓存、网络和操作系统、消息队列、分…

房产系统架构开发小程序分析

房产系统架构开发小程序在当前市场中具有显著的优势和潜力。以下是对房产小程序的分析: 用户需求满足:房产小程序通过提供楼盘信息查询、VR看房体验、购房流程指南等功能,满足用户对房产信息的需求,并提供更加便捷的用户体验 。…

NSSCTF练习记录:[SWPUCTF 2021 新生赛]crypto6

题目: 先转为base16 JZLVK6CNKRATKT2ENN2FUR2NGBGXSMDYLFWVC6SMKRAXOWLKKF2E6VCBO5HVISLXJZVEKMKPI5NGY再转base32 NWUxMTA5ODktZGM0My0xYmQzLTAwYjQtOTAwOTIwNjE1OGZl再转base64,得到答案 5e110989-dc43-1bd3-00b4-9009206158fe

如何使用GPT-SoVITSS生成各种角色的语言

百度网盘 请输入提取码 项目来自b站UP主花儿不哭 一,先除去背景声音————人生伴奏出去背景声音 1.下载后,按下面路径打开,打开文件beta,打开go-webui程序 回车,然后稍等一下,等待网页打开 2.勾选如下…

day6JS-DOM(文档对象模型)

DOM树 DOM 操作 1. 获取元素 1.1 根据id名获取元素 document.getElementById("id名"); 案例&#xff1a; <body><div id"box">div盒子</div><h1>一级标题</h1><script>console.log(document.getElementById(&quo…

群晖NAS万兆网卡跑不满的真正原因

公司有几台群晖NAS,型号有DS2419+,和RS2418+,DS1821+,阵列都做了RAID6。当年都是花了大价钱买的存储,都上了万兆网卡,前面两个型号的速度速度始终在300MB左右徘徊,始终跑不满万兆,尤其大容量迁移的时候非常痛苦,之前200TB的数据迁移,整整用了一个月。 今天特意拿了群…

vue vite创建项目步骤

1. 创建vue项目 node版本需18以上 不然报错 npm init vuelatest2. 项目配置 配置项目的icon配置项目的标题配置jsconfig.json 3. 项目目录结构划分 4.css样式的重置 npm install normalize.cssreset.css html {line-height: 1.2; }body, h1, h2, h3, h4, ul, li {padding…

SpringBoot教程(二十五) | SpringBoot整合Sharding-JDBC分库分表

SpringBoot整合Sharding-JDBC分库分表 前言1. 什么是Sharding&#xff1f;2. 什么是Sharding-JDBC&#xff1f; 所需的maven依赖注意点&#xff08;关于shardingsphere的配置情况&#xff09;实操一&#xff1a;如何水平分表1. 步骤说明2. 创建数据库和表3.配置application.pro…

如何将TRIZ技术融入到智能家居的产品设计流程中?

在探讨如何将TRIZ&#xff08;发明问题解决理论&#xff09;技术融入智能家居产品设计流程中时&#xff0c;我们首先需要理解TRIZ作为一种系统化的创新方法论&#xff0c;其核心在于提供一套科学的工具和算法&#xff0c;帮助解决复杂的技术难题&#xff0c;加速产品创新过程。…

(LLM) 很笨

大型语言模型 (LLM) 并非你所想的那样。你被骗了。LLM 很笨&#xff0c;非常笨。事实上&#xff0c;它们更接近数据库&#xff0c;而不是人类。 这就是为什么人工智能仍然处于征服智能的第一步……如果有的话。 终极煤气灯效应 建立前沿人工智能的成本很高。前沿人工智能需要大…

C++系列-多态的基本语法

多态的基本语法 多态的含义静态多态动态多态 多态的底层原理多态中的final和overridefinaloverride: 多态的应用和优点计算器简单实现电脑组装的实现 《游山西村》 南宋陆游 莫笑农家腊酒浑&#xff0c;丰年留客足鸡豚。 山重水复疑无路&#xff0c;柳暗花明又一村。 箫鼓追…

STL—list—模拟实现【迭代器的实现(重要)】【基本接口的实现】

STL—list—模拟实现 1.list源代码 要想模拟实现list&#xff0c;还是要看一下STL库中的源代码。 _list_node里面装着指向上一个节点的指针prev&#xff0c;和指向下一个节点的指针next&#xff0c;还有数据data 并且它给的是void*&#xff0c;导致后面进行节点指针的返回时…

GitHub开源的轻量级文件服务器,可docker一键部署

文件服务器 介绍安装使用命令使用API调用 介绍 项目github官网地址 Dufs是一款由Rust编写的轻量级文件服务器&#xff0c;不仅支持静态文件服务&#xff0c;还能轻松上传、下载、搜索文件&#xff0c;甚至支持WebDAV&#xff0c;让我们通过Web方式远程管理文件变得轻而易举。…

免费生产设备日志采集工具

使用咨询: 扫码添加QQ 永久免费: Gitee下载最新版本 使用说明: CSDN查看使用说明 功能: 定时(全量采集or增量采集) SCADA,MES等系统采集工控机,办公电脑文件. 优势1: 开箱即用. 解压直接运行.插件集成下载. 优势2: 批管理设备. 配置均在后台配置管理. 优势3: 无人值守 采集端…

软考-软件设计师(程序设计语言习题)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…

Vue: v-html安全性问题

一、问题描述 可能都知道使用v-html插入富文本&#xff0c;存在安全隐患&#xff0c;比如 cross-site scripting attack&#xff08;xss&#xff09;。但具体什么情况下v-html会引发安全问题呢&#xff1f;是否内容中含有<scrpit>标签就会触发执行脚本呢&#xff1f; 二…

基于vue框架的北城招聘管理平台题目7lly3(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,企业,企业信息,职位类型,职位信息,简历信息,职位应聘,求职意愿,面试信息,录取信息,实习信息,冻结信息,解冻信息 开题报告内容 基于Vue框架的北城招聘管理平台 开题报告 一、引言 随着互联网的飞速发展和企业对人才需求的不断增…

Redis的缓存淘汰策略

1. 查看Redis 最大的占用内存 打开redis配置文件, 设置maxmemory参数&#xff0c;maxmemory 是bytes字节类型, 注意转换 2. Redis默认内存多少可以用 注意: 在64bit系统下&#xff0c; maxmemory 设置为 0 表示不限制Redis内存使用 3. 一般生产上如何配置 一般推荐Redis 设置内…