如何通过 ArkTS 实现自定义组件，并支持动态样式切换？

最新推荐文章于 2025-12-15 14:43:46 发布

原创

最新推荐文章于 2025-12-15 14:43:46 发布 · 833 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #鸿蒙

你是不是也在想——“鸿蒙这么火，我能不能学会？”
答案是：当然可以！
这个专栏专为零基础小白设计，不需要编程基础，也不需要懂原理、背术语。我们会用最通俗易懂的语言、最贴近生活的案例，手把手带你从安装开发工具开始，一步步学会开发自己的鸿蒙应用。
不管你是学生、上班族、打算转行，还是单纯对技术感兴趣，只要你愿意花一点时间，就能在这里搞懂鸿蒙开发，并做出属于自己的App！
📌 关注本专栏《零基础学鸿蒙开发》，一起变强！
每一节内容我都会持续更新，配图+代码+解释全都有，欢迎点个关注，不走丢，我是小白酷爱学习，我们一起上路 🚀

全文目录：

前言

在现代应用开发中，自定义组件 和 动态样式切换 是提升用户体验和应用灵活性的重要功能。自定义组件可以让开发者根据需求封装功能，而动态样式切换（如 Dark Mode）则能提供个性化的用户界面，使得应用能够适应不同的使用环境。

鸿蒙系统中的 ArkTS 提供了强大的支持，使得开发者能够轻松实现 自定义组件，并根据用户需求动态切换样式。本文将详细介绍如何通过 ArkTS 来构建自定义组件，并实现动态样式切换，同时提升组件的可复用性和用户交互体验。

1. 自定义组件结构

自定义组件是 ArkTS 中 UI 设计的核心部分。它使得开发者能够将功能封装为独立的模块，增强代码的可复用性和可维护性。在 ArkTS 中，开发者通常会创建一个继承自 VComponent 的类，并在该类中实现 build() 方法来构建组件的 UI 结构。

1.1 自定义组件的基本结构

每个自定义组件都需要实现 build() 方法，返回一个 虚拟 DOM 树，描述组件的布局和结构。该方法通过 JSX 的形式定义 UI，通常会包括属性、事件和样式的定义。

示例：

import {
   
    VComponent, VText, VButton } from '@ohos.ark';

class MyCustomComponent extends VComponent {
   
   
  constructor() {
   
   
    super();
  }

  build() {
   
   
    return (
      <div>
        <VText value="Hello, ArkTS!" />
        <VButton text="Click me" onClick={
   
   this.handleClick} />
      </div>
    );
  }

  handleClick() {
   
   
    console.log("Button clicked!");
  }
}

export default MyCustomComponent;

在这个简单的示例中，MyCustomComponent 是一个自定义组件，包含一个文本（VText）和一个按钮（VButton）。build() 方法定义了组件的结构，点击按钮时会调用 handleClick 方法并输出日志。

1.2 自定义组件的属性

组件的属性允许开发者在实例化组件时传递动态数据和配置信息。这使得组件更加灵活，可以根据外部环境变化来调整组件的行为或外观。

示例：

import {
   
    VComponent, VText, VButton, Property } from '@ohos.ark';

class MyCustomComponent extends VComponent {
   
   
  @Property() text: string = "Default Text"; // 定义属性，默认为 "Default Text"

  constructor() {
   
   
    super();
  }

  build() {
   
   
    return (
      <div>
        <VText value={
   
   this.text} />
        <VButton text="Click me" onClick={