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