BindSheet Usage on HarmonyOS Smartwatches

Read the original article：BindSheet Usage on HarmonyOS Smartwatches

📘 Introduction

When building apps for smartwatches, small screen size and gesture-based controls can make UI design a bit tricky. HarmonyOS offers a useful component called BindSheet, which lets you show panels that slide up from the bottom of the screen — a good way to keep things simple and user-friendly.

In this article, I’ll show how I used BindSheet in a social media clone project on HarmonyOS Next. I’ll explain the setup and how I used it to show a list of users in a clean and interactive way.

📋 What is BindSheet?

BindSheetis a UI component in HarmonyOS that allows you to display a panel from the bottom of the screen. It's often used to show additional content like menus, user lists, or settings without navigating away from the current page.

You can customize the panel with options like:

Fixed height or draggable detents
Title and subtitle
Blur background
Close icon and drag bar
$$isVisible: controls whether the sheet is shown
builderFunction(): defines the content inside the sheet
options: customize how the sheet looks and behaves

🛠️ Step 1: Define States and Sheet Logic

In my project, I used BindSheet to show followers and followings in a sliding panel. First, I created the necessary state variables:

Then, I created a function to open the sheet with a specific user list and title:

🛠️ Step 2: Create the Sheet Content

After defining the logic to open the sheet, I created a builder function to show the list of users. This list appears inside the BindSheet when it’s triggered.

Here’s the builder I used:

Each user is shown with an avatar, username, and a small “following” button. When a user is tapped, the sheet closes and the app navigates to their profile.

▶️ Step 3: Bind the Sheet to the UI

After creating the sheet content, I used the bindSheet function to connect it to the main layout. I placed it inside the build() function of the component:

Here:

this.isListSheetOpen controls the visibility.
this.renderUserListSheet() is the content inside the sheet.
onWillDismiss resets the state when the sheet is closed.

📌 I used mode: SheetMode.OVERLAY to make the sheet slide over the current screen.

✅ Conclusion

BindSheet is a useful component for creating clean and interactive panels in HarmonyOS wearable apps. In this example, I used it to display a list of followers and followings inside a social media clone app.

Instead of navigating to a new screen, I was able to keep the user in context by showing extra content in a smooth bottom sheet. This worked well on small screens like smartwatches and helped keep the UI simple.

If you’re working on a HarmonyOS Next project for wearables, I recommend giving BindSheet a try — especially for lists, menus, or quick actions.