- 博客(144)
- 收藏
- 关注
RSS订阅原创 鸿蒙UI开发——组件的自适应拉伸
做过前端开发的朋友应该使用过Flex布局，这是一个非常常用的布局方式，类似的，ArkUI也提供了Flex布局，我们在ArkUI中，可以借助flexGrow和flexShrink属性可以方便地实现自适应拉伸能力。
2025-06-03 23:28:03
1367
原创 送你一本求职秘籍，请查收
秋招大幕即将拉开，近期后台陆续收到许多朋友的私信，字里行间满是对面试技巧的迫切需求。针对大家最关注的高频问题，我系统梳理了面试核心要点，整理成这篇经验文，希望对找工作的你提供一些帮助，文末有面试秘籍(免费)，需要的自取【当然你也可以分享这篇文章给你身边需要的人】
2025-06-03 23:24:55
906
原创 鸿蒙UI开发——badge角标的使用
badge小红点角标是我们项目开发中常见的需求，信息标记组件，可以附加在单个组件上用于信息提醒的容器组件。
2025-05-24 23:08:53
1151
原创 鸿蒙UI开发——Builder函数的封装
我们在开发中可能会遇到这样一个问题：将一个@Builder修饰后的函数用变量或者数组记录下来，在业务其他地方使用这些@Builder函数。我们试图将builderElement这个builder方法放到builderArr数组中，然后统一在另一个Builder方法（testBuilder）中遍历执行。此时，我们在IDE中可以看到，会报一个如下的错误：为了解决这样的问题，ArkUI提供了wrapBuilder来让我们对Builder函数做封装。本文对wrapBuilder的使用做简单讨论。
2025-05-24 22:57:34
527
原创 鸿蒙UI开发——上拉抽屉的更新与事件回调
本文介绍了在鸿蒙UI开发中如何动态更新上拉抽屉样式及实现数据回调。通过updateBindSheet接口可异步更新抽屉样式，支持增量或全量更新。回调父组件可通过参数传递callback函数实现，文中给出了具体代码示例，包括构建ComponentContent对象、更新背景色和关闭抽屉时的回调操作。完整示例展示了打开抽屉、修改样式和关闭回调的全流程，帮助开发者实现抽屉组件与父组件间的交互。
2025-05-24 22:54:03
1186
原创 鸿蒙UI开发——实现一个上拉抽屉效果
在ArkUI中，半模态页面是一种常见的临时交互方式，用户可以在主流程中弹出交互框，完成交互后继续主流程。ArkUI提供了bindSheet接口，用于快速实现半模态页面效果。该接口支持配置显示/隐藏控制、内容构造器及多种选项，如高度档位、模糊背景、标题、关闭图标等。通过bindSheet，开发者可以灵活定义半模态页面的样式和行为。本文通过一个案例展示了如何使用bindSheet实现上拉抽屉效果，包括按钮点击触发半模态页面显示，并配置了高度档位、模糊背景、标题等参数。该接口从API version 12开始支持
2025-05-21 22:34:44
1612
原创 鸿蒙UI开发——Builder与LocalBuilder对比
在ArkUI中，有的朋友应该接触过@Builder和@LocalBuilder。其中有了@LocalBuilder的存在，是为了解决组件的父子关系和状态管理的父子关系保持一致的问题。这里面最直观的表现则是this的指向问题与组件刷新问题，本文对@Builder与@LocalBuilder的这两个问题做简单讨论。
2025-05-21 22:27:24
945
原创 鸿蒙UI开发——隐私遮罩效果
在为Image组件设置隐私遮罩时，最好设置一个默认宽高，因为如果图片是异步加载的，在图片加载完成前，如果没有默认宽高，会导致遮罩没有宽高信息。👉🏻 step2：我们为刚刚创建的文本组件与图片组件添加隐私遮罩（12、16行）。如果我们为Text组件设置了属性字符串，将不会生效隐私遮罩，代码如下：。👉🏻 step1：我们创建一个基本文本组件和图片显示组件，代码如下：。目前支持的组件类型只有：Text文本组件、Image图片显示组件。
2025-02-17 14:43:02
570
原创 鸿蒙UI开发——时间选择器对话框(TimePickerDialog)
在我们项目开发过程中，时常会遇到时间选择器的场景（如下图），ArkUI为我们提供了一套时间选择对话框，本文针对时间选择对话框的使用做简单介绍。
2025-02-17 14:41:08
1303
原创 鸿蒙UI开发——键盘弹出避让模式设置
我们在鸿蒙开发时，不免会遇到用户输入场景，当用户准备输入时，会涉及到输入法的弹出，我们的界面针对输入法的弹出有两种避让模式：上抬模式、压缩模式。下面针对输入法的两种避让模式的设置做简单介绍。
2025-01-15 22:46:20
1447
原创 鸿蒙UI开发——文本级联选择器
其中TextPickerDialogOptions，主要用于配置文本滑动选择器弹窗的参数。字段配置如下：名称类型说明range选择器的数据选择列表。不可设置为空数组，若设置为空数组，则不显示；若动态变化为空数组，则保持当前正常值显示。说明：单列数据选择器使用string[]，Resource，TextPickerRangeContent[]类型。多列数据选择器使用string[][]类型。多列联动数据选择器使用TextCascadePickerRangeContent[]类型。
2025-01-15 22:43:04
1473
原创 鸿蒙UI开发——基于onTouch事件实现表情选择胶囊
有朋友留言说，抖音APP中，长按评论按钮触发的快捷表情选择胶囊动画比较好（效果如下图），希望使用鸿蒙ArkTs也实现一个类似的。本文在鸿蒙ArkTs下也实现一个类似的效果，如下：首先，核心交互流程与抖音APP保持一致，即：长按一个按钮，我们可以在按钮旁边生成一个快捷表情选择胶囊；手指可以快捷的在候选表情上滑动，在选中的表情上停留时，该表情会稍微放大；动画细节上做了一些个人效果，例如：胶囊展示到界面时，候选表情做了一个类似IOS解锁时的类飞入效果；
2025-01-13 23:01:49
640
原创 鸿蒙UI开发——颜色选择器
取色对话框在实际项目开发中非常常见（效果类似如下图），有朋友留言希望讨论一下，那我们来实现一个基本的颜色选择器。申明：核心代码参考自项目：https://gitee.com/yranfantasy/harmony-color-picker。
2025-01-13 22:58:17
1273
1
原创 鸿蒙UI开发——带农历的日期滑动选择弹窗
说明：1.正常时序依次为：onWillAppear>>onDidAppear>>(onDateAccept/onCancel/onDateChange)>>onWillDisappear>>onDidDisappear。说明：1.正常时序依次为：onWillAppear>>onDidAppear>>(onDateAccept/onCancel/onDateChange)>>onWillDisappear>>onDidDisappear。弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
2025-01-09 23:26:05
1421
原创 鸿蒙UI开发——日历选择器
在项目开发中，我们时常会用到日历选择器，效果如下：ArkUI已经为我们提供了组件，我们可以直接使用，下面针对日历组件做简单介绍。
2025-01-09 23:23:52
1397
原创 鸿蒙UI开发——Toast即时提示框的使用
Toast提示又称即时反馈，是一种临时性的消息提示框，用于向用户显示简短的操作反馈或状态信息。它通常在屏幕的底部或顶部短暂弹出，随后在一段时间后自动消失。即时反馈的主要目的是提供简洁、不打扰的信息反馈，避免干扰用户当前的操作流程。
2025-01-05 21:47:07
1556
原创 鸿蒙开发——下载网络资源文件
文件下载是一个非常常见的应用场景，我们可以通过使用ArkTs提供的上传下载模块（ohos.request）的下载接口将网络资源文件下载到应用文件目录。另外，对已下载的网络资源文件，我们可以使用基础文件IO接口（ohos.file.fs）对其进行访问，使用方式与应用文件访问一致。文件下载过程使用系统服务代理完成（在api12中request.agent.create接口增加了设置代理地址参数，支持我们设置自定义代理地址）。2、示 例。
2025-01-05 21:44:56
786
1
原创 鸿蒙UI开发——设置组件的内容填充方式
组件在宽高变化时，如果我们设置了动画效果，但该组件同时又有内容，此时，可能会出现组件有动画效果，但组件包含的内容没有动画的问题。我们以Text文本组件为例：如果Text文本组件中有包含文字，此时我们将组件的尺寸变更触发动画时，可能会出现以下效果：从上述效果中我们可以看到，Text组件的宽高变化是按照动画平滑过渡，但是里面包含的文字发生了跳变，我们希望里面的文字也随着动画发生平滑过渡。效果如下（文章末尾有源码）：为了达到后者的效果，我们可以通过为组件设置renderFit属性来实现。
2024-12-29 22:32:25
987
原创 鸿蒙UI开发——组件的可见性控制
visibility接口定义如下：控制当前组件显示或隐藏。根据具体场景需要可使用条件渲染代替。默认值：Visibility.VisibleNone // 隐藏，但不参与布局，不进行占位。其中，Hidden与None需要注意；当Visibility属性为Hidden时：展示效果可以类比为组件变成了全透明，即：占用的位置与空间都保留，只是组件看不见。当Visibility属性为None时：展示效果可以类比为组件完全不存在，即：完全不在界面中，不占空间也不占位置。有前端开发经验的朋友来看。
2024-12-29 22:30:35
979
原创 鸿蒙UI开发——使用WidthTheme实现局部深浅色
在实际的应用开发中，我们可能需要在界面中局部应用深色或者浅色的界面样式，与全局的深色、亮色同时生效。场景例如：深/亮色预览。此时，我们可以使用WithTheme能力来达到我们的效果。
2024-12-26 23:22:40
743
原创 鸿蒙开发——应用分身
应用分身主要应用场景有社交账号双开、游戏大小号双开等，无需账号切换，从而省去频繁登录的繁琐。鸿蒙提供了应用分身的功能，可以实现在一个设备上安装多个相同的应用并且互不影响。创建应用分身后，在桌面上会出现多个应用图标相同的应用，其中拥有下角标的应用图标为分身应用。主应用与分身应用有以下特点：主应用和分身应用共享同一个应用。例如，当主应用更新/升级时，主应用与分身应用都会同步更新，包括应用的图标（icon）和名称（label）、应用特性本身的新特性等。
2024-12-26 23:21:17
1035
原创 鸿蒙UI开发——自定义主题色
我们可以在UIAbility中设置ThemeControl，在onWindowStageCreate()方法中setDefaultTheme，设置应用内组件的自定义主题色。代码如下（26行）：?'');return;?'');
2024-12-25 23:13:42
1541
1
原创 鸿蒙UI开发——全局自定义弹窗实现
在使用弹窗前，我们需要创建ComponentContent对象，ComponentContent用于定义自定义弹窗的内容。创建一个ComponentContent对象的实例代码如下(核心代码 23 ~ 24行)：。
2024-12-25 23:09:32
2264
2
原创 鸿蒙开发——关系型数据库的基本使用与跨设备同步
关系型数据库基于SQLite组件，适用于存储包含复杂关系数据的场景，比如一个班级的学生信息，需要包括姓名、学号、各科成绩等，又或者公司的雇员信息，需要包括姓名、工号、职位等，由于数据之间有较强的对应关系，复杂程度比键值型数据更高，此时需要使用关系型数据库来持久化保存数据。大数据量场景下查询数据可能会导致耗时长甚至应用卡死，有建议如下：单次查询数据量不超过5000条。在TaskPool中查询。拼接SQL语句尽量简洁。合理地分批次查询。
2024-12-21 16:47:44
1238
原创 鸿蒙UI开发——组件滤镜效果
ArkUI为组件提供了滤镜效果设置，背景滤镜、前景滤镜、合成滤镜。我们可以通过以下方式为组件设置对应的滤镜效果。具体用法，下面展开介绍。
2024-12-21 16:41:56
589
原创 鸿蒙UI开发——组件点击回弹效果
从API Version 10开始支持，ArkUI支持设置组件点击时回弹效果。我们可以通过为组件设置clickEffect来实现点击回弹效果。下面对clickEffect接口做展开说明。
2024-12-17 22:47:56
372
原创 鸿蒙UI开发——组件阴影效果
其中，入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。入参类型为ShadowStyle时，可指定不同阴影样式。属性名类型说明radius阴影模糊半径。取值范围：[0, +∞)单位：px。说明：设置小于0的值时，按值为0处理。如需使用vp单位的数值可用vp2px进行转换。如果radius为Resource类型，则传入的值需为number类型。元服务API：从API version 11开始，该接口支持在元服务中使用。typeShadowType阴影类型。
2024-12-17 22:44:00
900
原创 鸿蒙UI开发——实时动态模糊效果
模糊效果可以用来体现界面空间的纵深感，区分前后元素的层级关系。ArkUI提供了5种接口来实现实时模糊。分别是：backdropBlurblur以调节模糊半径方式来实现背景模糊和前景(内容)模糊backgroundBlurStyleforegroundBlurStyle提供了更丰富的模糊样式设置来设置背景模糊和前景(内容)模糊motionBlur为当前组件添加由缩放大小或位移变化引起的运动过程中的动态模糊效果，入参为模糊半径和锚点坐标。【注意，我们避免滥用这个效果，实时模糊会增加性能开销】下面针对这5中接口做
2024-12-15 18:40:43
1603
原创 鸿蒙UI开发——渐变色效果
线性渐变direction?repeating?: boolean;})线性渐变的起始角度。0点方向顺时针旋转为正向角度。默认值：180，角度为字符串时仅支持类型deg，grad，rad，trun。线性渐变的方向，设置angle后不生效。默认值：GradientDirection.Bottom指定某百分比位置处的渐变色颜色,设置非法颜色直接跳过。为渐变的颜色重复着色。默认值：false角度渐变start?end?rotation?repeating?: boolean;})
2024-12-07 20:47:39
2186
原创 鸿蒙开发——键值型数据库的基本使用与跨设备同步
键值型数据库（KV-Store）是一种非关系型数据库，其数据以“键值”对的形式进行组织、索引和存储，其中“键”作为唯一标识符。键值型数据库适合很少数据关系和业务关系的业务数据存储。另外，因键值型数据库在分布式场景中降低了解决数据库版本兼容问题的复杂度，和数据同步过程中冲突解决的复杂度而被广泛使用。相比于关系型数据库，更容易做到跨设备跨版本兼容。
2024-12-07 20:44:40
1291
原创 鸿蒙开发实战——使用Canvas绘制环形文字
Canvas有一个onReady()事件，onReady设置的callback将会在Canvas准备完毕后调用。
2024-12-05 23:41:24
795
原创 鸿蒙开发——使用ArkTs处理XML文本
XML（可扩展标记语言）是一种用于描述数据的标记语言，旨在提供一种通用的方式来传输和存储数据，特别是Web应用程序中经常使用的数据。XML并不预定义标记。因此，XML更加灵活，并且可以适用于广泛的应用领域。XML文档由元素（element）、属性（attribute）和内容（content）组成。内容则是元素包含的数据或子元素。属性提供了有关元素的其他信息。元素指的是标记对，包含文本、属性或其他元素。XML还可以通过使用XML Schema或DTD（文档类型定义）来定义文档结构。
2024-12-05 23:38:11
974
原创 鸿蒙UI开发——亮/暗色模式适配
resources目录下增加深色模式限定词目录（命名为dark）并新建color.json文件，可显示深色模式颜色资源的配置。resources目录结构示意如下图：例如，我们可以在这两个color.json中定义同名配色定义并赋予不同的色值。
2024-12-03 23:49:49
2017
1
原创 鸿蒙多线程开发——Sendable使用注意事项
由于Sendable对象在不同并发实例间的上下文环境不同，如果直接访问会有非预期行为。不支持Sendable对象使用当前模块内上下文环境中定义的变量，如果违反，编译阶段会报错。✅ 正确使用案例：。
2024-12-03 23:45:41
941
原创 鸿蒙多线程开发——Sendable对象的序列化与冻结操作
与JSON对象的序列化和反序列化类似，Sendable对象的序列化和反序列化是通过ArkTs提供的ASON工具来完成。与JSON类似，我们可以通过ASON.stringify方法将对象转换成字符串，也可以通过ASON.parse方法将字符串转成Sendable对象，以便此对象在并发任务间进行高性能引用传递。需要注意的是：ASON.parse默认生成的Sendable对象不支持增删属性。
2024-11-26 23:23:18
537
原创 鸿蒙多线程开发——sendable共享容器
在介绍共享容器之前，先介绍异步锁机制。为了解决多线程并发任务间的数据竞争问题，ArkTS引入了异步锁能力。异步锁可能会被类对象持有，因此为了更方便地在并发实例间获取同一个异步锁对象，AsyncLock对象支持跨线程引用传递。由于ArkTS语言支持异步操作，阻塞锁容易产生死锁问题，因此在ArkTS中仅支持异步锁（非阻塞式锁）。同时，异步锁还可以用于保证单线程内的异步任务时序一致性，防止异步任务时序不确定导致的同步问题。
2024-11-26 23:19:37
1200
原创 鸿蒙多线程开发——线程间数据通信对象03(sendable)
在传统JS引擎上，对象的并发通信开销的优化方式只有一种，就是把实现下沉到Native侧，通过Transferable对象的转移或共享方式降低并发通信开销。而开发者仍然还有大量对象并发通信的诉求，这个问题在业界的JS引擎实现上并没有得到解决。ArkTS提供了Sendable对象类型，在并发通信时支持通过引用传递来解决上述问题。Sendable对象为可共享的，其跨线程前后指向同一个JS对象，如果其包含了JS或者Native内容，均可以直接共享，如果底层是Native实现的，则需要考虑线程安全性。
2024-11-23 22:27:29
1028
原创 鸿蒙多线程开发——线程间数据通信对象02
本文的讨论是接续的讨论。在上一篇文章中，我们讨论了常规的JS对象(普通JSON对象、Object、Map、Array等)、ArrayBuffer。其中讨论了ArrayBuffer的复制传输和转移传输方式。下面，我们将讨论SharedArrayBuffer。
2024-11-21 23:02:23
990
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人