自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(138)
  • 收藏
  • 关注

原创 鸿蒙APP实战开发——悬浮窗拖拽和吸附动画

本示例使用position绝对定位实现应用内悬浮窗,并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。

2025-06-26 16:49:53 562

原创 鸿蒙APP实战开发——阅读翻页方式案例

本示例展示手机阅读时左右翻页,上下翻页,覆盖翻页的功能。

2025-06-26 15:43:19 1023

原创 鸿蒙APP实战开发——多模态页面转场动效实现案例

本示例介绍多模态页面转场动效实现:通过 半模态转场 实现半模态登录界面,通过配置NavDestinationMode类型为DIALOG,实现半模态的背景为透明,再与全屏模态 和组件转场结合实现多模态组合登录场景,其中手机验证码登录与账号密码登录都为组件,通过TransitionEffect.asymmetric()和TransitionEffect.move()实现组件间转场达到近似页面转场的效果。

2025-06-26 15:03:55 362

原创 鸿蒙APP实战开发——滑动页面信息隐藏与组件位移效果

在很多应用中,向上滑动"我的"页面,页面顶部会有如下变化效果:一部分信息逐渐隐藏,另一部分信息逐渐显示,同时一些组件会进行缩放或者位置移动。向下滑动时则相反。

2025-06-26 14:26:18 423

原创 鸿蒙APP实战开发——地址交换动画

本示例介绍使用显式动画animateTo实现左右地址交换动画。该场景多用于机票、火车票购买等出行类订票软件中。

2025-06-26 13:42:41 254

原创 鸿蒙APP实战开发——tabContent内容可以在tabBar上显示并响应滑动事件案例

本示例实现了tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能。

2025-06-25 19:44:45 900

原创 鸿蒙APP实战开发——底部面板嵌套列表滑动案例

本示例主要介绍了利用panel实现底部面板内嵌套列表,分阶段滑动效果场景。

2025-06-25 17:55:12 221

原创 鸿蒙APP实战开发——Canvas实现模拟时钟案例

本示例介绍利用 Canvas 和定时器实现模拟时钟场景,该案例多用于用户需要显示自定义模拟时钟的场景。

2025-06-25 16:53:10 353

原创 鸿蒙APP实战开发——折叠屏扫描二维码方案

本示例介绍使用自定义界面扫码能力在折叠屏设备中实现折叠态切换适配。自定义界面扫码使用系统能力customScan,其提供相机流的初始化、启动扫码、识别、停止扫码、释放相机流资源等能力。折叠屏折叠状态通过监听display的foldStatusChange事件实现。

2025-06-25 15:48:10 413

原创 鸿蒙APP实战开发——ArkWeb同层渲染

该方案展示了ArkWeb 同层渲染 :将系统原生组件直接渲染到前端H5页面上,原生组件不仅可以提供H5组件无法实现的一些功能,还能提升用户体验的流畅度。

2025-06-25 13:39:09 377

原创 鸿蒙APP实战开发——swiper指示器导航点位于swiper下方

本示例介绍通过分割swiper区域,实现指示器导航点位于swiper下方的效果。

2025-06-24 17:08:10 211

原创 鸿蒙APP实战开发——手写绘制及保存图片

本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能。手写板上完成绘制后,通过调用image库的packToFile和packing接口将手写板的绘制内容保存为图片,并将图片文件保存在应用沙箱路径中。

2025-06-24 15:09:34 430

原创 鸿蒙APP实战开发——列表编辑实现

该场景多用于待办事项管理、文件管理、备忘录的记录管理等。

2025-06-24 14:33:03 415

原创 鸿蒙APP实战开发——跨文件样式复用和组件复用

本示例主要介绍了跨文件样式复用和组件复用的场景。在应用开发中,我们通常需要使用相同功能和样式的ArkUI组件,例如购物页面中会使用相同样式的Button按钮、Text显示文字,我们常用的方法是抽取公共样式或者封装成一个自定义组件到公共组件库中以减少冗余代码。

2025-06-24 14:31:21 579

原创 鸿蒙APP实战开发——二级联动

本示例主要介绍了 List组件 实现二级联动(Cascading List)的场景。该场景多用于短视频中拍摄风格的选择、照片编辑时的场景的选择。

2025-06-24 13:48:51 318

原创 鸿蒙APP实战开发——自定义TabBar

本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示,并有一小段动画效果。

2025-06-23 17:50:19 297

原创 鸿蒙APP实战开发——全局状态保留能力弹窗

全局状态保留能力弹窗一种很常见的能力,能够保持状态,且支持全局控制显隐状态以及自定义布局。

2025-06-23 17:05:22 187

原创 鸿蒙APP实战开发——Navigation实现多设备适配案例

在应用开发时,一个应用需要适配多终端的设备,使用Navigation的mode属性来实现一套代码,多终端适配。

2025-06-23 15:21:55 762

原创 鸿蒙APP实战开发——监听HiLog日志实现测试用例验证

日常中在进行测试用例验证时,会出现部分场景无法通过判断UI的变化来确认用例是否正常运行,我们可以通过监听日志的方式来巧妙的实现这种场景。本示例通过监听hilog日志的回调,判断指定日志是否打印,来确定测试用例的执行结果是成功还是失败。由于ArkTS没有注册日志回调的接口,示例通过Native来注册日志回调,并在Native的自定义日志处理函数中过滤用户传入的日志内容后回调ArkTS端的回调函数。

2025-06-23 14:26:35 788

原创 鸿蒙性能优化实战-帧率分析工具 Frame Profiler

上述案例中的场景明显属于前者中App侧的发送帧卡顿,针对前一种现象可以点击查看卡顿帧的Details信息,点击 以跳转到此帧对应的trace数据。DevEco Studio内置Profiler分析调优工具,其中Frame分析调优功能,用于录制GPU数据信息,录制完成展开之后的子泳道对应录制过程中各个进程的帧数据,主要用于深度分析应用或服务卡顿丢帧的原因。Frame泳道展开之后的子泳道对应录制过程中各个进程的帧数据,在RS Frame和App Frame标签的泳道中绿色帧为正常帧,红色帧为卡顿帧。

2025-06-23 13:37:52 825

原创 鸿蒙性能优化实战-页面布局检查器ArkUI Inspector

DevEco Studio内置ArkUI Inspector工具,开发者可以使用ArkUI Inspector,在DevEco Studio上查看应用在真机上的UI显示效果。利用ArkUI Inspector工具,开发者可以快速定位布局问题或其他UI相关问题,同时也可以观察和了解不同组件之间的布局关系和属性,学习如何通过布局属性来控制组件的显示方式。

2025-06-22 20:49:11 475

原创 鸿蒙性能优化实战-电量优化

设备返回主界面、锁屏、应用切换等操作会使应用退至后台。为了降低设备耗电速度、保障用户使用流畅度,系统会对退至后台的应用进行管控,包括进程挂起和进程终止。为了保障后台音乐播放、日历提醒等功能的正常使用,系统提供了受规范约束的后台任务,扩展应用在后台的运行时间。本文将介绍各类后台任务的基本概念和适用场景,并且通过对短时任务和长时任务两个场景的性能分析说明合理运行后台任务的必要性。合理的选择和使用后台任务对于优化用户体验,减少性能消耗非常重要。

2025-06-22 19:41:28 659

原创 鸿蒙性能优化实战-运行时动态加载页面性能

应用在加载页面时,如果引入大量暂不需要加载的模块,会因过多模块导致页面加载缓慢。比如当页面在使用Navigation组件时,主页默认先加载所有页面,此时若包含大量子页面,仅加载主页这一项就需要很长时间,但这些复杂的子页面与主页渲染无关。本文推荐使用动态加载解决上述问题,不在应用程序加载时就将所有模块都加载进来,而是按需加载模块,增加应用灵活性,提升应用性能。

2025-06-22 18:59:52 802

原创 鸿蒙性能优化实战-多板块性能提升方案

开发者若使用低性能的代码实现功能场景可能不会影响应用的正常运行,但却会对应用的性能造成负面影响。本章节列举出了一些可提升性能的场景供开发者参考,以避免应用实现上带来的性能劣化。

2025-06-21 21:26:29 937

原创 鸿蒙应用开发-使用colorPicker实现背景跟随主题颜色转换

本示例介绍使用image库以及effectKit库中的colorPicker对目标图片进行取色,将获取的颜色作为背景渐变色,通过swiper组件对图片进行轮播,

2025-06-21 20:48:13 310

原创 鸿蒙性能优化实战-应用程序动效能力实践

本文介绍如何在开发应用程序时合理地使用动效,来获得更好的性能。主要通过减少布局和属性的变更频次,避免冗余刷新,从而降低性能开销。组件转场动画使用transition组件布局改动时使用图形变换属性动画动画参数相同时使用同一个animateTo多次animateTo时统一更新状态变量。

2025-06-21 19:28:19 992

原创 鸿蒙应用开发—@AnimatableExtend装饰器:定义可动画属性

AnimatableExtend装饰器用于自定义可动画的属性方法,在这个属性方法中修改组件不可动画的属性。在动画执行过程时,通过逐帧回调函数修改不可动画属性值,让不可动画属性也能实现动画效果。可动画属性:如果一个属性方法在animation属性前调用,改变这个属性的值可以生效animation属性的动画效果,这个属性称为可动画属性。比如height、width、backgroundColor、translate属性,Text组件的fontSize属性等。

2025-06-20 19:39:34 625

原创 鸿蒙应用开发—stateStyles:多态样式

stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下五种状态:focused:获焦态。normal:正常态。pressed:按压态。disabled:不可用态。selected10+:选中态。

2025-06-20 16:07:26 339

原创 鸿蒙应用开发—@Extend装饰器:定义扩展组件样式

在前文的示例中,可以使用@Styles用于样式的扩展,在@Styles的基础上,我们提供了@Extend,用于扩展原生组件样式。从API version 9开始,该装饰器支持在ArkTS卡片中使用。

2025-06-20 15:14:55 350

原创 鸿蒙应用开发—@Styles装饰器:定义组件重用样式

鸿蒙全栈开发技术栈:如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,我们推出了可以提炼公共样式进行复用的装饰器@Styles。@Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。从API version 9开始,该装饰器支持在ArkTS卡片中使用。

2025-06-20 14:07:37 439

原创 鸿蒙应用开发—wrapBuilder:封装全局@Builder

全局@Builder作为wrapBuilder的参数返回WrappedBuilder对象,实现 全局@Builder 可以进行赋值和传递。从API version 11开始使用。

2025-06-20 13:31:00 280

原创 鸿蒙应用开发—@Builder装饰器:自定义构建函数

允许在自定义组件内定义一个或多个@Builder方法,该方法被认为是该组件的私有、特殊类型的成员函数。自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用,但不允许在组件外调用。在自定义函数体中,this指代当前所属组件,组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。全局的自定义构建函数可以被整个应用获取,不允许使用this和bind方法。如果不涉及组件状态变化,建议使用全局的自定义构建方法。

2025-06-19 17:44:38 549

原创 鸿蒙应用开发—自定义组件成员属性访问限定符使用限制

ArkTS会对自定义组件的成员变量使用的访问限定符private/public/protected进行校验,当不按规范使用访问限定符private/public/protected时,会产生对应的日志信息。从API version 12开始,支持自定义组件成员属性访问限定符使用限制的规则。

2025-06-19 17:03:38 376

原创 鸿蒙应用开发—自定义组件冻结功能

自定义组件处于非激活状态时,状态变量将不响应更新,即@Watch不会调用,状态变量关联的节点不会刷新。通过freezeWhenInactive属性来决定是否使用冻结功能,不传参数时默认不使用。支持的场景有:页面路由,TabContent,LazyforEach,Navigation。从API version 11开始,支持自定义组件冻结功能。

2025-06-19 16:09:25 709

原创 鸿蒙应用开发—自定义组件的自定义布局

例如,在本示例中,在onMeasureSize中初始化组件大小size=100,后续的每一个子组件size会加上上一个子组件大小的一半,实现组件大小递增的效果。而在onPlaceChildren中,定义startPos=300,设置每一个子组件的位置为startPos减去子组件自身的高度,所有子组件右下角一致在顶点位置(300,300),实现一个从右下角开始展示组件的类Stack组件。onMeasureSize:组件每次布局时触发,计算子组件的尺寸,其执行时间先于onPlaceChildren。

2025-06-19 15:02:28 316

原创 鸿蒙应用开发—页面和自定义组件生命周期

自定义组件的创建:自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量:通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量,初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear,则执行aboutToAppear方法。在首次渲染的时候,执行build方法渲染系统组件,如果子组件为自定义组件,则创建自定义组件的实例。在首次渲染的过程中,框架会记录状态变量和组件的映射关系,当状态变量改变时,驱动其相关的组件刷新。

2025-06-19 13:35:21 785

原创 鸿蒙应用开发—创建自定义组件

以下示例展示了自定义组件的基本用法。@Componentbuild() {// HelloComponent自定义组件组合系统组件Row和TextRow() {// 状态变量message的改变驱动UI刷新,UI从'Hello, World!'刷新为'Hello, ArkUI!})如果在另外的文件中引用该自定义组件,需要使用export关键字导出,并在使用的页面import该自定义组件。

2025-06-18 17:18:06 660

原创 鸿蒙应用开发—@BuilderParam装饰器:引用\@Builder函数

当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,ArkUI引入了@BuilderParam装饰器,@BuilderParam用来装饰指向@Builder方法的变量,开发者可在初始化自定义组件时对此属性进行赋值,为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素,类似slot占位符。从API version 9开始,该装饰器支持在ArkTS卡片中使用。

2025-06-18 16:38:42 923

原创 鸿蒙应用开发—RelationalStore开发

RelationalStore提供了一套完整的对本地数据库进行管理的机制,对外提供了一系列的增、删、改、查等接口,也可以直接运行用户输入的SQL语句来满足复杂的场景需要。

2025-06-18 15:55:52 819

原创 鸿蒙应用开发—通过标准化数据通路实现数据共享

在多对多跨应用数据共享的场景下,需要提供一条数据通路能够接入多个不同应用的数据并共享给其他应用进行读取。UDMF针对多对多跨应用数据共享的不同业务场景提供了标准化的数据通路,提供了标准化的数据接入与读取接口。标准化数据通路是为各种业务场景提供的跨应用的数据接入与读取通路,它可以暂存应用需要共享的符合标准化数据定义的统一数据对象,并提供给其他应用进行访问,同时按照一定的策略对暂存数据的访问权限和生命周期进行管理。

2025-06-18 15:19:14 1051

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除