HarmonyOS Development: In-depth Exploration of the Diverse Uses of Button Components

#harmonyosnext

In - Depth Exploration of Button Component Usage in HarmonyOS Development

In HarmonyOS app development, the Button component is a common interactive element. It can handle click events and meet complex interaction needs via various styles and layouts. This article presents a code example to illustrate diverse uses of Button components, covering normal buttons, capsule - shaped buttons, buttons with sub - components, and dynamic interactions.

1. Code Example Analysis

Here's a complete HarmonyOS app code example demonstrating multiple Button usages:

@Entry
@Component
struct Index {
  @State message: string = 'Hello';
  private flag: boolean = false;

  build() {
    Column() {
      // Normal button: Disable rounded corners with type: ButtonType.Normal
      Button(this.message, { type: ButtonType.Normal })
        .width(90)
        .height(50)
        .fontSize(14)
        .borderRadius(20) // Set button corner radius
        .backgroundColor(Color.Red) // Set background color
        .fontColor(Color.Black) // Set text color
        .margin({ top: 30 })
        .onClick(() => {
          if (!this.flag) { 
            this.message = "Button";
            this.flag = true;
          } else {
            this.message = "Hello";
            this.flag = false;
          }
        });

      // Normal button: Set background and text colors
      Button("Button2")
        .width(100)
        .height(50)
        .backgroundColor(Color.Black)
        .fontColor(Color.White)
        .margin({ top: 10 });

      // Button with sub - components
      Button({ type: ButtonType.Normal })
        Row() {
          Image($r("app.media.app_icon"))
            .width(20)
            .height(20)
            .margin({ left: 50 });
          Text("Contains Sub - components")
            .fontSize(14)
            .fontColor(Color.Gray)
            .margin({ left: 10 });
        }
        .alignItems(VerticalAlign.Center) // Vertically center sub - components
        .width(200)
        .height(200)
        .borderRadius(20)
        .backgroundColor(Color.Yellow)
        .margin({ top: 40 });

      // Capsule - shaped button
      Button({ type: ButtonType.Capsule })
        .width(100)
        .height(50)
        .backgroundColor(Color.Blue)
        .margin({ top: 10 });
    }
    .height('100%')
    .width('100%');
  }
}

2. Diverse Button Usages

2.1 Normal Button

The normal button is the basic type. Set type: ButtonType.Normal to disable rounded corners. In the example, the first button sets the corner radius with.borderRadius(20) and implements click logic with.onClick(). Clicking toggles the button text between "Hello" and "Button".

2.2 Button with Sub - Components

Buttons can contain not only text but also other components like Image and Text. In the example, the third button uses a Row layout to nest Image and Text, achieving a text - and - image effect. With.alignItems(VerticalAlign.Center), sub - components are vertically centered.

2.3 Capsule - Shaped Button

The capsule - shaped button has a rounded, streamlined appearance. Set type: ButtonType.Capsule to create it. In the example, the last button is of this type with a blue background.

3. Dynamic Interaction Effects

In the example, the first button uses the @State modifier to define a message variable and dynamically changes its value on clicks. This dynamic interaction enhances user experience and is common in HarmonyOS development.

4. Flexible Style and Layout Configuration

The Button component supports various style and layout settings:

Background color: Set with.backgroundColor().
Text color: Set with.fontColor().
Corner radius: Set with.borderRadius().
Size: Set with.width() and.height().
Margin: Set with.margin().

These settings make the Button component highly adaptable to different design requirements.

5. Summary

This article, through a code example, details the diverse uses of HarmonyOS Button components, including normal, capsule - shaped, and sub - component - containing buttons, as well as dynamic interactions. The Button component's versatility and flexibility make it essential for meeting complex interaction needs in HarmonyOS development.

DEV Community