DEV Community

Cover image for HarmonyOS Next Advanced UI components
liu yang
liu yang

Posted on

HarmonyOS Next Advanced UI components

#harmonyosnext

HarmonyOS Next Custom Component Development: From Basics to Advanced Techniques

I. Fundamentals of Custom Component Development

Component Definition and Structure

Custom components in HarmonyOS Next are developed using the declarative UI paradigm. They are defined using the @Component decorator and structured with the @Builder decorator to encapsulate UI and business logic for high reusability.

  • State-Driven UI Updates: Utilize decorators like @State and @Prop to link data with the view, enabling dynamic UI updates based on state changes. 
@Component
struct CustomButton {
  @State isPressed: boolean = false;
  build() {
    Button(this.isPressed ? 'Active' : 'Inactive')
      .onClick(() => { this.isPressed = !this.isPressed; });
  }
}
Enter fullscreen mode Exit fullscreen mode

Layout and Style Separation

Flexible layouts are achieved using container components like Column and Row, while styles are controlled via properties like margin, padding, and borderRadius. Dynamic style switching based on state variables is also supported.

@Builder function TabBuilder(index: number, name: string) {
  Text(name)
    .fontColor(this.currentIndex === index ? Color.White : Color.Black)
    .backgroundColor(this.currentIndex === index ? '#007DFF' : '#F1F3F5');
}
Enter fullscreen mode Exit fullscreen mode

Lifecycle and Event Handling

Component lifecycle events such as aboutToAppear and aboutToDisappear can be listened to for resource management.

II. Advanced Component Development: Custom TabBar

The TabBar is a common navigation component with high customization capabilities in HarmonyOS Next.

Basic TabBar Implementation

  • Structure and Data Binding: Use the Tabs container to wrap TabContent and bind custom navigation bars via the tabBar property. 
Tabs({ index: this.currentIndex }) {
  TabContent() { /* Content Page */ }.tabBar(this.TabBuilder(0, 'Home'));
  TabContent() { /* Content Page */ }.tabBar(this.TabBuilder(1, 'Profile'));
}
Enter fullscreen mode Exit fullscreen mode
  • Dynamic Style Switching: Adjust icon colors, text colors, and background styles based on the currentIndex state.

Advanced Effects

  • Curved Outline and Raised Effects: Create a raised arc effect for middle tabs by setting the borderRadius to half the width and adjusting the position with margin. 
Column() {
  Image(/* Icon */)
    .size({ width: 48, height: 48 });
}
.borderRadius(24)
.margin({ top: -10 });
Enter fullscreen mode Exit fullscreen mode
  • Interactive Animations: Implement click animations using the animateTo method. 
.onClick(() => {
  animateTo({ duration: 200 }, () => {
    this.iconOffset = 10; // Trigger displacement
  });
});
Enter fullscreen mode Exit fullscreen mode

III. Other Advanced Components: Drawer Development Tips

Drawer components can be implemented using similar logic to Tabs, combined with swipe events and layout animations.

  • Sidebar Layout: Use the Stack layout to overlay the main content and sidebar, controlling the display position with the offset property.

  • Gesture Interaction: Listen to onTouch events and dynamically update the sidebar position based on swipe distance.

Top comments (0)