鸿蒙HarmonyOS 【ArkTS组件】通用属性-安全区域

最新推荐文章于 2025-07-31 09:37:47 发布
原创 最新推荐文章于 2025-07-31 09:37:47 发布 · 970 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#鸿蒙harmonyOS #鸿蒙开发 #UI #ArkTS #组件化 #expandSafeArea

📑往期推文全新看点（附带最新·鸿蒙全栈学习笔记）

嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

分享一场鸿蒙开发面试经验记录（三面全过程）

鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

持续更新中。。。

安全区域是指页面的显示区域，默认不与系统设置的非安全区域比如状态栏、导航栏区域重叠，默认情况下开发者开发的界面都被布局在安全区域内。提供属性方法允许开发者设置组件绘制内容突破安全区域的限制，通过expandSafeArea属性支持组件不改变布局情况下扩展其绘制区域至安全区外，通过设置setKeyboardAvoidMode来配置虚拟键盘弹出时页面的避让模式。页面中有标题栏等文字不希望和非安全区重叠时，建议对组件设置expandSafeArea属性达到沉浸式效果，也可以直接通过窗口接口setWindowLayoutFullScreen设置沉浸式。

说明

默认摄像头挖孔区域不为非安全区域，页面不避让挖孔。

从API Version 12开始，可在module.json5中添加配置项, 摄像头挖孔区域视为非安全区，实现页面默认避让挖孔：

"metadata": [

{

"name": "avoid_cutout",

"value": "true",

}

],

expandSafeArea

expandSafeArea(types?: Array<SafeAreaType>, edges?: Array<SafeAreaEdge>)

控制组件扩展其安全区域。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
types Array <SafeAreaType> 否

配置扩展安全区域的类型。未添加Metadata配置项时，页面不避让挖孔, CUTOUT类型不生效。

默认值：[SafeAreaType.SYSTEM, S
最低0.47元/天 解锁文章
鸿蒙NEXT开发：ArkTS组件-通用属性（安全区域）
ZPYQAQ的博客
03-30 1371
安全区域是指页面的显示区域.......
鸿蒙HarmonyOS NEXT开发：安全区域
shudaoshanBBQ的博客
08-13 3454
安全区域是指页面的显示区域，默认不与系统设置的非安全区域比如状态栏、导航栏区域重叠，默认情况下开发者开发的界面都被布局在安全区域内。
鸿蒙HarmonyOS开发：安全区域、沉浸式页面开发实践，软键盘布局适配解决方案
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
12-25 2670
安全区域定义为页面的显示区域，其默认不与系统设置的非安全区域（如状态栏、导航栏）重叠，以确保开发者设计的界面均布局于安全区域内。然而，当Web组件启用沉浸式模式时，网页元素可能会出现与状态栏或导航栏重叠的问题。具体示例如图1所示，中间部分的区域即为安全区域，而顶部状态栏、屏幕挖孔区域和底部导航条则被界定为避让区，Web组件开启沉浸式效果时，网页内底部元素与导航条发生重叠。
鸿蒙API13开发【安全区域】ArkTS组件
鸿蒙的技术博客
01-03 1160
安全区域是指页面的显示区域，默认不与系统设置的非安全区域比如状态栏、导航栏区域重叠，默认情况下开发者开发的界面都被布局在安全区域内。提供属性方法允许开发者设置组件绘制内容突破安全区域的限制，通过[expandSafeArea]属性支持组件不改变布局情况下扩展其绘制区域至安全区外，通过设置[setKeyboardAvoidMode]来配置虚拟键盘弹出时页面的避让模式。页面中有标题栏等文字不希望和非安全区重叠时，建议对组件设置expandSafeArea属性达到沉浸式效果，也可以直接通过窗口接口[setWind
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：安全区域）
m0_64420071的博客
03-05 3268
ArkTS声明式开发-通用属性：安全区域
鸿蒙5.0版开发：ArkTS组件通用属性-多态样式
m0_69424697的博客
10-25 865
设置组件不同状态下的样式。
鸿蒙5.0版开发：ArkTS组件通用属性-布局约束
m0_69424697的博客
10-21 863
通过组件的宽高比和显示优先级约束组件显示效果。
鸿蒙HarmonyOS【ArkTS组件】通用属性-位置设置
zhangQ2013的博客
05-19 1111
本文介绍了如何设置组件的对齐方式、布局方向和显示位置。通过align属性可以设置容器内子元素的对齐方式，适用于Stack、Button等组件。direction属性用于设置容器内主轴方向的布局，支持自动根据系统语言方向布局。position属性用于绝对定位，确定子组件相对于父组件的位置，支持基于四边的定位方式。markAnchor属性用于设置元素在位置定位时的锚点，进一步调整偏移。offset属性用于相对偏移，组件相对于原本的布局位置进行偏移。此外，alignRules属性用于在相对容器中设置子组件的对齐规
鸿蒙5.0版开发：ArkTS组件通用属性-动态属性设置
m0_69424697的博客
10-26 1508
动态设置组件的属性，支持开发者在属性设置时使用if/else语法
鸿蒙 使用 expandSafeArea 实现顶部沉浸式导航
qq_52602294的博客
08-21 1109
设置顶部绘制延伸到状态栏；.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
鸿蒙开发之获取状态栏导航栏高度
Lu_Ca的博客
01-08 573
为了兼容全面屏设计，我们的布局要从导航栏+状态栏下开始布局，就需要动态的设置页面的布局了。我这边的思路是给顶部放一个透明的text，设置text的高度来控制布局的起始点。
鸿蒙实现底部安全距离
u011404611的专栏
05-21 965
/Blank().height(10) 使用占位控件占据底部一个安全距离的高度，问题解决了，但是感觉不是很优雅。找了一圈资料，还是没有理想的方案，果断先采用了这种方案。设计要求实现这种底部有安全距离。偶然机会找到了这个官方文章。于是就改用了这种方式。
鸿蒙安全区域-沉浸式布局
m0_46924916的博客
07-19 911
3.2 window.setWindowSystemBarProperties()设置。2. 1: window.setWindowLayoutFullScreen开启。3.1 开启沉浸式布局， 获取状态栏与导航栏高度，设置给容器。1. 全局开启（EntryAbility.ets）2.2 expandSafeArea 属性开启。3. 自定义状态栏导航栏颜色。
在鸿蒙中expandSafeArea不生效问题
m0_60880588的博客
07-31 445
expandSafeArea扩展到父组件,clip是剪切效果默认为false不剪切(tab组件除外默认为true剪切，需要设置false)，所以可以在首页tab组件加上clip(false)，并且在Home组件对应的TabContent加上expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP]) 应该就可以了。安全区的适配仅仅对Column、Row、Image这些组件有效，所以在CustomTabs组件中需要在合适的组件后加上安全区适配。
鸿蒙沉浸式
m0_60880588的博客
07-15 273
鸿蒙开启沉浸式
鸿蒙开发实战：鸿蒙应用开发中的页面管理工具类详解
s297165331的专栏
04-28 1289
通过掌握这一工具类的核心属性和方法，开发者能够轻松应对各种页面管理挑战，为用户带来更加优质、个性化的界面体验。在鸿蒙应用开发的征程中，如何高效地管理页面布局与显示，以满足用户对于沉浸式体验、个性化StatusBar颜色等界面特性的需求，一直是开发者们关注的焦点。为此，我特别设计了一款实用的“页面管理工具类”，它具备强大的功能，能帮助开发者轻松应对各种页面管理挑战。在初始化过程中，工具类会自动获取主窗口对象、设置全屏开发状态，并计算顶部和底部安全区域的高度，为后续的页面布局与管理提供基础数据。
鸿蒙ArkTS声明式开发：跨平台支持列表【安全区域】
2401_82772199的博客
06-13 432
通过expandSafeArea属性支持组件扩展其安全区域。从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
【鸿蒙next开发】ArkUI框架：ArkTS组件-安全区域
m0_73088370的博客
05-16 1138
本文详细介绍了鸿蒙5.0开发中的安全区域概念及其相关API的使用方法。
鸿蒙Next软键盘弹出避让机制介绍
qq511029414的博客
06-05 376
发现顶部按钮没有移动，但是内容区域上抬挡住了顶部的按钮区，这时，我们再给顶部区域设置一个zIndex(1)显示层级修改一下，就可以展示到内容区上面了。因此，采用压缩模式，顶部按钮区、底部按钮区、输入框使用实际高度，中间填充区域使用Scroll布局填充被压缩，即可满足。，如果不考虑内容被压缩，可以满足顶部和底部都能展示出来，但是内容变形怎么处理呢？，我们想固定顶部的按钮区不被顶出去，我们可以给顶部按钮区设置。因为压缩模式是避让了软键盘的区域，因此布局的高度被压缩了，，所以，如果使用压缩模式，可以。
鸿蒙5.0版开发：ArkTS组件通用属性（触摸热区设置）
最新发布
08-21
在 HarmonyOS 5.0 的 ArkTS 组件中，设置触摸热区（Touch Area）属性可以通过组件的 `touchable` 和 `hitTestBehavior` 等属性来实现。这些属性允许开发者定义组件响应触摸事件的区域和行为。 ### 配置触摸热区属性 #### 1. `touchable` 属性 `touchable` 属性用于控制组件是否可以响应触摸事件。设置为 `true` 时，组件将可以响应触摸事件；设置为 `false` 时，组件将忽略所有触摸事件。 ```ts @Component struct MyComponent { build() { Column() { Text('Click Me') .fontSize(30) .touchable(true) } .width('100%') .height(100) } } ``` #### 2. `hitTestBehavior` 属性 `hitTestBehavior` 属性用于定义组件在命中测试（Hit Test）中的行为。它有以下几种取值： - `HitTestBehavior.self`: 组件仅在其自身的区域内响应触摸事件。 - `HitTestBehavior.none`: 组件不响应任何触摸事件。 - `HitTestBehavior.default`: 组件按照默认行为响应触摸事件。 ```ts @Component struct MyComponent { build() { Column() { Text('Click Me') .fontSize(30) .hitTestBehavior(HitTestBehavior.self) } .width('100%') .height(100) } } ``` #### 3. 自定义触摸热区 如果需要更复杂的触摸热区配置，可以通过自定义组件的 `onTouch` 事件来实现。通过监听触摸事件，开发者可以自定义组件的响应逻辑。 ```ts @Component struct MyComponent { @State message: string = 'Touch Me' build() { Column() { Text(this.message) .fontSize(30) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.message = 'Touched Down' } else if (event.type === TouchType.Up) { this.message = 'Touched Up' } }) } .width('100%') .height(100) } } ``` ### 注意事项 - **性能优化**：在设置触摸热区时，应避免不必要的复杂逻辑，以确保应用的响应速度和性能。 - **交互设计**：触摸热区的设计应符合用户习惯，避免过于敏感或响应区域过小的问题。 通过以上方法，开发者可以灵活地配置 ArkTS 组件的触摸热区属性，以满足不同的交互需求。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值