细解鸿蒙之元服务UX上架标准-弹出框大小适中
是否必须遵守：必须
标准项描述：
在折叠屏设备的使用过程中，当处于展开状态时弹出框的高度符合要求是一个重要的设计考量。这涉及到多个方面的因素，以下详细解释：
折叠屏展开态弹出框高度的相关因素
1 用户操作体验：弹出框高度要符合用户的操作习惯。例如，在展开状态下，弹出框的高度不能过高或过低，否则可能会影响用户对其操作的便利性。如果弹出框过高，用户可能需要伸手去够，这会增加操作难度；如果弹出框过低，可能会被其他界面元素遮挡，导致用户无法及时看到弹出框内容。
2 屏幕尺寸与比例：折叠屏展开后的屏幕尺寸和比例会影响弹出框高度。不同折叠屏设备的屏幕尺寸和比例有所不同，弹出框高度需要适应这些变化。例如，在大屏幕折叠屏设备上，弹出框高度可能相对较高，以适应屏幕的较大空间；而在小屏幕折叠屏设备上，弹出框高度则需要相应调整，以避免占据过多屏幕空间。
3 功能需求：弹出框的高度要满足其功能需求。例如，弹出框可能用于显示特定的信息、操作提示或菜单选项等。这些功能要求决定了弹出框的高度。如果弹出框用于显示较长的文本内容，那么高度需要足够大，以保证内容完整显示；如果弹出框用于显示简单的操作按钮，高度则可以相对较小。
4 视觉效果：弹出框高度要与折叠屏展开态的整体视觉效果相协调。弹出框的高度应该与屏幕的其他元素以及整体布局相匹配，避免出现突兀或不协调的情况。例如，弹出框的高度应该与折叠屏的边缘、窗口等元素形成一定的比例关系，使整个屏幕看起来更加美观、和谐。
符合要求的具体表现
1 高度合适：弹出框高度要能够满足用户在展开状态下的操作需求。例如，弹出框的高度应该能够方便用户点击、查看或操作其中的内容。对于一些常用的弹出框，如通知弹出框、菜单弹出框等，其高度应该能够保证用户在正常操作范围内轻松触碰到。
2 不影响显示：弹出框高度不能过高，以免影响屏幕的正常显示。例如，弹出框不能超出屏幕的可视范围，否则会导致部分内容无法显示。同时，弹出框高度也不能过低，否则可能会被其他界面元素遮挡，影响用户对弹出框内容的查看。
3 与屏幕适配：弹出框高度要与折叠屏展开态的屏幕尺寸和比例相适配。例如，在折叠屏展开后，弹出框的高度应该能够适应屏幕的大小和形状，与屏幕的整体布局相协调。在不同屏幕尺寸和比例的折叠屏设备上，弹出框高度可能会有所不同，需要根据实际情况进行调整。
4 满足功能要求：弹出框高度要能够满足其功能需求。例如，弹出框的高度应该能够容纳其内部的内容，如文本、按钮、图片等。如果弹出框用于显示特定的信息或操作提示，其高度应该能够保证内容清晰、完整地显示。
意义
1 提升用户体验：折叠屏展开态弹出框高度符合要求能够提高用户在折叠屏设备上的操作便利性和视觉感受。用户能够更加轻松地操作弹出框，并且能够及时查看弹出框内容，从而提高用户对折叠屏设备的满意度。
2 优化功能展示：弹出框高度的合理设置有助于展示折叠屏设备的各种功能。在折叠屏展开状态下，弹出框能够更好地呈现其功能，为用户提供更便捷的操作方式。
3 增强界面美观：符合要求的弹出框高度能够与折叠屏展开态的整体视觉效果相协调，使整个屏幕看起来更加美观、和谐。这有助于提升折叠屏设备的整体形象，增强用户对设备的好感度。
4 促进设备发展：折叠屏设备的发展需要满足用户对弹出框高度的要求。符合要求的弹出框高度能够提高折叠屏设备的性能和质量，推动折叠屏设备的进一步发展。
--javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
import { TipsDialog } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';
// 标记为入口组件
@Entry
// 声明为组件
@Component
struct Index {
// 存储像素映射对象，初始值为 undefined
@State pixelMap: PixelMap | undefined = undefined;
// 存储一个布尔状态，初始值为 false
isChecked = false;
// 创建一个自定义对话框控制器，使用 TipsDialog 作为构建器
dialogControllerImage: CustomDialogController = new CustomDialogController({
builder: TipsDialog({
// 对话框中的图像资源
imageRes: $r('sys.media.ohos_ic_public_voice'),
// 对话框的内容文本
content: '想要卸载这个APP嘛?',
// 主要按钮的配置
primaryButton: {
value: '取消',
// 主要按钮点击时的回调函数
action: () => {
console.info('Callback when the first button is clicked')
},
},
// 次要按钮的配置
secondaryButton: {
value: '删除',
// 次要按钮的角色，可能表示错误或警告等
role: ButtonRole.ERROR,
// 次要按钮点击时的回调函数
action: () => {
console.info('Callback when the second button is clicked')
}
},
// 复选框点击时的回调函数
onCheckedChange: () => {
console.info('Callback when the checkbox is clicked')
}
}),
})
build() {
// 创建一个行组件
Row() {
// 创建一个栈组件
Stack() {
// 创建一个列组件
Column(){
// 创建一个按钮，文本为 "上图下文弹出框"
Button("上图下文弹出框")
// 按钮的宽度为 96
.width(96)
// 按钮的高度为 40
.height(40)
// 按钮点击时打开对话框
.onClick(() => {
this.dialogControllerImage.open()
})
}
// 列组件的底部外边距为 300
.margin({bottom: 300})
}
// 栈组件的对齐方式为底部对齐
.align(Alignment.Bottom)
// 栈组件的宽度为 100%
.width('100%').height('100%')
}
// 行组件的背景图片大小为 100%
.backgroundImageSize({ width: '100%', height: '100%' })
// 行组件的高度为 100%
.height('100%')
}
// 组件即将显示时调用的方法
aboutToAppear(): void {
// 调用方法从媒体资源中获取像素映射
this.getPixmapFromMedia($r('app.media.app_icon'));
}
// 从媒体资源中获取像素映射的异步方法
async getPixmapFromMedia(resource: Resource) {
// 从上下文获取资源管理器并获取媒体内容
let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
bundleName: resource.bundleName,
moduleName: resource.moduleName,
id: resource.id
})
// 使用获取到的字节数组创建图像源
let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength))
// 使用图像源创建像素映射
this.pixelMap = await imageSource.createPixelMap({
desiredPixelFormat: image.PixelMapFormat.RGBA_8888
})
// 释放图像源
await imageSource.release()
// 返回像素映射
return this.pixelMap;
}
}PS：实际项目中如有出入，请告知博主，博主会第一时间修改得哇~
