HarmonyOS 请提供自定义组件封装demo

HarmonyOS 请提供自定义组件封装demo。

HarmonyOS

superinsect

2024-09-30 12:14:21

912浏览

回答 2

按赞同

按时间

鱼弦CTO

在HarmonyOS中，自定义组件是指你可以创建和封装自己的UI组件，以便在应用中重用。下面是一个简单的示例，展示如何创建一个自定义组件并将其封装到一个独立的类中。

### 示例目标

我们将创建一个自定义按钮，该按钮具有以下功能：

自定义文本
可以设置背景颜色
响应点击事件

### 创建自定义组件

#### Step 1: 创建项目结构

假设你已经在DevEco Studio中创建了一个新的HarmonyOS项目，我们将在该项目中添加自定义组件。

#### Step 2: 创建自定义组件类

在 entry/src/main/java/your/package/path 目录下创建一个新的Java文件，例如 CustomButton.java。

package your.package.path;

import ohos.agp.components.AttrSet;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Text;
import ohos.agp.utils.Color;
import ohos.app.Context;

public class CustomButton extends DirectionalLayout {
    
    private Text buttonText;

    public CustomButton(Context context) {
        super(context);
        init(context, null);
    }

    public CustomButton(Context context, AttrSet attrSet) {
        super(context, attrSet);
        init(context, attrSet);
    }

    public CustomButton(Context context, AttrSet attrSet, String styleName) {
        super(context, attrSet, styleName);
        init(context, attrSet);
    }

    private void init(Context context, AttrSet attrSet) {
        // 设置布局方向
        setOrientation(HORIZONTAL);

        // 初始化文本组件
        buttonText = new Text(context);
        buttonText.setText("Custom Button");
        buttonText.setTextColor(Color.WHITE);
        buttonText.setTextSize(50);

        // 将文本组件添加到当前布局中
        addComponent(buttonText);

        // 设置默认背景颜色
        setBackgroundColor(Color.BLUE);

        // 添加点击事件监听器
        setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                // 点击事件处理逻辑
                buttonText.setText("Clicked!");
            }
        });
    }

    // 设置按钮文字
    public void setButtonText(String text) {
        buttonText.setText(text);
    }

    // 设置背景颜色
    public void setButtonBackgroundColor(Color color) {
        setBackgroundColor(color);
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.

#### Step 3: 使用自定义组件

在你的布局文件中使用自定义组件。例如，在 entry/src/main/resources/base/layout/ability_main.xml 中：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical"
    ohos:padding="16vp">
    
    <your.package.path.CustomButton
        ohos:id="$+id:custom_button"
        ohos:width="match_parent"
        ohos:height="100vp"
        ohos:top_margin="20vp" />
</DirectionalLayout>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

#### Step 4: 在MainAbilitySlice中初始化并使用自定义组件

在 entry/src/main/java/your/package/path/MainAbilitySlice.java 中：

package your.package.path;

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.LayoutScatter;
import ohos.agp.components.Text;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        // 获取自定义组件
        CustomButton customButton = (CustomButton) findComponentById(ResourceTable.Id_custom_button);
        
        // 设置按钮文字和背景颜色
        customButton.setButtonText("Click Me");
        customButton.setButtonBackgroundColor(new Color(Color.GREEN.getValue()));

        // 添加点击事件监听器
        customButton.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                customButton.setButtonText("Button Clicked!");
            }
        });
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

### 总结

通过以上步骤，你可以创建和封装一个简单的自定义组件，并在你的HarmonyOS应用中使用它。这只是一个基本示例，你可以根据实际需求进一步扩展和定制你的组件。

2024-09-30 15:53:55

Heiang

可以参考以下demo，封装自定义Button组件。

@Component  
struct MyButton {  
  @Prop text: string = '';  
  @Prop stateEffect: boolean = true;  
  // ...穷举所有Button独有属性  
  build() {  
    Button(this.text)  
      .fontSize(12)  
      .fontColor('#FFFFFF')  
      .stateEffect(this.stateEffect)// stateEffect属性的作用是控制默认点击动画  
      .xxx //穷举Button其他独有属性赋值  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

在使用MyButton 组件时，若需修改组件显示内容text和点击动画效果stateEffect时（其他Button独有的属性用法相同），需要以参数的形式传入：

@Component  
struct Index {  
  build() {  
    MyButton({ text: '点击带有动效', stateEffect: true, ... }) // 入参包含MyButton 组件中定义的全部 Button独有属性  
  }  
}1.
2.
3.
4.
5.
6.

可以参考以下链接：https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-ui-component-encapsulation-V5

2024-09-30 17:32:35

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 请提供自定义组件封装demo

订阅鸿蒙技术特刊，精选内容抢先看