📚 Getting Started with HMOS Next: Using Basic ArkTS Components (Button, Text, Image)

Read the original article：📚 Getting Started with HMOS Next: Using Basic ArkTS Components (Button, Text, Image)

Basic ArkTS Components(prepared on Canva)

Introduction

ArkTS is a declarative user interface language built with TypeScript. If you’re new to ArkTS, knowing how to use basic elements like buttons, text, and images is a good starting point. This article will cover how to use these basic elements and create a small perfume project using these components.

📍 Text Component

The following attributions are supported: width, height, size, padding, margin, layoutWeight, constraintSize, textAlign, textOverflow, maxLines, lineHeight, decoration, baselineOffset, letterSpacing, minFontSize, maxFontSize, fontColor, fontSize, fontWeight. For more, check this link.

📍 Image Component

The Image component is usually used to display images in applications. It supports images in PNG, JPG, JPEG, BMP, SVG, WEBP, GIF, or HEIF format from the following data sources: PixelMap, ResourceStr, or DrawableDescriptor. The ohos.permission.INTERNET permission is required to use online images. In addition to the universal attributes, the following attributes are supported: alt, objectFit, fillColor, renderMode, and autoResize. For more, visit this link.

📍 Button Component

It creates a button based on text content. In this case, the component cannot contain child components. In addition to the universal attributes, the following attributes are supported: type, fontSize, fontColor, fontWeight, buttonStyle, and controlSize. For more, visit this link.

We’ve learned the text, image, and button components. Now, let’s use these components and practice together.

SDK Version: 5.0.2(14)

🎯 Create a project when selecting the Empty Ability on DevEco Studio.

Empty Ability

🎯 Give a name to your project and select the device types. Then click on the Finish button.

Configure the project

🎯 Create a text named Welcome to HarmonyOS Next.

Text("Welcome to HarmonyOS Next!")
        .padding({ bottom: 10 })
        .fontSize(12)
        .fontColor(Color.White)

🎯 Find an image, copy it, and paste it in the path of \entry\src\main\resources\base\media

Image($r('app.media.harmony'))
        .height('35%')
        .padding({ bottom: 10 })

🎯 Create a button named Click Me.

Button('Click Me')
        .fontSize(10)
        .onClick(() => {
          console.info('Button clicked!')
        })

🎯 Use the Column to see the components vertically, justifyContent to center, and backgroundColor to give a background color.

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("Welcome to HarmonyOS Next!")
        .padding({ bottom: 10 })
        .fontSize(12)
        .fontColor(Color.White)
      Image($r('app.media.harmony'))
        .height('35%')
        .padding({ bottom: 10 })
      Button('Click Me')
        .fontSize(10)
        .onClick(() => {
          console.info('Button clicked!')
        })
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Black)
    .padding({ right: 10, left: 10 })
    .height('100%')
    .width('100%')
  }
}

To run the code, select the previewer and click the run button.

Previewer

Result of the code:

Output

Conclusion

This Perfume App provides an example of user interface design and interaction by showing how to create a basic app using basic ArkTS components such as Image, Text, and Button on the HarmonyOS Next platform. Through this app, developers can gain insight into the structure, style, and functionality of ArkTS-based apps while exploring the potential of HarmonyOS Next.