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

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

HarmonyOS
2024-09-30 12:14:21
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
鱼弦CTO
1

在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);
    }
}

#### 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>

#### 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!");
            }
        });
    }
}

### 总结

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

分享
微博
QQ
微信
回复
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其他独有属性赋值  
  }  
}

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

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

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

分享
微博
QQ
微信
回复
2024-09-30 17:32:35
相关问题
HarmonyOS 请提供个路由跳转Demo
349浏览 • 1回复 待解决
HarmonyOS 自定义相机demo
207浏览 • 1回复 待解决
请提供HarmonyOS硬编硬解demo
366浏览 • 1回复 待解决
HarmonyOS 全局自定义弹窗demo
240浏览 • 1回复 待解决
HarmonyOS 自定义相机演示demo
156浏览 • 1回复 待解决
HarmonyOS 如何实现下列功能,请提供demo
363浏览 • 1回复 待解决
hvigor自定义扩展demo
959浏览 • 1回复 待解决
HarmonyOS 自定义弹窗封装后不显示
271浏览 • 1回复 待解决
HarmonyOS 关于自定义弹窗的封装调用
277浏览 • 2回复 待解决
能够提供HarmonyOS自定义相机案例吗?
277浏览 • 1回复 待解决
HarmonyOS 自定义组件问题
318浏览 • 1回复 待解决
如何封装全局性的自定义弹窗?
253浏览 • 1回复 待解决
HarmonyOS Web是否提供自定义dns的方法
372浏览 • 1回复 待解决