在复杂组件开发中，经常需要让使用者在不修改源码的前提下，向自定义组件内部注入额外的内容。ArkUI 提供了 @BuilderParam 属性装饰器来实现这一“插槽”能力，本文将演示如何为组件动态添加子组件。 插槽需求与问题 假设我们定义了一个名为 CustomWidget 的简单容器组件，返回一个带背景色的 Column： @Component struct CustomWidget { buil

下拉刷新是移动应用常用功能。虽然 ArkUI 自带 Refresh 组件，但在与 List 结合时往往难以满足定制化需求。本文以 RefreshList 为例，介绍如何手动处理触摸事件与滚动冲突，打造高可定制的下拉刷新控件。 1. 布局与插槽拆分 RefreshList 分为两部分： 刷新头（Header）：位于可视区域上方，根据下拉距离动态显示提示。内容区（Content）：内部为 List，展

借助 NPM 生态，你可以将自有 JavaScript/ETS 库发布到公共仓库，实现跨项目复用。本文以 MiniCanvas 为例，讲解在 Gitee 上创建、配置、发布与升级 OpenHarmony 三方库的完整流程。 一、初始化库项目 创建空模板在 DevEco Studio 中选择 “Empty Ability”，完成项目启动。 添加 Library 模块右键项目 → New Module

在上一篇文章中，我们通过组合系统的 Circle 组件实现了一个可定制的圆环控件，本篇将介绍如何利用 Canvas 和 MiniCanvas 两种方式自绘同样的圆环，并支持外部传参来设置半径、线宽、颜色及填充色。通过本节学习，读者可以深入掌握 Canvas 的使用以及一个轻量级绘图库 MiniCanvas 的接入方法。 1. Canvas 自绘方式 1.1 组件与绘图上下文准备 借助 ArkUI

在 UI 设计中，圆环（Ring）是一种常见的视觉元素，用以展示进度、刻度或装饰效果。通过组合现有的 Circle 组件，我们可以轻松地实现一个可定制的圆环控件，并支持外部传参来设置半径、环宽、环色及填充色。下面将分步介绍如何创建这样一个自定义组件。 1. 创建 Ring 组件骨架 首先，定义一个导出的组件 Ring，让系统识别它并生成相应的生命周期钩子。 @Component export st

1 Canvas 画布组件 1. Canvas 定义介绍ArkUI 提供的 Canvas 组件本质是一个“空白画布”，它承载所有自绘制操作。创建时，需要传入一个 CanvasRenderingContext2D 实例作为画笔： interface CanvasInterface { (context?: CanvasRenderingContext2D): CanvasAttribute; } 2

矩形与通用绘制容器是线性绘制的核心组成。Rect 用于绘制带或不带圆角的矩形，而 Shape 则作为所有绘制类组件的父容器，能够组合不同图形并应用统一的描边与填充样式。 1 Rect 组件 Rect 在自身坐标系内从 (0,0) 到 (width,height) 绘制一个矩形，支持统一或分角圆角，以及所有来自 CommonShapeMethod 的通用描边与填充属性。 1.1 定义 interfa

线性绘制组件 Line 与 Path 都基于自身坐标系进行渲染：左上角为 (0,0)，右下角为 (width,height)。掌握它们的用法，可以实现各种自定义分隔线、图形轮廓与矢量路径绘制。 1 Line 组件 Line 用于在自定义区域内绘制直线或虚线，可以通过起点、终点坐标及所有来自 CommonShapeMethod 的描边属性，灵活控制样式。 1.1 定义 interface Line

绘制类组件能够直接在界面上渲染几何图形，而 Circle 与 Ellipse 作为最常见的圆形与椭圆形组件，继承了前文介绍的 CommonShapeMethod，拥有一整套描边与填充的属性方法。掌握它们的使用，就能快速打造各种圆角按钮、进度指示器、装饰性图案等 UI 元素。 1 Circle Circle 组件用于绘制一个圆形，其宽度和高度共同决定最终的半径。可以通过各种描边、填充、虚线和拐角样式

绘制类组件（如 Circle、Rect、Path 等）都继承自 CommonShapeMethod，它定义了一组专用于控制图形描边与填充的公共属性。合理运用这些属性，能够轻松绘制出各种边框样式、虚线、半透明填充以及抗锯齿效果，为 UI 增添丰富的视觉表现力。 1 CommonShapeMethod 定义 export declare class CommonShapeMethod<T>