细解鸿蒙之元服务UX上架标准-布局基础要求(大屏)
是否必须遵守：必须
标准项描述：
折叠屏作为一种新兴的设备形态，其在不同的折叠状态下呈现出多种形态。这句话强调的是折叠屏在各个形态下都能正常显示，具体包含以下几个方面的解释：
折叠屏的形态
1 折叠状态
- •
完全折叠：这是折叠屏最常见的形态之一，屏幕被折叠成一个较小的尺寸，便于携带。在这种状态下，屏幕的显示内容需要适应较小的空间，例如显示特定的信息、功能图标等。比如手机折叠后，通常会显示一些基本的通知、时间等信息。 - •
半折叠：此时屏幕折叠部分与展开部分形成一个角度，这种形态下屏幕的显示布局需要调整。例如，折叠部分可能会显示一些与展开部分相关联的内容，如导航栏、快捷菜单等。同时，展开部分的内容也需要根据折叠角度进行优化，以保证用户能够方便地操作。 - •
多折折叠：某些折叠屏可能具有多个折叠点，形成不同的折叠方式。在这种情况下，屏幕的显示内容和布局需要更加灵活地调整。例如，不同折叠区域可能会显示不同的功能模块，用户可以根据折叠方式选择不同的显示内容。
2 展开状态 - •
完全展开：屏幕展开为一个较大的平面，提供了更大的显示空间。此时屏幕的显示内容和布局需要充分利用这个空间，展示更多的信息和功能。例如，在平板电脑模式下，应用可以展示更多的内容，如网页、文档、多媒体等。 - •
部分展开：屏幕展开部分与折叠部分形成一定的比例，这种形态下屏幕的显示布局需要根据展开部分的大小和功能需求进行调整。例如，展开部分可能会显示一些重要的信息，而折叠部分则可以用于显示一些辅助功能或快捷操作。
显示正常的具体表现
1 内容显示
- •
分辨率：折叠屏在各个形态下都需要保持合适的分辨率，以确保显示内容的清晰和细腻。无论是折叠状态还是展开状态，屏幕的分辨率都应该能够满足用户的需求。例如，在折叠状态下，屏幕的分辨率可能会降低，但仍然要保证显示内容的清晰度。 - •
字体大小：字体大小需要根据折叠屏的形态和显示空间进行调整。在折叠状态下，由于屏幕空间较小，字体可能需要适当增大，以便用户能够清晰地阅读。而在展开状态下，字体大小可以根据屏幕的大小和显示内容进行调整。 - •
图像和视频：折叠屏在各个形态下都能够正常显示图像和视频。无论是折叠状态还是展开状态，图像和视频的质量都应该得到保证。例如，在折叠状态下，图像和视频的分辨率可能会降低，但仍然要保证其显示效果。 - •
布局：屏幕的布局需要根据折叠屏的形态进行调整。在折叠状态下，屏幕的布局可能会更加紧凑，以适应较小的空间。而在展开状态下，屏幕的布局可以更加宽松，展示更多的内容。例如，在折叠屏手机的折叠状态下，屏幕的布局可能会将一些重要的功能按钮放在折叠部分，以便用户操作。
2 功能显示 - •
触摸操作：折叠屏在各个形态下都能够正常进行触摸操作。无论是折叠状态还是展开状态，用户都可以通过触摸屏幕来进行各种操作，如点击、滑动、捏合等。例如，在折叠状态下，用户可以通过触摸屏幕来打开应用、进行操作等。 - •
交互功能：折叠屏在各个形态下都能够提供良好的交互功能。例如，在折叠状态下，用户可以通过折叠屏的折叠部分进行一些特殊的操作，如折叠屏的开合、旋转等。同时，在展开状态下，用户可以通过触摸屏幕来进行各种交互操作，如切换应用、调整窗口大小等。 - •
显示切换：折叠屏在不同形态之间切换时，显示内容和功能应该能够正常切换。例如，在折叠状态下切换到展开状态时，屏幕的显示内容和功能应该能够快速切换，并且保持稳定。同时，在展开状态下切换到折叠状态时，屏幕的显示内容和功能也应该能够正常切换。
3 性能表现 - •
屏幕刷新率：折叠屏在各个形态下都需要保持良好的屏幕刷新率，以确保显示内容的流畅性。无论是折叠状态还是展开状态，屏幕的刷新率都应该能够满足用户的需求。例如，在折叠状态下，屏幕的刷新率可能会降低，但仍然要保证显示内容的流畅性。 - •
响应时间：折叠屏在各个形态下都需要保持良好的响应时间，以确保用户操作的及时性。无论是折叠状态还是展开状态，屏幕的响应时间都应该能够满足用户的需求。例如，在折叠状态下，用户操作屏幕时，屏幕的响应时间可能会延长，但仍然要保证用户能够及时得到反馈。 - •
能耗：折叠屏在各个形态下都需要合理控制能耗，以保证设备的续航能力。无论是折叠状态还是展开状态，屏幕的能耗都应该能够控制在合理范围内。例如，在折叠状态下，屏幕的能耗可能会降低，但仍然要保证设备的正常运行。
意义
1 提升用户体验：折叠屏在各个形态下显示正常能够为用户提供更加便捷、舒适的使用体验。用户可以根据不同的需求和场景选择不同的折叠形态，享受不同的显示效果和功能。
2 拓展应用功能：折叠屏的出现为应用开发带来了新的机遇。通过适配折叠屏的各个形态，应用可以开发出更加丰富、多样化的功能，满足用户的需求。
3 推动技术发展：折叠屏技术的不断发展需要不断优化折叠屏在各个形态下的显示性能。通过对折叠屏显示正常的研究和实践，可以推动折叠屏技术的进步，提高设备的性能和质量。
4 适应市场需求：折叠屏市场需求不断增长，折叠屏在各个形态下显示正常能够满足市场的需求。用户对折叠屏的要求越来越高，折叠屏在各个形态下显示正常能够提高用户对折叠屏的满意度，促进市场的发展。
--javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
背景等比缩放，居中裁剪，以适配同设备类型的不同机型
场景描述：普通手机、折叠屏、平板的不同机型分辨率有轻微差别，可能出现背景拉伸变形的问题。
适配方案：用于背景的标签（图片<Image>、视频<Video>、流体动效<FluidsView>和视频桌面<LiveWallpaper>）通过使用特定参数值isBackground="true"、scaleType="center_crop"，实现背景等比缩放，居中裁剪的适配效果，使动态主题在同设备类型的不同机型上应用时，背景都不会拉伸变形。
图片<Image>作为背景适配
适配方案：设置 isBackground="true"且scaleType="center_crop"。
isBackground="true"
该图片作为背景图使用。
scaleType="center_crop"
按照屏幕宽高的比例进行缩放，使图片居中充满整个屏幕，多余部分裁剪。
<!-- 该图片作为背景图使用，且按照屏幕宽高的比例进行缩放，使图片居中充满整个屏幕，多余部分裁剪-->
<Image x="0" y="0" src="dong.jpg" scaleType="center_crop" isBackground="true"/>
视频<Video>作为背景适配
适配方案：设置 isBackground="true"且scaleType="center_crop"。
isBackground="true"
该视频作为背景使用。
scaleType="center_crop"
按照屏幕宽高的比例进行缩放，使视频居中充满整个屏幕，多余部分裁剪。
<!--解决视频加载中出现黑屏问题，配置一个image在视频加载完成前显示，图片为视频第一帧，以实现比较平滑的过渡效果-->
<Image scaleType="center_crop" isBackground="true" src="video_first.png" />
<!--该视频作为背景使用，且按照屏幕宽高的比例进行缩放，使视频居中充满整个屏幕，多余部分裁剪-->
<Video name="js" src="video.mp4" play="true" sound="1" looping="true" scaleType="center_crop" isBackground="true"/>
2.3 流体动效<FluidsView>背景适配
适配方案：设置scaleType="center_crop"。
scaleType="center_crop"
按照屏幕宽高的比例进行缩放，使背景图片居中充满整个屏幕，多余部分裁剪。
如果在流体动效标签<FluidsView>的背景图之外，还使用了其他 <Image>作为背景，则<FluidsView>背景图和<Image>的缩放方式需保持一致。
<!--图片作为背景图使用，且按照屏幕宽高的比例进行缩放，使图片居中充满整个屏幕，多余部分裁剪-->
<Image src="aaa2.png" align="center" scaleType="center_crop" isBackground="true"/>
<!--<FluidsView>背景图和<Image>的缩放方式需保持一致-->
<FluidsView scaleTyp="center_crop" bgSrc="aaa1.png" gravityRatio="" viscosity = "" color = "" waterAlpha="" srcid="" persist="" waterAlphaThreshold="">
<CircleShape type="" radius="" xPosition="" yPosition=""/>
<PolygonShape type="" hx="" hy="" angle="" xPosition="" yPosition=""/>
</FluidsView>
2.4 视频桌面<LiveWallpaper>背景适配
scaleType="center_crop"
将视频文件宽高显示效果均不小于控件宽高。如果视频宽或者高小于控件宽或者高，则等比放大直到铺满控件，有超出屏幕部分的则截取视频中间部分铺满控件播放；如果视频资源文件的宽高均大于控件宽高，则等比缩小视频，当视频的宽高任意一值等于控件的宽高时停止缩放，截取中间部分视频显示播放。
<LiveWallpaper version="1" frameRate="30" screenWidth="1080" >
<!--视频作为桌面背景，照屏幕宽高的比例进行缩放，使视频居中充满整个屏幕，多余部分裁剪-->
<VideoWallpaper src="xianwanzi.mp4" timeSequences="0,10.5,20.9" haveVideoVoice="true" scaleTyp="center_crop"/>
</LiveWallpaper>PS：实际项目中如有出入，请告知博主，博主会第一时间修改得哇~
