在软件开发的实践中，为了确保整体界面的视觉统一性，通常要求顶部和底部的颜色要铺满整个手机屏幕。这样的设计风格不仅提升了界面的整体感，还为用户带来了更为沉浸式的体验。接下来，让我们详细探讨如何实现这一设计。
在鸿蒙系统中的应用开发中，全屏ui由状态栏、应用界面以及导航栏三部分组成。为了实现沉浸式效果，我们需要对这三部分进行适当的布局与配色。
要实现应用沉浸式效果，主要有两种策略：
- 全屏布局方案：通过调整布局系统为全屏模式，使界面元素自然延伸至状态栏和导航栏区域，从而营造出沉浸式的视觉效果。
- 组件延伸法：将界面组件布局在应用界面区域内，然后通过编程接口将它们延伸至状态栏和导航栏。这种方式更为灵活，允许开发者仅对特定组件进行沉浸式处理。
在实施过程中，我们需要进行以下步骤：
- 创建新的展示页面，并使用@storageprop定义页面的顶部和底部偏移属性。这样能确保页面内容在垂直方向上的布局准确性。
- 在entryability的onwindowstagecreate方法中，调用window.window的setwindowlayoutfullscreen方法。这一步是设置窗口为全屏模式的关键。
- 为了避免界面元素被状态栏或导航栏遮挡，我们需要根据两者的实际高度，动态调整bottomrectheight和toprectheight的数值。
- 添加页面，以便动态地调整bottomrectheight和toprectheight的数值。这样可以确保界面在不同屏幕尺寸和设备上都能有优秀的表现。
- 对于safeareatype，我们可以选择system以涵盖状态栏和导航栏的非安全区域，或是选择cutout以应对刘海屏或挖孔屏设备的特殊区域。
- 通过设置edges参数，我们可以决定安全区域的扩展方向，如上下左右等。
最终呈现的效果可以通过颜色对比来观察。比如，将某个列的背景色设为橘色，列表的背景设为，文本的背景设为红色。这样在界面上就能直观地看到哪些元素延伸至了状态栏和导航栏。
若并非整个应用界面都需要沉浸式布局，开发者可选择性地使用组件延伸方案，仅对特定组件进行沉浸式处理，以满足设计的多样性需求。
