介绍 本示例介绍使用vibrator.startVibration方法实现手机振动效果，用animateTo显示动画实现点击后的抖动动画。 效果图预览 使用说明 加载完成后显示登录界面，未勾选协议时点击一键登录按钮会触发手机振动效果和提示文本的抖动动画。 实现思路 创建一个函数startVibrate()调用vibrator.startVibration方法实现手机振动效果（需要权限：ohos.permission.VIBRATE）。源码参考VibrateEffect.ets startVibrate(){ try{ //TODO:知识点：vibrator.startVibratio...

介绍 本示例介绍通过CustomDialogController类显示自定义日历选择器。 效果图预览 使用说明 加载完成后显示主界面，点当前日期后会弹出日历选择器，选择日期后会关闭弹窗，主页面日期会变成选定的日期。 实现思路 获取当前月和下个月的日期信息。源码参考GetDate.ets。 constSATURDAY=6//日历表上周六对应的序列号，从周日开始算起，取值06 exportfunctiongetMonthDate(specifiedMonth:number,specifiedYear:number){ letcurrentFirstWeekDay:number=0;//初...

介绍 本示例介绍使用Scroll组件的滚动事件 onScroll 实现状态栏显隐变化。该场景多用于各种软件的首页、我的等页面中。 效果预览图 使用说明 加载完成后显示状态栏显隐变化页面，上下拖动屏幕，顶端状态栏出现显隐变化。 实现思路 在置顶位置使用stack组件添加两层状态栏。源码参考NavigationBarChangeView.ets。 Stack(){ ... Header({headOpacity:this.headOpacity,titleBackgroundColor:$r('app.color.ohos_id_color_background'),...

介绍 本示例介绍使用Text、List等组件，添加点击事件onclick,动画，animationTo实现自定义Tab效果。 效果预览图 使用说明 点击页签进行切换，选中态页签字体放大加粗，颜色由灰变黑，起到强调作用，同时，底部颜色条横线位移到当前选中页签下方，内容区翻页到当前选中页签对应区域。 实现思路 页签实现：添加onClick方法，记录点击的index，index变化后，改变页签颜色、字体大小，使用animateTo方法实现页签切换动画。源码参考CustomView.ets。 Text(title) .textAlign(TextAlign.Center) .height($...

介绍 在很多应用中，会出现点击按钮出现水波纹的特效。 效果图预览 使用说明 进入页面，点击按钮，触发水波纹动画。 再次点击按钮，停止水波纹动画。 实现思路 本例涉及的关键特性和实现方案如下： 要实现存在两个连续的涟漪，需要两个层叠的Stack分别以一定延迟进行相同的动画。源码参考WaterRipples.ets。 Stack() .ripplesStyle() .opacity(this.immediatelyOpacity) .scale(this.immediatelyScale) Stack() .ripplesStyle() .opacity(this.delayOpacit...

介绍 本示例介绍如何使用Text组件实现验证码场景，并禁用对内容的选中、复制、光标。 效果图预览 使用说明 单击组件可弹出输入法 在进行验证码输入时，无法对中间单个数字进行更改，无法选中输入内容，无光标 实现思路 因为要禁用复制、选中等功能，这里使用了Text组件，而不是TextInput ForEach(this.codeIndexArray,(item:number,index:number)=>{ Text(this.codeText[item]) .verifyCodeUnitStyle() },(item:number,index:number)=>item.t...

介绍 本示例介绍了文本宽度过宽时，如何实现文本首尾相接循环滚动并显示在可视区，以及每循环滚动一次之后会停滞一段时间后再滚动。 效果图预览 使用说明： 1.进入页面，检票口文本处，实现文本首尾相接循环滚动，且在同一可视区，滚动完成之后，停滞一段时间后继续滚动。 实现思路 由于ArkUI中的Marquee组件无法实现文本接替并显示在同一可视区的效果，它只能等文本完全消失在可视区之后，才会再次显示在可视区，因此需要以下方案实现。 Text组件外层包裹一层Scroll组件，Scroll组件设置一定的百分比宽度值，并获取当前文本内容宽度和Scroll组件宽度，文本宽度大于Scroll组件宽度时，通过...

介绍 本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。 效果图预览 使用说明 进入页面，下拉列表触发刷新数据事件，等待数据刷新完成。 上滑列表到底部，触发加载更多数据事件，等待数据加载完成。 实现思路 使用第三方库pullToRefresh组件，将列表组件、绑定的数据对象和scroller对象包含进去，并添加上滑与下拉方法。源码参考PullToRefreshNews.ets PullToRefresh({ //必传项，列表组件所绑定的数据 data:$newsData, //必传项，需绑定传入主体布局内的列表或宫格组件 scroller...

介绍 翻页动效是应用开发中常见的动效场景，常见的有书籍翻页，日历翻页等。本例将介绍如何通过ArkUI提供的显示动画接口animateTo实现翻页的效果。 效果图预览 使用说明 本例通过setInterval函数每秒调用一次翻页动画，实现连续翻页效果。 实现思路 如图，左右两侧分别代表打开书籍的左右两面，上下两层用Stack组件堆叠放置。在上下两层，左右两侧，建立4个文本组件（下面用A、B、C、D代称）。当B沿旋转轴旋转180度覆盖在A上时，就体现为翻页效果。C用来占位，不需要做动作。一个翻页动作的完成包括以下几步： B沿旋转轴旋转180度。这里B的旋转是动画效果。 B旋转时，D会在右...

介绍 本示例通过模拟下载场景介绍如何将Native的进度信息实时同步到ArkTS侧。 效果图预览 使用说明 点击“StartDownload“按钮后，Native侧启动子线程模拟下载任务 Native侧启动子线程模拟下载，并通过Arkts的回调函数将进度信息实时传递到Arkts侧 实现思路 前端进度条使用Progress绘制 Progress({value:this.progress,total:100,type:ProgressType.Ring}) .width($r("app.integer.progress_size")) .height($r("app.integer.pr...

介绍 针对JS与C/C跨语言访问场景，NAPI使用比较繁琐。而AKI提供了极简语法糖使用方式，一行代码完成JS与C/C的无障碍跨语言互调，使用方便。本示例将介绍使用AKI编写C跨线程调用JS函数场景。通过调用C全局函数，创建子线程来调用JS函数，实现对变量value的加10操作，为开发者使用AKI提供参考。 效果图预览 使用说明 点击页面“AKI跨线程调用JS函数”按钮，每次点击，显示数值加10。 实现思路 以下是使用AKI和NPAI的libuv实现跨线程调用JS函数的实现对比： AKI和NAPI初始化。AKI初始化使用JSBIND_ADDON注册Native插件，使用AKI的JSBI...

介绍 本示例介绍了通过应用事件打点hiAppEvent获取上一次应用异常信息的方法，主要分为应用崩溃、应用卡死以及系统查杀三种。 效果图预览 使用说明： 点击构建应用崩溃事件，3s之后应用退出，然后打开应用进入应用异常页面，隔1min左右后，显示上次异常退出信息。 点击构建应用卡死事件，需手动退出，然后打开应用进入应用异常页面，隔1min左右后，显示上次异常退出信息。 实现思路 构建应用异常。源码参考ApplicationException.ets handleOperate(index:number){ switch(index){ case0: //在按钮点击函数中构造一个APP...

介绍 本示例介绍在开发应用以适应深色模式时，对于深色和浅色模式的适配方案，采取了多种策略如下： 固定属性适配：对于部分组件的颜色属性，如背景色或字体颜色，若保持不变，可直接设定固定色值或引用固定的资源文件。 双资源目录适配：在resources目录下新增dark子目录，用于存放深色模式下的特定颜色配置（color.json文件）和图片资源（media文件）。在深色模式下，系统会自动加载此目录中的颜色及图片资源，确保与浅色模式下的UI元素色彩差异性。 利用系统分层参数：对于支持深浅模式切换的系统层级颜色资源，我们可以直接引用这些具有分层特性的参数，使得当切换设备主题时，相关组件的颜色能根据系统...

介绍 图片预览在应用开发中是一种常见场景，在诸如QQ、微信、微博等应用中均被广泛使用。本模块基于Image组件实现了简单的图片预览功能。 使用说明： 双指捏合缩放图片大小 双击图片进行图片的大小切换 图片在放大模式下，滑动图片查看图片的对应位置 效果图预览 实现思路 image组件的objectFit属性设置为Contain以保证图片缩放过程中的宽高比 通过对image组件的宽高、位置控制来实现图片的缩放与移动 高性能知识点 不涉及 模块依赖 不涉及 工程结构&模块类型 imageviewer//har类型 |---constants//常量 |---model//模型层-方...

介绍 本示例介绍使用第三方库的Axios获取GBK格式的网络数据时，通过util实现GBK转换UTF-8格式。该场景多用于需要转换编码格式的应用。 效果图预览 使用说明 直接进入页面就可获取GBK格式的用户名信息并进行解码操作。 实现思路 使用第三方库Axios获取网络数据，并将获取数据类型设置为ARRAY_BUFFER。源码参考FriendsBook.ets axios<string,AxiosResponse<string>,null>({ method:"get", url:URL, responseType:'ARRAY_BUFFER' }) 使用ut...

介绍 本示例介绍使用了Tab组件实现自定义增删Tab页签的功能。该场景多用于浏览器等场景。 效果图预览 使用说明： 点击新增按钮，新增Tab页面。 点击删除按钮，删除Tab页面。 实现思路 设置Tab组件的barHeight为0，隐藏组件自带的TabBar。 Tabs(){ ... } .barHeight(0)//隐藏tab组件自带的tabbar 使用@Link修饰符，将自定义TabBar组件和Tab组件通过focusIndex和tabArray进行双向绑定。 //TabSheetComponent.ets @Component structTabSheetComponent...

介绍 本示例介绍用过使用ListItem组件属性swipeAction实现列表左滑编辑效果的功能。该场景多用于待办事项管理、文件管理、备忘录的记录管理等。 效果图预览 使用说明： 点击添加按钮，选择需要添加的待办事项。 长按待办事项，点击删除后，被勾选待办事项被删除。 左滑单个待办事项，点击删除按钮后，当前待办事项被删除。 实现步骤 List组件绑定@State修饰的数组变量toDoData。 ListItem组件设置左滑动效swipeAction 属性，使得单个ListItem可以进行左右滑动，并显示自定义的UIBuilder。属性。 触发点击事件新增/删除列表项，更新数组...

介绍 MpChart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI。本示例主要介绍如何使用三方库MpChart实现柱状图UI效果。如堆叠数据类型显示，Y轴是否显示，左Y轴位置，右Y轴位置，是否显示X轴，是否绘制背景色，是否设置MarkerView等。 效果图预览 使用说明 点击页面上控制项即可查看效果。需要注意的是选项”是否设置MarkerView“勾选后，点击柱状图中柱子会有弹窗效果。 实现思路 通过this.model=newBarChartModel()初始化图表配置构建类。源码参考BarChart.e...

介绍 本示例主要介绍在TaskPool子线程中使用dlopen预加载so库并使用句柄调用库函数的方法，以及在Native中使用pread系统函数读取Rawfile文件的部分文本内容，并添加HiLog日志。 效果图预览 使用说明 rawfile路径下存在一个有内容的文本文件rawfile.txt。 输入开始读取位置、需要读取的长度，点击“开始读取”，即可通过调用Native侧暴露的getRawFileContent接口把读取到的内容显示在界面上。 具体代码可参考MainPage.ets。 实现思路 在TaskPool子线程中使用dlopen预加载so库和使用句柄调用so库函数的方式 将需...