DEV Community

Marxu
Marxu

Posted on

🌟 ArkTS Demystified: Build Modern UI with HarmonyOS Declarative Syntax(HarmonyOS 5.0.0 or high)

#harmonyos #webdev #huawei

🌟 ArkTS Demystified: Build Modern UI with HarmonyOS Declarative Syntax

ArkTS is the beating heart of HarmonyOS 5.0+. It's concise, reactive, and tailor-made for multi-device development. Let’s build a modern UI and understand how it works.

📖 What is ArkTS?

ArkTS is a TypeScript-inspired declarative UI language in HarmonyOS. Think of it as the best of SwiftUI + React Native — but for distributed apps.

🎯 Our Goal

We’ll build a reusable Counter component with:

  • State management
  • Event handling
  • Component composition

🧱 Step 1: Create a Counter Component

File: entry/src/main/ets/components/Counter.ets

@Component export struct Counter { @State count: number = 0; build() { Column() { Text(`Count: ${this.count}`) .fontSize(24) .margin(12) Row() { Button('-') .onClick(() => this.count--) .margin(8) Button('+') .onClick(() => this.count++) .margin(8) } } .alignItems(HorizontalAlign.Center) .justifyContent(FlexAlign.Center) .width('100%') .height('100%') } }
Enter fullscreen mode Exit fullscreen mode

🛠️ Step 2: Use the Counter in Index Page

File: pages/Index.ets

import { Counter } from '../components/Counter'; @Component struct IndexPage { build() { Column() { Text('Welcome to ArkTS Counter') .fontSize(28) .fontWeight(FontWeight.Bold) .margin(16) Counter() } .width('100%') .height('100%') } }
Enter fullscreen mode Exit fullscreen mode

🎮 Run Result

  • Shows title + counter value
  • Click + / - to increment/decrement
  • Full reactive re-rendering on state update

🖼️ UI Preview:

[ Welcome to ArkTS Counter ] [ Count: 0 ] [ [-] [+] ]
Enter fullscreen mode Exit fullscreen mode

⚠️ Easy Mistakes to Avoid

Mistake Cause Fix
count doesn't update UI Forgot @State Add @State before the variable
Buttons unresponsive Wrong method syntax Use arrow functions: () => this.count++
Error: ‘Counter not found’ Wrong path or forgot export Ensure export is used + import path correct
Layout not centered No .alignItems() or .justifyContent() Add them to the layout container

📌 Summary

You now know how to:

  • Define reusable UI components
  • Use ArkTS stateful logic
  • Build layouts using Column, Row, Text, and Button

🔮 Coming Next...

In the next post, we’ll explore distributed app development with HarmonyOS — build once, run on multiple devices!

👉 Subscribe for more hands-on HarmonyOS guides. Let’s master ArkTS together.

Top comments (0)