- 博客(204)
- 收藏
- 关注
RSS订阅原创 HarmonyOS核心知识点：ArkUI页面布局之添加组件（进度条 (Progress)）
Progress有5种可选类型，通过ProgressType可以设置进度条样式，ProgressType类型包括：ProgressType.Linear（线性样式）、 ProgressType.Ring（环形无刻度样式）、ProgressType.ScaleRing（环形有刻度样式）、ProgressType.Eclipse（圆形样式）和ProgressType.Capsule（胶囊样式）。其中，value用于设置初始进度值，total用于设置进度总长度，type用于设置Progress样式。
2025-04-02 17:30:27
434
原创 HarmonyOS核心知识点：ArkUI页面布局之添加组件（切换按钮 (Toggle)）
通过selectedColor属性设置Toggle打开选中后的背景颜色。通过switchPointColor属性设置Switch类型的圆形滑块颜色，仅对type为ToggleType.Switch生效。
2025-04-02 15:36:12
367
原创 HarmonyOS核心知识点：ArkUI界面布局之添加组件（按钮 (Button)
设置边框弧度。使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。设置文本样式。通过添加文本样式设置按钮文本的展示样式。设置背景颜色。添加backgroundColor属性设置按钮的背景颜色。创建功能型按钮。为删除操作创建一个按钮。
2025-04-02 13:35:38
355
原创 HarmonyOS核心知识点：ArkUI界面布局开发应用沉浸式效果
典型应用全屏窗口UI元素包括 状态栏 、应用界面和底部 导航条。开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感，从而使用户获得最佳的UI体验。图1界面元素示意图UI元素避让处理：导航条底部区域可以响应点击事件，除此之外的可交互UI元素和应用关键信息不建议放到导航条区域。沉浸式效果处理：将状态栏和导航条颜色与界面元素颜色相匹配，不出现明显的突兀感。
2025-04-01 22:20:53
933
原创 HarmonyOS核心知识点：ArkUI组件之选项卡 (Tabs)
对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。图9自定义导航栏系统默认情况下采用了下划线标志当前活跃的页签，而自定义导航栏需要自行实现相应的样式，用于区分当前活跃页签和未活跃页签。设置自定义导航栏需要使用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。
2025-04-01 20:22:42
826
原创 HarmonyOS核心知识点：ArkUI布局之创建轮播 (Swiper)
Swiper支持通过 customContentTransition 设置自定义切换动画，可以在回调中对视窗内所有页面逐帧设置透明度、缩放比例、位移、渲染层级等属性实现自定义切换动画。@Entry@Componenti++) {build() {Column() {Swiper() {})// 同组页面完全滑出视窗外时，重置属性值} else {// 同组页面未滑出视窗外时，对同组中左右两个页面，逐帧根据position修改属性值} else {})
2025-04-01 16:56:05
664
原创 HarmonyOS核心知识点：ArkUI布局之创建网格 (Grid/GridItem)
网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。ArkUI提供了 Grid] 容器组件和子组件 GridItem ，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、 懒加载 等方式生成子组件。
2025-04-01 15:17:14
964
原创 HarmonyOS核心知识点：ArkUI组件之创建列表 (List)
列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。使用列表可以轻松高效地显示结构化、可滚动的信息。通过在 List 组件中按垂直或者水平方向线性排列子组件 ListItemGroup ，为列表中的行或列提供单个视图，或使用 循环渲染 迭代一组行或列，或混合任意数量的单个视图和ForEach结构，构建一个列表。
2025-04-01 13:25:32
651
原创 HarmonyOS核心知识点：ArkUI框架之栅格布局 (GridRow/GridCol)
栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括：提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。
2025-03-31 22:21:33
866
原创 HarmonyOS核心知识点：ArkUI框架之相对布局 (RelativeContainer)
在应用的开发过程中，经常需要设计复杂界面，此时涉及到多个相同或不同组件之间的嵌套。如果布局组件嵌套深度过深，或者嵌套组件数过多，会带来额外的开销。如果在布局的方式上进行优化，就可以有效的提升性能，减少时间开销。RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系，适用于界面复杂场景的情况，对多个子组件进行对齐和排列。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。
2025-03-31 20:26:20
994
原创 HarmonyOS核心知识点：ArkUI框架之弹性布局 (Flex)
弹性布局（ Flex ）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。图1主轴为水平方向的Flex容器示意图。
2025-03-31 17:33:04
556
原创 HarmonyOS核心知识点：ArkUI框架之层叠布局 (Stack)
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过 Stack 容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。如图1，Stack作为容器，容器内的子元素的顺序为Item1->Item2->Item3。图1层叠布局。
2025-03-31 15:51:55
593
原创 HarmonyOS核心知识点：ArkUI 框架之线性布局 (Row/Column)
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器 Row 和 Column 构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。图1Column容器内子元素排列示意图图2Row容器内子元素排列示意图。
2025-03-31 13:36:19
681
原创 HarmonyOS核心知识点：UI布局各种方式
组件内容（绿色方块）：组件内容本身占用的大小，比如文本内容占用的大小。组件内容和组件内容区不一定匹配，比如设置了固定的width和height，此时组件内容的大小就是设置的width和height减去padding和border值，但文本内容则是通过文本布局引擎测算后得到的大小，可能出现文本真实大小小于设置的组件内容区大小。组件内容区（黄色方块）：组件内容区大小为组件区域大小减去组件的 border 值，组件内容区大小会作为组件内容（或者子组件）进行大小测算时的布局测算限制。确定页面的布局结构。
2025-03-30 21:48:09
773
原创 HarmonyOS核心知识点：UI开发（ArkTS声明式开发）
系统内置组件包括按钮、单选框、进度条、文本等。开发者可以通过链式调用的方式设置系统内置组件的渲染效果。开发者可以将系统内置组件组合为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面不同单元的独立创建、开发和复用，具有更强的工程性。
2025-03-30 20:19:42
933
原创 HarmonyOS核心知识点：主题设置(设置主题换肤)
针对应用，构建ArkUI应用级和页面级主题设置能力，并提供局部深浅色模式设置、动态换肤等功能。自定义品牌色应用级自定义品牌色局部页面自定义主题风格局部深浅色CustomTheme 用于自定义主题，属性可选，只需要复写修改的部分，未修改内容继承于系统，参考 系统缺省token色值。//自定义品牌色可在页面入口处统一设置，需要在页面build前执行 ThemeControl。其中， onWillApplyTheme 回调函数用于自定义组件获取当前生效的Theme对象。
2025-03-30 19:10:49
665
原创 HarmonyOS核心知识点：主题设置(应用深浅色适配)
当前系统存在深浅色两种显示模式，为了给用户更好的使用体验，应用应适配深浅色模式。应用跟随系统的深浅色模式应用主动设置深浅色模式。
2025-03-28 21:53:13
934
原创 HarmonyOS核心知识点：使用NDK接口构建UI(嵌入ArkTS组件)
针对需要使用ArkTS侧独立能力的场景，ArkUI开发框架提供了Native侧嵌入ArkTS组件的能力，该能力依赖 ComponentContent 机制，通过ComponentContent完成对ArkTS组件的封装，然后将封装对象转递到Native侧，通过Native侧的 OH_ArkUI_GetNodeHandleFromNapiValue 接口转化为ArkUI_NodeHandle对象用于Native侧组件挂载使用。以下示例代码在 接入ArkTS页面 章节基础上引入ArkTS的Refresh组件。
2025-03-28 20:45:30
647
原创 HarmonyOS核心知识点：使用NDK接口构建UI(构建自定义组件)
以下示例创建了一个自定义容器，该容器将子组件最大值加上额外边距作为自身大小，同时对子组件进行居中排布。图1自定义容器组件按照 接入ArkTS页面 创建前置工程。创建自定义容器组件封装对象。// 自定义容器组件示例public:// 使用自定义组件类型ARKUI_NODE_CUSTOM创建组件。// 注册自定义事件监听器。// 声明自定义事件并转递自身作为自定义数据。// 反注册自定义事件监听器。// 取消声明自定义事件。// 自定义属性事件更新需要主动调用标记脏区接口。
2025-03-28 17:29:43
953
原创 HarmonyOS核心知识点：使用NDK接口构建UI(构建弹窗)
ArkUI_NativeDialogHandle表示指向弹窗控制器的指针，可以通过调用ArkUI_NativeDialogAPI_x 的create接口创建一个弹窗控制器，弹窗接口集合定义在结构体里，命名为ArkUI_NativeDialogAPI_x （x表示版本），这些接口围绕弹窗控制器实现各种弹窗控制。当不再需要弹窗操作时，需要主动调用dispose接口销毁弹窗控制器对象。通过弹窗控制器显示自定义弹窗，可以设置自定义弹窗的样式和内容。可创建交互页面，打开或关闭弹窗。
2025-03-28 15:05:21
249
原创 HarmonyOS核心知识点：使用NDK接口构建UI(使用懒加载开发长列表界面)
针对List、Grid、WaterFlow、Swiper组件，提供 NodeAdapter 对象替代ArkTS侧的LazyForEach功能，用于按需生成子组件，其中List组件的属性枚举值为NODE_LIST_NODE_ADAPTER，Grid组件的属性枚举值为NODE_GRID_NODE_ADAPTER，WaterFlow组件的属性枚举值为NODE_WATER_FLOW_NODE_ADAPTER，Swiper组件的属性枚举值为NODE_SWIPER_NODE_ADAPTER。懒加载适配器相关功能实现。
2025-03-28 13:44:01
821
原创 HarmonyOS核心知识点：使用NDK接口构建UI(使用动画)
组件内转场通过NODE_XX_TRANSITION属性（XX包括：OPACITY、TRANSLATE、SCALE、ROTATE、MOVE）配置转场参数，在组件插入和删除时显示过渡动效（通过NODE_TRANSFORM_CENTER属性设置NODE_SCALE_TRANSITION和NODE_ROTATE_ROTATE动效的中心点坐标）。同时，可以通过Node-API桥接ArkTS侧帧动画能力，实现Native侧的动画效果。同属性动画，布局类改变宽高的动画，内容都是直接到终点状态。
2025-03-27 22:09:25
558
原创 HarmonyOS核心知识点：使用NDK接口构建UI(添加交互事件)
NDK接口针对UI组件的事件，提供了监听函数的方式。首先，可使用 addNodeEventReceiver 函数添加组件事件的监听器，该监听器会监听该组件上发生的所有事件，例如：点击事件、焦点事件。然后，可使用 registerNodeEvent 函数声明组件的哪些事件需要监听，NDK接口支持的事件范围通过 ArkUI_NodeEventType 枚举值定义。以下示例基于 接入ArkTS页面 章节，补充相关事件监听。
2025-03-27 20:24:37
800
原创 HarmonyOS核心知识点：使用NDK接口构建UI(接入ArkTS页面)
ArkUI开发框架提供了一系列NDK接口，能够在应用中使用C和C++代码构建UI界面，这些接口包括UI组件创建、UI树操作、属性设置和事件监听等。面向通用UI界面开发场景，建议使用ArkTS代码和ArkUI声明式开发框架。需要使用UI组件树控制接口来动态创建和挂载UI组件，方便实现自身UI开发框架的系统桥接。进一步提升UI界面性能，细粒度控制组件的创建和属性设置，以降低延迟、处理极高UI负载。重复使用自己或其他开发者的C或C++UI库。布局布局是UI的必要元素，定义了组件在界面中的大小位置。
2025-03-27 17:26:39
702
原创 HarmonyOS核心知识点：ArkUI之BuilderNode组件
BuilderNode 提供能够挂载原生组件的能力，支持通过无状态的UI方法 全局@Builder 生成组件树，并通过 getFrameNode 获取组件树的根 FrameNode 节点。该节点可以通过 NodeController 直接返回，挂载在 NodeContainer 节点下，也可以在FrameNode树结构和 RenderNode 树结构嵌入声明式的组件结构，实现混合显示的能力。同时BuilderNode可以提供纹理导出的功能，导出的纹理用于在 XComponent 中进行同层渲染显示。
2025-03-27 15:09:41
343
原创 HarmonyOS核心知识点：三方框架之RenderNode
对于不具备自己的渲染环境的三方框架，虽然实现了前端的解析以及布局、事件等处理，但需要依赖系统提供的基础渲染、动画的能力。FrameNode 上的通用属性、通用事件对这一类框架是多余的，会进行多次冗余的操作，包括布局、事件等处理逻辑。RenderNode 是更加轻量级的渲染节点，仅包含渲染相关的能力。在该节点上暴露了设置基础的渲染属性的能力，并提供节点的动态增加、删除能力以及自定义绘制的能力。可以向三方框架提供基础的渲染、动画能力。
2025-03-27 13:32:57
950
原创 HarmonyOS核心知识点：三方框架之FrameNode
对于具备自己前端定义的三方框架，需要将特定的dsl转换成为ArkUI的声明式描述。这个转换过程需依赖额外的数据驱动绑定至 Builder 中，转换比较复杂且性能较低。这一类框架一般依赖系统ArkUI框架的布局、事件能力，以及最基础的节点操作和自定义能力，大部分组件通过自定义完成，但是需要使用部分原生组件混合显示。FrameNode 的设计就是为了解决上述的问题。
2025-03-26 21:54:05
734
原创 HarmonyOS核心知识点：ArkUI框架之使用自定义能力
自定义节点是ArkUI框架通过接口提供了底层实体节点部分基础能力的节点对象，这些节点能够与原生控件进行混合显示。自定义节点的挂载和显示需要依赖 自定义占位节点。现有的自定义节点包括 FrameNode 、 RenderNode 、 BuilderNode 三类对象。FrameNode表示了单个的自定义组件节点，RenderNode表示更加轻量级的渲染节点，BuilderNode对象提供了能够创建、更新原生组件以及组件树的能力。自定义占位节点作为原生组件可以在原生组件树上为自定义节点提供挂载的点。
2025-03-26 20:23:10
772
原创 HarmonyOS核心知识点：ArkUI框架之多层级手势事件
可以通过设置属性，控制默认的多层级手势事件竞争流程，更好的实现手势事件。目前，responseRegion属性和hitTestBehavior属性可以控制Touch事件的分发，从而可以影响到onTouch事件和手势的响应。而绑定手势方法属性可以控制手势的竞争从而影响手势的响应，但不能影响到onTouch事件。
2025-03-26 17:02:47
576
原创 HarmonyOS核心知识点：ArkUI框架之组合手势
以在一个Column组件上绑定单击手势和双击手势组合而成的互斥识别组合手势为例，由于单击手势只需要一次点击即可触发而双击手势需要两次，每次的点击事件均被单击手势消费而不能积累成双击手势，所以双击手势无法触发。并行识别手势组合中的手势进行识别时互不影响。互斥识别组合手势中注册的手势将同时进行识别，若有一个手势识别成功，则结束手势识别，其他所有手势识别失败。以在一个Column组件上绑定点击手势和双击手势组成的并行识别手势为例，由于单击手势和双击手势是并行识别，因此两个手势可以同时进行识别，二者互不干涉。
2025-03-26 15:23:06
569
原创 HarmonyOS核心知识点：ArkUI框架之单一手势
SwipeGesture的触发条件为滑动速度达到100vp/s，PanGesture的触发条件为滑动距离达到5vp，先达到触发条件的手势触发。fingers：用于声明触发点击的手指数量，最小值为1，最大值为10，默认值为1。fingers：用于声明触发拖动手势所需要的最少手指数量，最小值为1，最大值为10，默认值为1。fingers：用于声明触发滑动手势所需要的最少手指数量，最小值为1，最大值为10，默认值为1。fingers：用于声明触发旋转手势所需要的最少手指数量，最小值为2，最大值为5，默认值为2。
2025-03-26 13:37:07
727
原创 HarmonyOS核心知识点：ArkUI框架之绑定手势方法
在默认情况下，手势事件为非冒泡事件，当父子组件绑定相同的手势时，父子组件绑定的手势事件会发生竞争，最多只有一个组件的手势事件能够获得响应。例如，当父组件Column和子组件Text同时绑定TapGesture手势时，父组件以带优先级手势priorityGesture的形式进行绑定时，优先响应父组件绑定的TapGesture。通过给各个组件绑定不同的手势事件，并设计事件的响应方式，当手势识别成功时，ArkUI框架将通过事件回调通知组件手势识别的结果。
2025-03-25 22:08:04
304
原创 HarmonyOS核心知识点：ArkUI组件之拖拽事件
拖拽框架提供了一种通过鼠标或手势触屏的方式传递数据，即从一个组件位置拖出数据，并拖入到另一个组件位置上进行响应，拖出一方提供数据，拖入一方接收和处理数据。该操作可以让用户方便地移动、复制或删除指定内容。拖拽操作：在某个能够响应拖出的组件上长按并滑动触发的拖拽行为，当用户释放时，拖拽操作结束；拖拽背景（背板）：用户所拖动数据的形象化表示，开发者可通过 onDragStart 的 CustomerBuilder 或 DragItemInfo 设置，也可以通过 dragPreview 通用属性设置；
2025-03-25 20:31:58
740
原创 HarmonyOS核心知识点：ArkUI组件之触屏事件
触摸事件可以同时多指触发，通过event参数可获取触发的手指位置、手指唯一标志、当前发生变化的手指和输入的设备源等信息。触屏事件指当手指/手写笔在组件上按下、滑动、抬起时触发的回调事件。包括 点击事件 、 拖拽事件 和 触摸事件。点击事件是指通过手指或手写笔做出一次完整的按下和抬起动作。event参数提供点击事件相对于窗口或组件的坐标位置，以及发生点击的事件源。例如通过按钮的点击事件控制图片的显示和隐藏。通过按钮的点击事件控制图片的显示和隐藏。
2025-03-25 15:24:09
342
原创 HarmonyOS核心知识点：事件分发
ArkUI触控事件，根据输入源不同，主要划分为touch类与mouse类。touch类的输入源包含：finger、penmouse类的输入源包含：mouse、touchpad、joysticktouchmouse触摸事件触摸事件点击事件鼠标事件拖拽事件点击事件手势事件拖拽事件手势事件无论是touch类事件还是mouse类事件，在ArkUI框架上均由触摸测试发起，触摸测试直接决定了ArkUI事件响应链的生成及事件的分发。
2025-03-25 13:45:48
799
原创 HarmonyOS核心知识点：ArkUI动画效果（阴影&色彩）
阴影接口 shadow 可以为当前组件添加阴影效果，该接口支持两种类型参数，开发者可配置 ShadowOptions 自定义阴影效果。ShadowOptions模式下，当radius = 0 或者 color 的透明度为0时，无阴影效果。通过颜色渐变接口，可以设置组件的背景颜色渐变效果，实现在两个或多个指定的颜色之间进行平稳的过渡。
2025-03-24 21:49:05
288
原创 HarmonyOS核心知识点：动画效果（模糊）
动画效果可以丰富界面的细节，提升UI界面的真实感和品质感。例如，模糊和阴影效果可以让物体看起来更加立体，使得动画更加生动。ArkUI提供了丰富的效果接口，开发者可快速打造出精致、个性化的效果。本章中主要对常用的模糊、阴影和色彩效果等效果接口进行了介绍。模糊可以用来体现界面空间的纵深感，区分前后元素的层级关系。
2025-03-24 20:21:56
274
原创 HarmonyOS核心知识点：ArkUI动画衔接
例如用户在应用启动过程中，上滑退出，那么启动动画应该立即过渡到退出动画，而不应该等启动动画完成后再退出，从而减少用户等待时间。对于桌面翻页类从跟手到离手触发动画的场景，离手后动画的初始速度应承继手势速度，避免由于速度不接续导致停顿感的产生。针对以上场景，系统已提供动画与动画、手势与动画之间的衔接能力，保证各类场景下动画平稳光滑地过渡的同时，尽可能降低开发难度。对于采用 springMotion 曲线的动画，离手阶段动画将自动继承跟手阶段动画的速度，并以跟手动画当前位置为起点，运动到指定的属性终点。
2025-03-24 17:35:42
487
原创 HarmonyOS核心知识点：ArkUI动画曲线
动画曲线是属性关于时间的变化函数，决定属性变化时产生动画的运动轨迹。某一时刻下动画曲线的斜率代表动画的速度，对应属性变化的快慢。一条优秀的动画曲线具备连续光滑、符合用户意图、符合物理世界客观规律的特点。开发者可结合用户的使用场景和意图，为动效选取合适的动画曲线。根据动画曲线是否符合物理世界客观规律，可将其分为物理曲线（ArkUI当前提供了多种物理弹簧曲线）和传统曲线两种类型。相比于传统曲线，物理曲线产生的运动轨迹更加符合用户认知，有助于创造自然生动的动画效果，建议开发者优先使用物理曲线。
2025-03-24 15:15:34
854
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人