前言 网格拖拽，此功能很是常见，一般用于频道的编辑或者条目顺序的排列，在鸿蒙的开发中，针对网格的编辑，系统也给出了相关的Api，通过onItemDragStart和在onItemDrop即可轻松实现，onItemDragStart用于设置拖拽过程中的显示，onItemDrop是进行数据交换逻辑处理。 根据官方提供，我们随便实现了一个简单的拖拽效果： @Entry @Component struct Index { @State numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] @Builder itemLayout(text: string...

前言  本文基于Api12  之前的文章，针对Navigation做了简单的分析，无论是静态配置还是动态配置，都有着手动配置的需要，本篇文章就是要解决手动配置，利用路由库和插件实现自动配置的需求。 本篇文章大纲如下： 1、主页面和子页面模版（了解） 2、封装统一路由静态库（了解） 3、分析哪些需要插件自动完成（了解） 4、路由库和插件依赖 5、结合标题栏组件简化模版 6、路由库功能调用 7、简单总结 一、主页面和子页面模版（了解） Navigation是路由容器组件，一般作为首页的根容器，也就是说，我们只在首页面使用即可，对于所有的子页面使用NavDestination即可，项目中的页面，无外...

前言  本文基于Api12  如果你还在使用router做为页面跳转，建议切换Navigation组件作为应用路由框架，不为别的，因为官方目前针对router已不在推荐。  需要说明的是，Navigation它是一个组件，并不是像router那样可调用的方法，一般作为首页的根容器使用。 简单使用 简单实现一个小案例，从页面A跳转到页面B。按照官方案例，大致三步即可。 第一步，使用Navigation替换主入口页面，并设置NavPathStack，因为要使用NavPathStack执行跳转的逻辑。 @Entry @Component struct Index { pageStack: NavPa...

前言  本文基于Api12  无论是Android还是iOS，应用上架之前，备案是必须的，一般是有项目经理来推动，但是有些备案所需信息还是需要技术这边来提供的，比如应用的包名，公钥以及证书的MD5指纹等，那么对于鸿蒙，这些信息也是必须需要的。  第一项的软件包名称，就是指我们的包名，这个无须多言了，就是你创建项目时的包名：  已创建的项目可以去AppScope中的app.json5中查看即可。  如何获取公钥 如何拿到公钥信息，一开始以为是AppGallery Connect后台的公钥，其实不是的，这个大家一定要注意，后续查找官方文档中得知，需要通过命令进行获取，命令如下： openssl x...

前言  代码案例基于Api12  在很多的场景下，针对组件的属性，我们都需要动态来选择是否使用，比如组件的显示和隐藏，比如背景颜色改变的设置，高度的改变设置，字体大小的改变设置，等等，很多的场景下，都需要不同的状态来渲染我们的UI视图，在非声明式UI语言里，我们可以进行逻辑的判断也就是if/else语法，来控制组件的属性设置，比如在Android中，控制一个组件的显示与隐藏，我们就可以如下操作，伪代码如下： if(条件){ 显示 }else{ 隐藏 }  针对声明式语言，在ArkUI中，我们如何动态控制某些属性的设置呢？ 针对动态属性的设置，目前总结了三种使用方式，可以满足不同的业务场景，也希...

前言  代码案例基于Api13。  在前边的文章中，关于wrapBuilder传递参数我们有过概述，无论是定义在局部还是全局，传递参数都是非常的简单，直接调用builder函数即可，简单案例如下所示： @Builder function TextView(value: string) { Text(value) } @Entry @Component struct Index { textBuilder: WrappedBuilder<[string]> = wrapBuilder(TextView) build() { Column() { this.textBuilder.bu...

前言  代码案例基于Api13。  目前哪个行业最火，非AI莫属，deepseek发布之后，可以说，又把AI推上了一个新高度，在和AI进行询问会话的时候，我们可以发现，AI的回答都是以流式的效果进行展示的，也就是类似于打字机的效果，那么针对这种效果在实际的开发中是如何实现的呢？ 具体的效果，根据业务情况而定，有两种模式，一种主动的流式输出，也就是数据以流式的形式进行返回，前端直接用组件加载即可，第二种就是刻意的流式展示，也就是在拿到数据之后，前端实现流式输出，进行打字机展示。 打字机的效果，一般都是在会话聊天之中，也就是列表之中，在实际的开发中，还要兼顾到，流式输出的数据加载是否会影响性能，页...

前言  代码案例基于Api13。  在之前的文章中，我们简单分析了弹性布局Flex，并使用Flex实现了一个简单的流式布局，今天这篇文章，我们就结合搜索框，完成一个常见的搜索页面，具体的效果如下图所示：  这样的一个模版，可以简单的分为，三个部分，分别是上边的搜索框，中间的历史搜索和下边的热门搜索，搜索框，我们直接可以使用系统的组件Search，历史搜索，由于是内容不一的搜索的内容，这里使用弹性布局Flex，下边的热门搜索，条目规格一致，这里我们直接使用Grid网格组件。 快速使用 目前已经上传到了中心仓库，大家可以直接远程依赖使用，当然，你也可以下载源码进行使用。 远程依赖方式，有两种方式可...

前言  本文代码案例基于Api13。  随着官方的迭代，在新的Api中，对于新的应用开发，官方已经建议直接使用V2所属的装饰器进行开发了，所以，能上手V2的尽量上手V2吧，毕竟，V2是V1的增强版本，为开发者提供更多功能和灵活性，由V1升成V2，肯定是大势所趋；但是，毕竟V1有着大量的应用基础，使用的也非常广泛，如果V1版本的功能和性能已能满足需求，其实也不用切换，总之就一句话：新的应用尽量使用V2，老的应用，如果V1满足可以不切换V2，如果功能受限，建议循序渐进的进行切换。 本篇文章主要概述下V2版本装饰器中的@Monitor装饰器，它对标的是V1中的@Watch装饰器，但是使用上和功能上均...

前言  本文代码案例基于Api13。  在实际的开发中，我们经常会遇到自定义组件的情况，比如通用的列表组件，选项卡组件等等，由于使用方的样式不一，子组件是动态变化的，针对这一情况，就不得不让使用方把子组件视图传递过来，如何来接收这个UI视图，这就是@BuilderParam装饰器的作用。 简单案例 简单封装一个通用的List组件，由于每个列表的数据和UI布局都是不一样的，那么这两块就需要暴露给使用方，代码如下： /** * AUTHOR:AbnerMing * DATE:2025/2/13 * INTRODUCE:通用的列表组件 * */ @Component export struct Li...

前言  本文代码案例基于Api13，温馨提示：内容相对来说比较简单，如果您已掌握，略过即可。  如果说一个页面中组件有很多，我们都统一写到build函数中，显而易见，会导致build函数代码非常冗余，并且在有相同UI时，也做不到可复用效果，那么，针对这一问题如何解决呢？答案就是抽取出来；在页面内实现UI组件的抽取剥离，其实，在实际的开发中是非常常见的，也就是通过 @Builder装饰器来实现。 简单案例 以下是一个多文本展示案例，非常简单，就是几个Text组件，未抽取之前，都统一写在build函数之中。 @Entry @Component struct Index { build() { Co...