鸿蒙开发：通过安全区域实现沉浸式效果原创

哈喽，嗯，咱们这个视频呢，主要是给大家呃讲一下在鸿蒙当中，哎我们哎如何实现一个沉景式的效果，那么陈景式呢，在咱们那个开发当中呢，是非常非常呃常见的一个功能，对吧？这个沉浸式的话，主要是我们保持了我们的一个页面和我们的一个状态栏，以及我们的呃导航栏啊对吧？呃它的颜色呃这统一，这样看起来就比较的一个美观，嗯大大家可以看到啊，我我现在已经运行起来一个小的DEMO可以发现啊，我们整个的一个呃沉浸式就是包含了我们的整个的一个是安全区域，还有一个顶，还有一个那个顶部的非安全，非安全区，还有底部的非安全区，就是状态栏和底部的保航栏，呃，已经完全实现了一个沉浸式的效果啊，那么这个效果在红蒙当中啊，我们该如何去实现呢？啊，应该来说，呃，鸿蒙当中给咱们提供了有两种的，有两种的一个实验方式，首先是第一种。

第一种呢，是介于那个页面，也就是说我们想要把哪个页面而设置成一个沉浸式啊，我们就可以通过安全区域，然后进行实现我们的一个沉浸式。呃，还有第二种方式啊啊，第二种方式一般来说它是一个全局性的，就是我们通过窗口管理来实现我们的一个沉浸式，那么通过窗口管理呢，一般来说是应用于呃，我们应用内所有的页面。啊，这是呃两种方式所呃所带来的一个区别啊。嗯，那么咱们这个视频呢，呃，主要是简单的，嗯，简单的通过哎安全区域啊，来实现我们的一个呃，沉浸式的效果。那么我们首先要知道，那么什么是安全区域，什么是非安全区域呢？呃，这里大家需要去了解一下，首先安全区域呢，就是我们当前嗯。

就是页面的显示区域。你你呃，可能大家这样看起来不是很直观，然后咱们通过代码吧，通过代码给大家去实验，呃去实践的看一下，首先呢，这是一个简单的页面，哎，我们把这个是column这个给它设置一个。嗯，换回。嗯。我听到。宽高。喂。百分之百，然后我们给他设置一个颜色，就掰个框就完了。OK啊，呃，很简单的一个组件，呃，来咱们运行一下看看效果。嗯，好，已经运行起来了，OK, 嗯，那么这种情况下它是不没有实现一个沉浸式的效果，那么我们这个粉红色的区域，它就是一个，诶安全区域，就是我们的当前显示的区域，那么顶部的顶部的状态栏以及底部的导航栏，它是白色的，那么这两块呢？呃，它是安全区域以外的区域，那么它就称为什么非安全区域，对吧？那我们要实现我们的一个沉浸式对吧？呃，第一种就是我们怎么着。

避开呃，安全区域对吧，那么我们怎么样去，呃，如何让我们的安全区域，也就是当前这个粉红色的。啊，粉红色的这个呃，显示的区域对吧，延伸到安全区域外对吧，达到我们一个沉浸式的效果，那么我们该如何去实现它呢？那其实呃，我们系统当中给咱们提供了一个属性叫一喷的哎三二通过这个属性呢，啊，我们就可以很轻松很简单的哎，就实现了一个我们啊一个沉浸式的效果，来我们先实际的去啊执行一下。

还有一个。哎，3和error OK, 那么这个属性呢，嗯，它我们先看看它具体的有什么参数，它有两个参数，这两个参数呢，啊都是一个数组的形式呢，嗯，前者呢，它是一个什么啊，Sa type类型的一个一个数组，那么这个数组呢，主要是，呃，主要是用来我们区分对吧，你是。啊，默认的啊，对吧，延伸到默认的非安全区域对吧？包括我们的状态栏啊，包括我们导航栏啊，还是说呃备的安全区域这边列入我们的刘海屏啊，或者说啊，有一些挖孔屏的区域，当然了还有什么啊，可以报的就是我们的软件盘的一个啊区域，当然它有这三种区域啊。咱们大家可以看看。对吧，System就是我们的系统，系统默认的非安全区域，还有一个是哎cut out啊，就是我们设备的反应区域，还有一个什么，这个这是一个啊键软件盘的一个区域。

嗯，好，回过头来我们看一下第二个参数啊，第二个参数就是一个什么啊，哎，3F函数ad，那么这个参数主要是扩展安全区域的方向对吧，我们是。往顶部扩展还是往底部扩展啊，还是前前半部分一个区域，还是哎，尾半部分一个区域，对吧，它是一个扩展的一个区域。那么那么咱们这里呢，给它去设置一下，首先呢，我们去执行，呃，执行我们的一个system，就是呃系统默认的非研究区域，就是延伸到呃状态栏和导航栏，呃这就可以。我们给他去设置一下，它是一个。Self I sit OK.

那么第二个呢，就是我们的扩展安全区的方向是哪里呢？就是我们的。我们看一下，刚才看一下我们的营销管，就是我们的顶部和我们的底部对吧。它属于一个。Five r.同样的，哎，我们也要执行，哎，扩展到哎底部。OK, 那么我们还再去运营一下。嗯。所以发现怎么着，哎，我们的安全区域，哎这个粉色的范围啊，已经扩展到了我们的分线键区域，也就是顶部的哎状态栏和底部导航栏都变成一个粉红色，这就这就是通过哎安全区域的一个壁障，然后安全区域的一个一个设置，然后让我们啊实现了一个哎沉浸式的效果，就是通过一个属性，哎一分的CF ever对吧，这个属性啊我们就轻松的实现了。

嗯。啊，这里啊，这里头有有有一点需要给大家去去说明的是。呃，是什么啊，就是是啊，第一个就是我们的，我们使用我们这个属性啊，啊，它是那个，如果说我们的负容器把是滚动容器，比如说啊或者啊或者说是list子的，或者说是啊网格等等，那么我们所设的这个属性呢，是没有效果的啊，这一点我们需要去注意啊，我们一定要知道咱们这个属性I一个PEN3F2，它是给组件去设置的。对吧，也就是说它不会影响到啊去别的页面，也就是说你看现在我们给这个页面去设置的，对吧，那么其他页面它没有设置，那么其他页面还是按照原来的哎模式去走，所以说它仅仅局限于哎某一个页面，或者说某一个啊组件不会影响到别的页面。

只对当前啊页面有效果。嗯，但是呢，我们还有一点需要注意啊，当我们使用到了这个，嗯。啊，沉浸个效果之后，有的时候我们呢，比如说顶部的组件啊，或者底部的组件呢，可能它会诶延伸到。怎么着？延伸到啊，我们的一个非严峻区域。对吧，也就是说我们的组件可能会出现上移的一个啊一个效果，那么在内容区域内呢？啊，咱们一定要怎么着啊，绘制好我们的组件，避免怎么着啊状态栏和导航栏啊去覆盖到哎内容区域，这是非常哎重要的，一般情况下呢，哎，我们可以怎么着设置啊，获取到我们的一个状态栏的一个高度，对吧，让我们的组件在在在那个距离那个状态栏，哎，下面是哎。

这样就我们就可以实现一个安全区域的，非安全区域的一个避让。OK, 那咱们这个视频呢，就非常简单，就是通过我们的属性，哎，一个是paint的3ERROR来实现我们的一个沉浸式效果，OK, 咱们这个视频先到这里，好的，感谢大家。