鸿蒙开发者社区

场景介绍部分应用在使用过程中需要自定义添加或删除标签的场景，比如在浏览器中的顶部标签栏中需要新打开或关闭网页页签，而这种场景与Tabs组件效果类似，但Tabs组件不提供增加或删除页签的功能，不能自由的增加删除页签，需要开发者自己实现Tabs中增删页签功能。本文以浏览器中增加或删除页签为例，实现Tabs中页签的增删功能。效果呈现如下动图所示：环境要求本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：I...

场景介绍列表的二级联动（CascadingList）是指根据一个列表（一级列表）的选择结果，来更新另一个列表（二级列表）的选项。这种联动可以使用户根据实际需求，快速定位到想要的选项，提高交互体验。例如，短视频中拍摄风格的选择、照片编辑时的场景的选择，本文即为大家介绍如何开发二级联动。效果呈现本例最终效果如下：运行环境本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：IDE:DevEcoStudio3.1Beta2SDK:Oh...

场景介绍输入框是一种常见的场景，开发者为了丰富其多样性，在输入框中的占位符、下划线做了相关处理。本文几位大家介绍如何开发自定义输入框。效果呈现效果图如下：运行环境本例基于以下环境开发，开发者也可以给予其他适配的版本进行开发：IDE:DevEcoStudio3.2ReleaseSDK:Ohossdkpublic3.2.12.5(APIVersion9Release)实现思路点击输入框，提示文字向上浮动并同时改变文字颜色，输入框底线进行匀速放缩：通过监听输入框状态(onE...

场景说明调用设备摄像头进行拍照、预览是许多应用开发过程中都需要的功能。在拍照完成时显示照片预览图可以确认拍摄的照片是否达到预期，本例将为大家介绍如何实现上述功能。效果呈现本例效果如下：拍照预览::::运行环境本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发。IDE：DevEcoStudio4.0.0.201Beta1SDK：Ohossdkpublic4.0.7.5(APIVersion10Beta1)实现思路本例使用ohos.multimedia.camera接口实现相机示例的...

场景介绍在日常应用场景中，水波纹的效果比较常见，例如数字键盘按键效果、听歌识曲、附近搜索雷达动效等等，本文就以数字按键为例介绍水波纹动效的实现。效果呈现本例最终效果图如下：环境要求本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：IDE:DevEcoStudio3.1Beta2SDK:Ohossdkpublic3.2.11.9(APIVersion9Release)实现思路本实例涉及到的主要特性及其实现方案如下：UI框架：使用Grid，GridItem等容器组件组...

场景说明在使用网格Grid的应用中，可以通过拖拽子组件GridItem的方式，交换子组件的显示位置。效果呈现本示例在模拟器中显示的最终效果如下（预览器中显示效果略有差异）：运行环境IDE：DevEcoStudio3.1Beta2SDK：Ohossdkpublic3.2.11.9(APIVersion9Release)实现原理1.设置Grid的editMode属性为true，使Grid进入编辑模式，从而可以拖拽Grid组件内部GridItem。2.在Grid的相关拖拽事件中进行拖拽逻辑处理：1.在onItemDragStart事...

场景说明在使用列表List的应用中，可以滑动列表项ListItem显示快捷菜单，快速完成对列表项的操作。List垂直布局时滑动操作支持左滑和右滑。效果呈现本示例最终效果如下：运行环境本例使用以下环境开发，开发者可以自行选择适配的环境进行开发。IDE：DevEcoStudio3.1Beta2SDK：Ohossdkpublic3.2.11.9(APIVersion9Release)实现原理1.自定义组件实现划出后的快捷菜单。2.利用ListItem组件的swipeAction属性，设置ListItem的划出组...

场景说明横竖屏切换是音视频应用常用的功能，OpenHarmony也提供了相应的能力，可以方便的实现横竖屏切换，本文即为大家介绍如何完成横竖屏切换。效果呈现本例效果如下：点击窗口中间的“横竖屏切换”按钮可以实现横竖屏之间的切换。初次点击由竖屏切换为横屏，再次点击由横屏切换为竖屏。环境要求本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：IDE:DevEcoStudio4.0ReleaseSDK:Ohossdkpublic4.0.10.13(APIVers...

场景说明在音视频应用中通常可以通过上下滑动来调节屏幕亮度和音量大小，本例即为大家介绍如何实现上述UI效果。说明：由于当前亮度和音量调节功能仅对系统应用开放，所以本例仅讲解UI效果的实现。效果呈现本例效果如下：当在屏幕左侧滑动时，可以调节亮度，上滑亮度提升，下滑亮度降低。当在屏幕右侧滑动时，可以调节音量，上滑音量增大，下滑音量减小。环境要求本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发...

场景介绍由于用户所需功能逐渐增多，传统的标签式导航在个别场景已经无法满足用户需求。当导航栏的空间放不下过多页签时，可以采用抽屉式导航，本例将为大家介绍如何通过SideBarContainer组件实现抽屉式导航。效果呈现本例最终实现效果如下：运行环境IDE：DevEcoStudio3.1Beta1SDK：Ohossdkpublic3.2.11.9(APIVersion9Release)实现思路通过SideBarContainer组件提供容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏...

场景说明应用开发过程中经常用到波纹进度条，常见的如充电进度、下载进度、上传进度等，本例即为大家介绍如何实现上述场景。效果呈现本示例最终效果如下：运行环境本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：IDE:DevEcoStudio3.1Beta2SDK:Ohossdkpublic3.2.11.9(APIVersion9Release)实现思路本示例涉及4个主要特性及其实现方案如下：进度条的圆形外框：使用Circle组件绘制外层圆环,实现外层框架。圆框内进...

场景说明OpenHarmony为开发者提供了丰富的组件布局能力，当开发者在布局时希望组件的位置不采用固定的对齐方式，就可以使用相对布局对组件进行精确定位。其中position、markAnchor、offset三种方式可以实现相对定位，开发者容易混淆，本文将结合图文和具体示例，为大家讲解三者的用法和区别。position使用语法：js组件.position({x,y})开发者可以通过position属性来固定组件的位置。以父组件的左上角为坐标原点，添加了position...

场景说明拉起用户图库，选择图片并上传显示在应用界面中是比较常见的场景，比如上传用户头像、将图片上传朋友圈、购物应用中上传图片评价等等。本文以上传用户头像为例介绍如何获取用户图库中的图片并显示在应用界面中。环境要求本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：IDE:DevEcoStudio4.0ReleaseSDK:Ohossdkpublic4.0.10.13(APIVersion10Release)实现思路本例的包含的关键操作及其实现方案如下：拉起...

场景说明应用开发中经常需要给同一个组件划分不同的触摸热区，并且不同热区触发的操作也不同，比如阅读应用通常包含左右两个触摸热区，用户触摸左侧触发向后翻页，触摸右侧触发向前翻页；同样的，视频应用中，长按视频播放器的左侧触发快退播放，长按右侧触发快进播放等等。当前OpenHarmony提供的热区设置属性（responseRegion）只能在不同的触摸热区中触发相同的事件，那么如何实现不同热区不同事件呢，本例即以上述视频播放场...

场景说明开发者经常需要将一个应用适配到不同的设备上运行，比如手机、平板、折叠屏等等。为了保证用户的浏览体验，就需要根据不同设备的屏幕尺寸设计相应的UI布局变化。常见的如阅读软件，在手机上显示一页内容，在折叠屏上就可以显示两页内容，这样才能给用户更好的阅读体验。针对上述场景，OpenHarmony为开发者提供了较为灵活的自适应布局能力，本文即为大家做一个简单的介绍。两个重要的自适应布局组件使用OpenHarmony进行...

折叠展开动效场景介绍由于目前移动端需要展示的内容越来越多，但是移动端的空间弥足珍贵，在有限的空间内不可能罗列展示全部种类内容，因此折叠展开功能就可以解决当前问题，本文就介绍下如何使用ArkTS来实现折叠展开动效。效果呈现折叠展开动效定义：点击展开按钮，下拉动画展示内容，点击折叠按钮，折叠动画折叠内容。本例最终效果如下：运行环境本例基于以下环境开发，开发者也可以基于其它适配的版本进行开发：IDE:DevEcoSt...

场景介绍应用开发过程中，经常需要创建弹窗（子窗口）用来承载跟当前内容相关的业务，比如电话应用的拨号弹窗；阅读应用中长按当前内容触发的编辑弹窗；购物应用经常出现的抽奖活动弹窗等。本文为大家介绍如何创建子窗口并实现子窗口与主窗口的数据通信。效果呈现本例最终效果如下：环境要求本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：IDE:DevEcoStudio4.0Beta1SDK:Ohossdkpublic4.0.7.5(APIVersion10Beta...

如何转换图片格式场景说明当我们获取到图片或者视频的缩略图后，返回的是pixelMap，此时有开发者会有疑问如何将pixelMap转换成jpeg等其他格式的图片，其实使用image类中的packing方法就可以将pixelMap重新打包成新的格式（当前只支持jpeg，webp格式），再使用文件管理就可以将图片存入到应用的沙箱路径。本例即为大家介绍如何完成图片格式转换。运行环境本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：IDE:Dev...

如何监听多层状态变化场景说明应用开发过程中，当希望通过状态变量控制页面刷新时，大家通常想到的就是装饰器State，但是在嵌套场景下，单单使用State并不能监听到变量的状态变化，这就引出了ObservedObjectLink装饰器。本文就为大家介绍如何配合使用State、Observed、ObjectLink三个装饰器监听多层状态变化。概念原理在讲解具体操作前，大家先理解以下几个概念：第一层状态变化：指不包含嵌套关系的变量的变化，比如string、nu...

用户首选项的基本能使用场景说明用户首选项为应用提供KeyValue键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。当用户希望有一个全局唯一存储的地方，可以采用用户首选项来进行存储。Preferences会将该数据缓存在内存中，当用户读取的时候，能够快速从内存中获取数据。Preferences会随着存放的数据量越多而导致应用占用的内存越大，因此，Preferences不适合存放过多的数据，适用的场景一般为应用保存用户的...