Using Focus Events and Focus Styles in ArkTS

Read the original article：Using Focus Events and Focus Styles in ArkTS

Requirement Description

How can developers effectively handle focus events and customize focus styles in HarmonyOS using ArkTS?

Background Knowledge

In user interface design, focus events are crucial for managing which UI elements receive input, especially in scenarios involving keyboard or remote navigation. Customizing focus styles enhances user experience by providing visual feedback, making the interface more intuitive and accessible. Understanding how focus events and styles work in ArkTS is essential for building responsive and interactive applications.

Implementation Steps

The focusBox() function is used to visually indicate when a UI component is focused. This is especially important for devices where users navigate the UI using a keyboard, remote control, or directional pad (like on TVs or set-top boxes), instead of touch.

When a user navigates to a button (i.e., it becomes focused), focusBox() defines how the focus outline (highlight) around that button should appear.

The focusBox() function provides a simple and effective solution for managing focus state. By visually highlighting focused UI elements—such as buttons—it helps users clearly identify which component is currently active, especially when navigating with a keyboard or remote. This enhances both usability and accessibility, making the interface more intuitive and responsive.

• Improves accessibility and usability.
• Helps users understand where they are in the UI.
• Provides visual consistency for navigation-based apps (like on HarmonyOS for TV or wearable devices).

Code Snippet / Configuration

Button("Button1")
  .width(80)
  .height(40)
  .fontColor(Color.White)
  .backgroundColor('#c4f2bd')
  .fontColor('#3d3d3d')
  .margin({
    right: 5,
    bottom: 5
  })
  .focusBox({
    margin: new LengthMetrics(0),
    strokeColor: ColorMetrics.rgba(148, 181, 138),
  })Copy codeCopy code
Button("Button2")
  .width(80)
  .height(40)
  .fontColor(Color.White)
  .fontColor('#3d3d3d')
  .backgroundColor('#f7f4c3')
  .margin({
    bottom: 5
  })
  .focusBox({
    margin: new LengthMetrics(0),
    strokeColor: ColorMetrics.rgba(199, 189, 95),
  })Copy codeCopy code
Row() {
  Button("Button3")
    .width(80)
    .height(40)
    .fontColor(Color.White)
    .backgroundColor('#f5aeae')
    .fontColor('#3d3d3d')
    .margin({
      right: 5
    })
    .focusBox({
      margin: new LengthMetrics(0),
      strokeColor: ColorMetrics.rgba(168, 119, 121),
    })Copy codeCopy code
Button("Button4")
  .width(80)
  .height(40)
  .fontColor(Color.White)
  .backgroundColor('#bde6f2')
  .fontColor('#3d3d3d')
  .focusBox({
    margin: new LengthMetrics(0),
    strokeColor: ColorMetrics.rgba(119, 148, 168),
  })

• strokeColor: ColorMetrics.rgba(...): Specifies the color of the focus outline (the border that appears when the button is focused). Each button has a different color for its focus box to match its background or visual theme.
• margin: new LengthMetrics(0): Defines the space between the button and the focus outline. 0 means the outline tightly wraps the button.

The focusBox() function provides a simple and effective solution for managing focus state. By visually highlighting focused UI elements—such as buttons—it helps users clearly identify which component is currently active, especially when navigating with a keyboard or remote. This enhances both usability and accessibility, making the interface more intuitive and responsive.

Test Results

Written by Aycanur Ucar