普通网友-优快云博客

原创【鸿蒙基于API 13实战开发】—— ArkUI组件之Svg 开发

通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。svg 组件绘制路径时，通过Path中的M（起点）、H（水平线）、a（绘制弧形到指定位置）路径控制指令，并填充颜色实现饼状图效果。通过设置width、height、x、y和viewBox属性为Svg设置宽度、高度、x轴坐标、y轴坐标和Svg视口。Svg组件可以用来绘制常见图形和线段，如矩形（

2024-12-18 20:32:06 852

原创【鸿蒙基于API 13实战开发】—— ArkUI组件之栅格布局

在pages/index目录下的hml文件中创建一个grid-container组件，并添加 Grid-row 子组件。创建grid-container组件并添加grid-row，在grid-row组件内添加grid-col组件形成布局。grid-row仅支持grid-col为子组件，只能在grid-col组件中添加填充的内容。栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。grid-container仅支持grid-row为子组件。

2024-12-18 18:02:59 373

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之OffscreenCanvasRenderingContext2D对象

使用OffscreenCanvas在离屏Canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。离屏，即GPU在当前缓冲区以外新开辟的一个缓冲区。使用isPointInPath判断坐标点是否在路径的区域内，使用isPointInStroke判断坐标点是否在路径的边缘线上，并在页面上显示返回结果。以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。

2024-12-18 16:27:22 199

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之CanvasRenderingContext2D对象

添加createLinearGradient和createRadialGradient属性创建渐变容器，接着用addColorStop方法添加多个色块组成渐变色，再设置fillStyle为gradient将渐变色填充到矩形中，最后设置阴影的模糊级别（shadowBlur）、阴影颜色（shadowColor）及阴影偏移量（shadowOffset）。如下面的示例，先设置画笔为红色，在保存画笔后对画布进行清除并改变画笔为蓝色，当我们直接使用画笔时会画出一个蓝色矩形，对存储的画笔进行恢复后就可画出红色矩形。

2024-12-18 14:01:04 869

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之Canvas对象

Canvas组件提供画布，用于自定义绘制图形。具体用法请参考CanvasRenderingContext2D对象。

2024-12-17 22:45:40 330

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之qrcode开发

通过设置qrcode的type属性来选择按钮类型，如定义qrcode为矩形二维码、圆形二维码。通过color和background-color样式为二维码设置显示颜色和背景颜色。在pages/index目录下的hml文件中创建一个qrcode组件。在本场景中将二维码与输入框绑定，通过改变输入框的内容改变二维码。qrcode组件在创建的时候value的值为必填项。生成并显示二维码，具体用法请参考 qrcode。

2024-12-17 20:36:59 258

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之toolbar开发

toolbar为页面工具栏组件，用于展示针对当前界面的操作选项，可作为页面的一级导航。

2024-12-17 14:53:12 425

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之switch开发

设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。在下面示例中设置开关为打开状态（使用默认收货地址），关闭开关后页面显示选择地址按钮，点击按钮即可改变收货地址。当showtext属性值设置为true时，texton和textoff设置的文本才会生效。

2024-12-17 14:25:31 258

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之slider开发

chart为图表组件，用于呈现线形图、柱状图和量规图界面。

2024-12-16 22:11:21 249

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之slider开发

slider为滑动条组件，用来快速调节音量、亮度等。

2024-12-16 20:36:17 354

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之rating开发

rating为评分条组件，表示用户使用感受的衡量标准条。

2024-12-16 18:05:02 253

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之image-animator开发

在pages/index目录下的hml文件中创建一个image-animator组件，css文件中编写组件样式，js文件中引用图片。

2024-12-16 16:53:04 901

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之image开发

image是图片组件，用来渲染展示图片。

2024-12-16 15:02:16 330

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之button开发

button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。

2024-12-15 21:32:42 435

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之input开发

input是交互式组件，用于接收用户数据。其类型可设置为日期、多选框和按钮等。

2024-12-15 20:19:50 268

原创【鸿蒙基于API 13实战开发】—— ArkUI基础组件之text开发

text是文本组件，用于呈现一段文本信息。

2024-12-15 19:08:32 479

原创【鸿蒙基于API 13实战开发】—— ArkUI常见组件之swiper开发

swiper为滑动容器，提供切换显示子组件的能力。

2024-12-13 21:29:17 477

原创【鸿蒙基于API 13实战开发】—— ArkUI常见组件之tabs开发

tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。

2024-12-13 20:26:45 401

原创【鸿蒙基于API 13实战开发】—— ArkUI常见组件之stepper开发

当一个任务需要多个步骤时，可以使用stepper组件展示当前进展。

2024-12-13 16:20:59 408

原创【鸿蒙基于API 13实战开发】—— ArkUI常见组件之form开发

form是一个表单容器，支持容器内 Input 组件内容的提交和重置。

2024-12-13 15:18:31 422

原创【鸿蒙基于API 13实战开发】—— ArkUI常见组件之dialog开发

dialog组件用于创建自定义弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。

2024-12-13 14:06:27 287

原创【鸿蒙基于API 13实战开发】—— ArkUI常见组件之list开发

list是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。

2024-12-12 21:55:57 342

原创【鸿蒙基于API 13实战开发】—— NDK接口构建UI：通过XComponent接入无障碍

通过XComponent接入的三方平台，NDK提供了对接无障碍的接口函数，实现三方平台的组件在ArkUI中的无障碍能力。首先，需要使用XComponent的 OH_NativeXComponent_GetNativeAccessibilityProvider 获得无障碍接入provider。

2024-12-12 15:35:25 964

原创【鸿蒙基于API 13实战开发】—— NDK接口构建UI：嵌入ArkTS组件

针对需要使用ArkTS侧独立能力的场景，ArkUI开发框架提供了Native侧嵌入ArkTS组件的能力，该能力依赖 ComponentContent 机制，通过ComponentContent完成对ArkTS组件的封装，然后将封装对象转递到Native侧，通过Native侧的 OH_ArkUI_GetNodeHandleFromNapiValue 接口转化为ArkUI_NodeHandle对象用于Native侧组件挂载使用。

2024-12-12 14:04:13 287

原创【鸿蒙基于API 13实战开发】—— NDK接口构建UI：自定义组件

以下示例创建了一个自定义容器，该容器将子组件最大值加上额外边距作为自身大小，同时对子组件进行居中排布。图1自定义容器组件按照接入ArkTS页面创建前置工程。创建自定义容器组件封装对象。// 自定义容器组件示例public:// 使用自定义组件类型ARKUI_NODE_CUSTOM创建组件。// 注册自定义事件监听器。// 声明自定义事件并转递自身作为自定义数据。// 反注册自定义事件监听器。// 取消声明自定义事件。// 自定义属性事件更新需要主动调用标记脏区接口。

2024-12-11 21:33:13 659

原创【鸿蒙基于API 13实战开发】—— NDK接口构建UI：弹窗

通过弹窗控制器显示自定义弹窗，可以设置自定义弹窗的样式和内容。弹窗接口集合定义在结构体里，命名为ArkUI_NativeDialogAPI_x （x表示版本），这些接口围绕弹窗控制器实现各种弹窗控制。

2024-12-11 20:29:03 371

原创【鸿蒙基于API 13实战开发】—— 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。懒加载适配器相关功能实现。

2024-12-11 16:29:46 290

空空如也

空空如也