HarmonyOS Next中如何封装自定义按钮，比如登录按钮？

Question

如题：HarmonyOS Next中如何封装自定义按钮，比如登录按钮？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在HarmonyOS Next中封装自定义按钮，涉及到创建一个自定义的UI组件。这通常包括以下步骤：

1. 创建自定义组件类：定义一个继承自Component或Element的自定义组件类。
2. 设计UI：在自定义组件类中，设计按钮的UI，包括大小、颜色、文本等。
3. 编写事件处理：在自定义组件类中编写按钮的事件处理方法，如点击事件。
4. 封装和使用：将自定义按钮封装为一个可复用的组件，并在需要的地方使用它。

使用HarmonyOS Next中的ArkTS创建自定义按钮的代码示例：

import { Component, Prop, Event, EventEmitter } from '@element';

@Component({
    tag: 'my-custom-button',
    style: `
        my-custom-button {
            width: 100%;
            height: 50px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    `
})
export default class MyCustomButton extends Component {

    @Prop() label: string;

    @Event() buttonClicked: EventEmitter;

    onClick() {
        this.buttonClicked.emit();
    }

    render() {
        return (
            <button onClick={this.onClick.bind(this)}>{this.label}</button>
        );
    }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 2

登录页面登录按钮和购物页面结算按钮可能样式相同。该场景常用方法是抽取相同样式的逻辑部分，并将其封装成一个自定义组件到公共组件库中。在业务场景开发时，统一从公共组件库获取封装好的公用组件。

以Button组件为例，当多处业务场景需要使用相同样式的Button组件时，将通用逻辑封装成一个MyButton自定义组件，并在通用逻辑中定制了公共的fontSize和fontColor属性。当需要把MyButton组件以Button扩展组件的形式集成到公共组件库中，提供给外部其他团队使用时，为了使它具备Button的所有基础能力并支持以链式调用的方式使用Button组件原生的属性接口，需要在MyButton组件内穷举所有的Button属性。自定义组件的代码如下：

// src/main/ets/view/CustomImageText.ets
@Component
struct MyButton {
  @Prop text: string = '';
  @Prop stateEffect: boolean = true;
  // 下面穷举所有Button独有属性
  // ...

  build() {
    Button(this.text)
      .fontSize(12)
      .fontColor($r('sys.color.comp_background_list_card'))
      .stateEffect(this.stateEffect) // stateEffect属性的作用是控制默认点击动画
  }
}

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

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

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。