HarmonyOS 如何以现有组件为父类，继承后再自定义自己的组件

以Panel容器组件为例，能否以它为父类，继承后做一定的自定义改动，生成自己新的自定义组件？还是说所有的自定义组件必须得从头开始写？

HarmonyOS

Heiang

2024-09-26 11:52:13

浏览

回答 2

待解决

回答 2

按赞同

按时间

鱼弦CTO

在HarmonyOS的ArkUI中，自定义组件通常是通过组合现有组件来实现的，而不是通过继承。虽然传统面向对象编程中的继承概念在ArkUI中并不直接适用，但你可以通过组合和封装现有组件的方法来创建新的自定义组件。

### 示例：以 Panel 组件为基础创建自定义组件

假设你想基于 Panel 组件创建一个带有特定样式或者额外行为的新组件，可以按照以下步骤操作：

#### 步骤1: 创建新组件文件创建一个新的 .ets 文件，例如 CustomPanel.ets。

#### 步骤2: 组合现有组件在新组件中组合和封装 Panel 组件，并添加自定义逻辑或样式。

### 示例代码

// CustomPanel.ets
@Entry
@Component
struct CustomPanel {
    @Prop title: string = 'Default Title';
    
    build() {
        Panel({
            type: PanelType.Foldable,
            hasArrow: true,
            collapsed: false
        }) {
            Column({ space: 20 }) {
                Text(this.title)
                    .fontSize(24)
                    .textColor(Color.Black)
                    .padding(10)

                // 添加更多自定义内容
                Text("This is a custom panel")
                    .fontSize(18)
                    .textColor(Color.Gray)

                // 可以根据需要继续添加其他组件
            }
        }
        .width('100%')
        .height('auto')
        .borderRadius(10)
        .backgroundColor(Color.White)
    }
}

#### 使用自定义组件

在其他页面中，你可以像使用普通组件一样使用这个自定义组件。

// MainPage.ets
@Entry
@Component
struct MainPage {
    build() {
        Column({ space: 20, alignItems: ItemAlign.Center }) {
            CustomPanel({ title: "My Custom Panel" })
        }.padding(20)
    }
}

### 说明