DEV Community: ShuGang Zhou

HarmonyOS5-NewsAPP-CalendarEventManager

ShuGang Zhou — Fri, 27 Jun 2025 07:49:09 +0000

HarmonyOS 5 News App Calendar Event Management Implementation

Abstract

This article introduces the implementation of the calendar event management function in the HarmonyOS 5.0 news application, including binding pop - up windows, adding calendar events, and displaying event details. It is implemented using the ArkTS language.

Implementation Steps

Bind the pop - up component.
Implement the function to add calendar events.
Build the account details component to display the event list.

Code Implementation

1. Bind the Pop - up Component

.bindSheet($$this.isShow, this.AccountDetailBuilder, { 
  height: 500 
})

2. Implement the Function to Add Calendar Events

async addCalendarEvent (title: string) { 
  await this.currCalendar?.addEvent({ 
    title: title, 
    startTime: Number(new Date('2025-12-12 19:00:00')), 
    endTime: Number(new Date('2025-12-12 21:00:00')), 
    reminderTime: [0, 5, 10, 60], 
    type: calendarManager.EventType.NORMAL 
  }) 
  this.currCalendarEvents = await this.currCalendar?.getEvents() || [] 
}

3. Build the Account Details Component to Display the Event List

@Builder 
AccountDetailBuilder() { 
  Column({ space: 15 }) { 
    Text(this.currCalendar?.getAccount().displayName) 
      .fontSize(24) 
      .fontWeight(500) 
    Column({ space: 15 }) { 
      Button('Subscribe CNN News') 
        .onClick(() => { 
          this.addCalendarEvent('Subscribe CNN News') 
        }) 
      Button('Subscribe BBC News') 
        .onClick(() => { 
          this.addCalendarEvent('Subscribe BBC News') 
        }) 
    } 
    Text('My Subscribe : ') 
    List({ space: 15 }) { 
      ForEach(this.currCalendarEvents, (event: calendarManager.Event) => { 
        ListItem(){ 
          Column({ space: 5 }){ 
            Text(event.title) 
            Text(new Date(event.startTime).toString()) 
          } 
          .padding({ left: 15, right: 15 }) 
          .justifyContent(FlexAlign.Center) 
          .alignItems(HorizontalAlign.Start) 
          .width('100%') 
          .height(60) 
          .borderRadius(12) 
          .backgroundColor('#DDDDDD') 
        } 
      }) 
    } 
  } 
  .padding(15) 
  .alignItems(HorizontalAlign.Start) 
}

Other API Explanations

getCalendarManager(context: Context): CalendarManager Get the CalendarManager object based on the context to manage the calendar.

createCalendar(calendarAccount: CalendarAccount): Promise Create a Calendar object based on the calendar account information using a Promise asynchronous callback.

addEvent(event: Event): Promise Create an event. The input parameter Event does not need to include the event ID. Use a Promise asynchronous callback.

editEvent(event: Event): Promise Create a single event. The input parameter Event does not need to include the event ID. Calling this interface will redirect to the event creation page. Use a Promise asynchronous callback.

deleteEvent(id: number): Promise Delete the event with the specified event ID using a Promise asynchronous callback.

updateEvent(event: Event): Promise Update an event using a Promise asynchronous callback.

getEvents(eventFilter?: EventFilter, eventKey?: (keyof Event)[]): Promise Get the events under the Calendar that match the query conditions using a Promise asynchronous callback.

Summary

Key knowledge points include pop - up binding, asynchronous function calls, event addition, and list display. The addCalendarEvent method is used to add events, the AccountDetailBuilder component is used to display subscribed news events, and the List and ForEach components are used to display the event list.

Notes

A schedule refers to a specific event or activity arrangement. Schedule management involves planning and controlling these events and activities, which can help make more effective use of relevant resources, improve productivity and efficiency, and enable people to better manage their time and tasks.

In Calendar Kit, a schedule (Event) belongs to a corresponding calendar account (Calendar). One calendar account can have multiple schedules, and one schedule only belongs to one Calendar.

After obtaining the calendar account object, you can manage the schedules under this account, including creating, deleting, modifying, and querying schedules. When creating or modifying a schedule, you can set relevant information such as the schedule's title, start time, end time, schedule type, schedule location, schedule reminder time, and schedule recurrence rules to achieve more comprehensive and effective schedule management.

HarmonyOS5-NewsAPP-CalendarAccountManager

ShuGang Zhou — Fri, 27 Jun 2025 06:36:53 +0000

HarmonyOS 5 News App Calendar Account Management Implementation

Abstract

This article introduces the implementation of the calendar account management function in the HarmonyOS 5.0 news application. It includes buttons for adding specific types of calendar accounts and a builder for deleting calendar accounts. The ArkTS language is used to implement the account addition and deletion operations.

Implementation Steps

Implement the account addition button component.
Implement the account deletion builder.
Bind the logic for account addition and deletion operations.

Code Implementation

1. Implement the Account Addition Button Component

Column({ space: 15 }){ 
  Button('Add Sports News Account') 
    .onClick(async () => { 
      await this.addAccount('Sports News', '#006699') 
      this.list = await this.calendarMgr.getAllCalendars() 
    }) 
  Button('Add World News Account') 
    .onClick(async () => { 
      await this.addAccount('World News', '#ffaa00') 
      this.list = await this.calendarMgr.getAllCalendars() 
    }) 
} 
.margin(15)

2. Implement the Account Deletion Builder

@Builder 
DeleteBuilder (calendar: calendarManager.Calendar) { 
  Text('Delete') 
    .fontSize(24) 
    .width(120) 
    .textAlign(TextAlign.Center) 
    .height('100%') 
    .onClick(async () => { 
      await this.calendarMgr.deleteCalendar(calendar) 
      this.list = await this.calendarMgr.getAllCalendars() 
    }) 
}

3. Operation Logic Explanation

When clicking the account addition button, the addAccount method is called to create the corresponding type of calendar account, and then the account list is updated. When clicking the delete button, the deleteCalendar method is called to delete the specified account, and the account list is also updated.

Other API Explanations

getCalendarManager(context: Context): CalendarManager Get the CalendarManager object based on the context to manage calendars.

createCalendar(calendarAccount: CalendarAccount): Promise Create a Calendar object based on the calendar account information using a Promise for asynchronous callbacks.

getCalendar(calendarAccount?: CalendarAccount): Promise
Get the default Calendar object or a specified Calendar object using a Promise for asynchronous callbacks.

The default Calendar is created when the calendar storage runs for the first time. If you don't care about the Calendar attribution when creating an Event, you don't need to create a Calendar through createCalendar(). You can directly use the default Calendar.

getAllCalendars(): Promise Get all Calendar objects created by the current application and the default Calendar object using a Promise for asynchronous callbacks.

deleteCalendar(calendar: Calendar): Promise Delete the specified Calendar object using a Promise for asynchronous callbacks.

getConfig(): CalendarConfig Get the calendar configuration information.

setConfig(config: CalendarConfig): Promise Set the calendar configuration information using a Promise for asynchronous callbacks.

getAccount(): CalendarAccount Get the calendar account information.

Summary

Key knowledge points include the use of the @Builder decorator, button click event handling, asynchronous function calls, and state updates. Through these implementations, the functions of adding and deleting calendar accounts are achieved, and the account list display is updated after each operation.

Application Scenarios

Calendar Kit provides calendar and schedule management capabilities, which generally refers to APIs (Application Programming Interfaces) that can be used to access and manipulate calendar data. These interfaces allow developers to integrate time - related schedule services from other applications (such as travel, dining, sports, and entertainment) with the system calendar, enabling functions such as schedule management, event creation, and query.

One - click Schedule Service: Through a permanent authorization mechanism, after the user permits the current application to read and write the system calendar, developers can write the corresponding schedule services into the calendar in the form of deeplink. According to the reminder rules set by the developer, when the schedule is approaching or due, the corresponding "service buttons" will be displayed in the calendar application, calendar notifications, calendar cards, etc. Users can click these buttons to launch the jump link and directly reach the service landing page in one step.

Constraints and Limitations

Currently, the relevant capabilities and interfaces of Calendar Kit can only be used in the Stage model.

To use the relevant capabilities of Calendar Kit, you need to obtain the permissions to read or write calendars and schedules. For specific guidance, please refer to the permission declaration.

When reading calendars or schedules, you need to apply for the ohos.permission.READ_CALENDAR permission.

When adding, deleting, or modifying calendars or schedules, you need to apply for the ohos.permission.WRITE_CALENDAR permission.

HarmonyOS5-NewsAPP-CalendarAccountList

ShuGang Zhou — Fri, 27 Jun 2025 06:25:54 +0000

HarmonyOS 5 News App Calendar Account List Implementation

Abstract

This article introduces the implementation of the NewsLivePage for the calendar account list in the HarmonyOS 5.0 news application. It uses the ArkTS language to implement functions such as calendar permission requests, calendar account creation, and list display.

Technical Introduction

Calendar Kit (Calendar Service) provides calendar and schedule management capabilities, usually referring to APIs (Application Programming Interfaces) that can be used to access and manipulate calendar data. These interfaces allow developers to integrate time - related schedule services (such as travel, dining, sports, entertainment, etc.) from other applications into the system calendar, thereby achieving functions such as schedule management, event creation, and query.

Calendar accounts are used to store and manage personal or team schedules. Through calendar accounts, users can easily view, edit, and share schedule information. The CalendarManager is used to manage Calendar accounts. A calendar account mainly contains account information CalendarAccount and configuration information CalendarConfig.

Developers can create calendar accounts specific to their applications and perform operations such as adding, deleting, updating, and querying calendar accounts. In addition, each event Event belongs to a specific calendar account, and schedules under that account can be managed through the calendar account. For specific guidance, please refer to Schedule Management.

Implementation Steps

Initialize the context and calendar manager.
Request calendar read and write permissions.
Implement the calendar account creation function.
Display the calendar account list.

Code Implementation

1. Initialize the Context and Calendar Manager

@Component 
struct NewsLivePage { 
  ctx = this.getUIContext().getHostContext() as common.UIAbilityContext 
  calendarMgr = calendarManager.getCalendarManager(this.ctx) 
  @State list: calendarManager.Calendar[] = [] 
}

2. Request Calendar Read and Write Permissions

aboutToAppear(): void { 
  const permissions: Permissions[] = [ 
    'ohos.permission.READ_CALENDAR', 
    'ohos.permission.WRITE_CALENDAR' 
  ]; 
  let atManager = abilityAccessCtrl.createAtManager() 
  atManager.requestPermissionsFromUser(this.ctx, permissions) 
}

3. Implement the Calendar Account Creation Function

async addAccount (name: string, color: string) { 
  const calendar3 = await this.calendarMgr.createCalendar({ 
    name: name, 
    type: calendarManager.CalendarType.LOCAL, 
    displayName: name + ' Account' 
  }) 
  calendar3.setConfig({ 
    enableReminder: true, 
    color: color 
  }); 
}

4. Display the Calendar Account List

build() { 
  NavDestination(){ 
    Stack({ alignContent: Alignment.Bottom }){ 
      List({ space: 15 }){ 
        ForEach(this.list, (calendar: calendarManager.Calendar) => { 
          ListItem(){ 
            Row(){ 
              Text(calendar.getAccount().displayName) 
                .fontSize(24) 
            } 
            .padding(15) 
            .width('100%') 
            .height(120) 
            .borderRadius(20) 
            .backgroundColor(calendar.getConfig().color) 
          } 
        }) 
      } 
      .padding(15) 
      .width('100%') 
      .height('100%') 
    } 
  } 
  .title('Calendar Account') 
  .onReady(async ctx => { 
    this.list = await this.calendarMgr.getAllCalendars() 
  }) 
}

Complete Code

@Component 
struct NewsLivePage { 
  ctx = this.getUIContext().getHostContext() as common.UIAbilityContext 
  calendarMgr = calendarManager.getCalendarManager(this.ctx) 
  @State list: calendarManager.Calendar[] = [] 

  aboutToAppear(): void { 
    const permissions: Permissions[] = [ 
      'ohos.permission.READ_CALENDAR', 
      'ohos.permission.WRITE_CALENDAR' 
    ]; 
    let atManager = abilityAccessCtrl.createAtManager() 
    atManager.requestPermissionsFromUser(this.ctx, permissions) 
  }

  async addAccount (name: string, color: string) { 
    const calendar3 = await this.calendarMgr.createCalendar({ 
      name: name, 
      type: calendarManager.CalendarType.LOCAL, 
      displayName: name + ' Account' 
    }) 
    calendar3.setConfig({ 
      enableReminder: true, 
      color: color 
    }); 
  }

  build() { 
  NavDestination(){ 
    Stack({ alignContent: Alignment.Bottom }){ 
      List({ space: 15 }){ 
        ForEach(this.list, (calendar: calendarManager.Calendar) => { 
          ListItem(){ 
            Row(){ 
              Text(calendar.getAccount().displayName) 
                .fontSize(24) 
            } 
            .padding(15) 
            .width('100%') 
            .height(120) 
            .borderRadius(20) 
            .backgroundColor(calendar.getConfig().color) 
          } 
        }) 
      } 
      .padding(15) 
      .width('100%') 
      .height('100%') 
    } 
  } 
  .title('Calendar Account') 
  .onReady(async ctx => { 
    this.list = await this.calendarMgr.getAllCalendars() 
  }) 
}
}

Summary

Key knowledge points include component state management with @State, permission requests, the use of asynchronous functions, and the use of the List and ForEach components. These implementations enable the creation and list display of calendar accounts.

Note

Ensure that the application has obtained calendar read and write permissions
After permission requests, refresh the list display
Set the background color of the list item based on the account color

HarmonyOS5-NewsAPP-NavBar

ShuGang Zhou — Fri, 27 Jun 2025 03:44:45 +0000

HarmonyOS 5 News App Navigation Bar Implementation

Abstract

This article introduces the implementation of the navigation bar in the HarmonyOS 5.0 news application. It uses the ArkTS language to implement the NavBarBuilder and BarButton components to control the layout and style of the navigation bar.

Implementation Steps

Define the NavBarBuilder builder.
Define the BarButton component.
Configure button styles and layouts.

Code Implementation

1. Define the `NavBarBuilder` Builder

@Builder 
NavBarBuilder() { 
  Row({ space: 10 }) { 
    BarButton({ icon: $r('sys.media.ohos_ic_public_email') , type: 'normal' }) 
    Blank() 
    BarButton({ icon: $r('sys.media.ohos_ic_public_search_filled') , type: 'normal' }) 
    BarButton({ icon: $r('sys.media.ohos_ic_public_clock') , type: 'normal' }) 
  } 
  .padding(15) 
  .width('100%') 
}

2. Define the `BarButton` Component

@Component 
struct BarButton { 
  icon: ResourceStr = '' 
  type: 'transparent' | 'normal' = 'transparent' 

  build() { 
    Row() { 
      Image(this.icon) 
        .width(24) 
        .height(24) 
        .fillColor(this.type === 'transparent' ? Color.White : Color.Black) 
    } 
    .justifyContent(FlexAlign.Center) 
    .width(40) 
    .aspectRatio(1) 
    .borderRadius(22) 
    .backgroundColor(this.type === 'transparent' ? '#45FFFFFF' : '#f3f4f5') 
  } 
}

Summary

Key knowledge points include the use of the @Builder decorator, component definition, the use of the Row layout container, and the configuration of style attributes. By combining the NavBarBuilder and BarButton components, a flexible and configurable navigation bar is implemented.

Expansion

Custom Components

In ArkUI, all UI display content consists of components. Those directly provided by the framework are called system components, while those defined by developers are called custom components. When developing UI interfaces, you need to not only combine system components but also consider code reusability, separation of business logic and UI, and the evolution of subsequent versions. Therefore, encapsulating UI and part of the business logic into custom components is an indispensable capability.

Custom Builder Functions

ArkUI provides a lightweight UI element reuse mechanism @Builder, whose internal UI structure is fixed and only performs data transfer with the user. Developers can abstract frequently used UI elements into functions and call them in the build function.

What are the differences and limitations between the custom builder function `@Builder` and the custom component `@Component`?

The main differences between the custom builder function @Builder and the custom component @Component are as follows:

The custom builder function @Builder is lighter. As a method for UI element abstraction, its implementation and invocation are simpler than those of custom components.
In a custom component, you can define member functions, variables, and the component's lifecycle.
The custom builder function @Builder does not support defining state variables and lifecycle.

In a custom component, changes to state variables can directly drive UI refresh.
However, the default value - passing parameter method of the custom builder function @Builder does not support dynamically changing components. When the passed parameter is a state variable, changes to the state variable will not cause the UI within the @Builder method to refresh. To achieve dynamic UI refresh, you need to pass parameters by reference.
To implement the slot function in a custom component, you need to use @Builder and @BuilderParam.
For specific implementation, refer to the @BuilderParam decorator: Reference the @Builder function.

If a custom component is used in the custom builder function @Builder, the corresponding custom component will be re - created each time the method is called.

HarmonyOS5-NewsAPP-KnockShare

ShuGang Zhou — Fri, 27 Jun 2025 03:12:10 +0000

HarmonyOS 5 News Application - Knock Sharing Function Implementation Case

Summary

This article provides a detailed introduction to implementing the knock sharing function in a HarmonyOS 5.0 news application. The KnockManager class is used to manage knock sharing events and achieve the sharing of news content.

Implementation Steps

Implement the KnockManager class using the singleton pattern to ensure there is only one instance globally.

static getInstance(ctx: common.UIAbilityContext, news: NewsModel) {
  if (!KnockManager.instance) {
    KnockManager.instance = new KnockManager(ctx, news)
  }
  return KnockManager.instance
}

Initialize the UI context and news data in the constructor.

constructor(ctx: common.UIAbilityContext, news: NewsModel) {
  this.ctx = ctx
}

Implement the knockCallback method to handle the specific logic of knock sharing, including obtaining media resources, saving files, and creating sharing data.

knockCallback(target: harmonyShare.SharableTarget) {
  if (this.news && this.ctx) {
    // The demo cover is a media resource, write it to the sandbox.
    const media = this.ctx.resourceManager.getMediaContentSync(this.news.cover as Resource)
    const filePath = this.ctx.filesDir + '/share_' + Date.now() + '.png'
    const file = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE)
    fileIo.writeSync(file.fd, media.buffer)
    const uri = fileUri.getUriFromPath(filePath)
    // Create share data
    const sharaData: systemShare.SharedData = new systemShare.SharedData({
      utd: uniformTypeDescriptor.UniformDataType.HYPERLINK,
      content: ' `https://edition.cnn.com/2025/06/20/sport/lionel-messi-club-world-cup-inter-miami-spt` ',
      thumbnailUri: uri,
      title: this.news.title,
      description: this.news.company,
    })
    // Perform knock share
    target.share(sharaData)
  }
}

Implement the bindEvent and unBindEvent methods to bind and unbind knock sharing events.

bindEvent() {
  if (!this.isBind) {
    harmonyShare.on('knockShare', (target) => {
      this.knockCallback(target)
    })
    this.isBind = true
  }
}

unBindEvent() {
  harmonyShare.off('knockShare')
  this.isBind = false
}

Code Implementation

export class KnockManager {
   private static instance: KnockManager
   private ctx?: common.UIAbilityContext
   private isBind: boolean = false
   private news?: NewsModel

   static getInstance(ctx: common.UIAbilityContext, news: NewsModel) {
     if (!KnockManager.instance) {
       KnockManager.instance = new KnockManager(ctx, news)
     }
     return KnockManager.instance
   }

   constructor(ctx: common.UIAbilityContext, news: NewsModel) {
     this.ctx = ctx
   }

   // Handle knock logic
   knockCallback(target: harmonyShare.SharableTarget) {
     if (this.news && this.ctx) {
       // The demo cover is a media resource, write it to the sandbox.
       const media = this.ctx.resourceManager.getMediaContentSync(this.news.cover as Resource)
       const filePath = this.ctx.filesDir + '/share_' + Date.now() + '.png'
       const file = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE)
       fileIo.writeSync(file.fd, media.buffer)
       const uri = fileUri.getUriFromPath(filePath)
       // Create share data
       const sharaData: systemShare.SharedData = new systemShare.SharedData({
         utd: uniformTypeDescriptor.UniformDataType.HYPERLINK,
         content: ' `https://edition.cnn.com/2025/06/20/sport/lionel-messi-club-world-cup-inter-miami-spt` ',
         thumbnailUri: uri,
         title: this.news.title,
         description: this.news.company,
       })
       // Perform knock share
       target.share(sharaData)
     }
   }

   bindEvent() {
     if (!this.isBind) {
       harmonyShare.on('knockShare', (target) => {
         this.knockCallback(target)
       })
       this.isBind = true
     }
   }

   unBindEvent() {
     harmonyShare.off('knockShare')
     this.isBind = false
   }
 }

Conclusion

This article implements the knock sharing function of the news application. Key knowledge points include the application of the singleton pattern, file operations, media resource acquisition, and the creation of sharing data. The KnockManager class is used to centrally manage knock sharing events, which improves the maintainability and reusability of the code.

Use Cases

The host application enters a shareable interface, such as opening or selecting a file, a memo, a contact detail, or personal hotspot/Wi-Fi.
The host application can share multiple items, such as multiple selected images.
Share Kit supports tap - to - share between mobile phones and PC/2in1 devices. Leveraging the screen perception capability of PC/2in1 devices, it can recognize the action and position of a mobile phone tapping the screen to achieve window - level interaction on PC/2in1 devices.

HarmonyOS5-NewsAPP-SystemShare

ShuGang Zhou — Fri, 27 Jun 2025 02:51:49 +0000

HarmonyOS 5 News Application - System Sharing Function Implementation Case

Summary

This article details the implementation of the system sharing function in a HarmonyOS 5.0 news application. By using the BarButton component and the systemShare module, the sharing function of news links is achieved.

Implementation Steps

Create an instance of the BarButton component and set the sharing icon.
Add a click event to the BarButton component.
Create a SharedData object in the click event and set the sharing data.
Create an instance of ShareController and pass in the sharing data.
Get the UI context and call the show method to display the sharing interface.

Code Implementation

BarButton({ icon: $r('sys.media.ohos_ic_public_share') }) 
         .onClick(() => { 
           // system share 
           const data = new systemShare.SharedData({ 
             utd: uniformTypeDescriptor.UniformDataType.HYPERLINK, 
             title: 'NewsAPP', 
             content: ' `https://edition.cnn.com/` ' 
           }) 
           // Explanation
           // utd: Uniform Type Descriptor, used to specify the type of shared data, here it is a hyperlink.
           // title: Sharing title, here it is the name of the news application.
           // content: Shared content, here it is the link of the news application.
           const controller = new systemShare.ShareController(data) 
           const ctx = this.getUIContext().getHostContext() as common.UIAbilityContext 
           controller.show(ctx, { 
             previewMode: systemShare.SharePreviewMode.DETAIL, 
             selectionMode: systemShare.SelectionMode.SINGLE 
           }) 
         })

Access Modes

Full Access Mode Directly use the system sharing panel. It is suitable for Huawei - developed applications and developers who have no commercial requirements for the sharing method area. They can directly use the system panel to reduce development costs.
Partial Access Mode Developers develop their own sharing capability panel and provide a system sharing entry in the sharing panel. It is suitable for developers who have commercial requirements for the sharing method area or have their own unique business logic.

Conclusion

This article implements the system sharing function of the news application. Key knowledge points include the use of the systemShare module, the creation of SharedData objects and ShareController instances, and how to trigger the sharing operation in the click event. Through these steps, the system sharing function can be easily integrated into HarmonyOS applications.

Application Scenarios

Share Kit provides applications with the ability to share content such as text, images, and videos across applications and devices.

Applications configure the content to be shared and the preview style to Share Kit, which will be used according to different scenarios:

For inter - application sharing scenarios, a sharing panel is constructed based on information such as the data type and quantity of the shared content. It provides users with content previews, recommended contacts for sharing, associated applications, and operation interfaces, facilitating users to quickly select sharing applications or operations and distribute the content to the target applications.

For cross - device sharing scenarios, a preview interface is constructed based on information such as the data type and quantity of the shared content for cross - device sharing.

Constraints and Limitations

Both the host application and the target application must define data types in accordance with the UTD (Uniform Type Descriptor) specification defined by the UDMF (Uniform Data Management Framework). The target application needs to configure the supported types in the application configuration file. For example, to support all image types, it can be declared as: general.image.

The total amount of sharing data description information configured by the host application cannot exceed 200KB, and the total number of sharing items cannot exceed 500.

HarmonyOS5-NewsAPP-NewsDetailPage

ShuGang Zhou — Thu, 26 Jun 2025 03:48:59 +0000

HarmonyOS 5 News Application - News Detail Page Implementation Case

Summary

This article details the implementation of the news detail page in a HarmonyOS 5.0 news application using the ArkTS language. By defining the BarButton and NewDetailPage components, it implements the interface layout, status bar color setting, and page navigation of the news detail page.

Implementation Steps

Define the BarButton component to display icon buttons.
Define the NewDetailPage component to handle the business logic of the news detail page.
Implement the setStatusBarContentColor method to set the status bar color.
Build three @Builder functions, CustomBarBuilder, TitleBuilder, and ContentBuilder, to construct the UI of different parts of the page.
Combine the components in the build method to complete the page layout.

Code Implementation

@Component 
struct BarButton { 
  icon: ResourceStr = '' 

  build() { 
    Row() { 
      Image(this.icon) 
        .width(24) 
        .height(24) 
        .fillColor(Color.White) 
    } 
    .justifyContent(FlexAlign.Center) 
    .width(40) 
    .aspectRatio(1) 
    .borderRadius(22) 
    .backgroundColor('#45FFFFFF') 
  } 
} 

@Component 
struct NewDetailPage { 
  news: NewsModel = {} as NewsModel 


  async setStatusBarContentColor(color: string) { 
    const ctx = this.getUIContext() 
      .getHostContext()! 
    const win = await window.getLastWindow(ctx) 
    win.setWindowSystemBarProperties({ 
      statusBarContentColor: color 
    }) 
  } 

  @Builder 
  CustomBarBuilder() { 
    Row({ space: 10 }) { 
      BarButton({ icon: $r('sys.media.ohos_ic_public_arrow_left') }) 
        .onClick(() => pathStack.pop()) 
      Blank() 
      BarButton({ icon: $r('sys.media.ohos_ic_public_share') }) 
      BarButton({ icon: $r('sys.media.ohos_ic_public_more') }) 
    } 
    .padding(15) 
    .width('100%') 
  } 

  @Builder 
  TitleBuilder () { 
    Column({ space: 12 }){ 
      Button(this.news.category) 
        .size({ height: 36 }) 
      Text(this.news.title) 
        .fontSize(24) 
        .fontWeight(FontWeight.Medium) 
        .fontColor(Color.White) 
      Text() { 
        Span(this.news.author) 
        Span('·') 
        Span(this.news.time) 
      } 
      .fontSize(14) 
      .fontColor(Color.White) 
    } 
    .padding(15) 
    .height(300) 
    .width('100%') 
    .justifyContent(FlexAlign.End) 
    .alignItems(HorizontalAlign.Start) 
  } 

  @Builder 
  ContentBuilder () { 
    Column(){ 
      Row({ space: 10 }){ 
        Image(this.news.companyLogo) 
          .width(40) 
          .aspectRatio(1) 
          .borderRadius(20) 
        Text(this.news.company) 
          .fontSize(18) 
          .fontWeight(FontWeight.Bold) 
      } 
      .width('100%') 
      .height(60) 
      Text(` 
      At the newly expanded FIFA Club World Cup on Thursday in Atlanta, with the event still in its infancy, that old saying was tossed to the side and replaced by a question on the lips of the 31,783 in attendance – can a player be bigger than the tournament? 

      The soccer star in question, of course, was a certain Lionel Andrés Messi, for whom the masses had made their pilgrimage to worship, as his Inter Miami took on Portuguese giant FC Porto in the second matchday of Group A. 

      But until a magical Messi moment in the 54th minute, the match was in danger of becoming a mere sideshow to supporters expressing their admiration – actually, more like unbridled passion – for the 37-year-old who has long cemented his status as one of the greats of the sport. And let’s face it: winning nearly everything of note for Barcelona and Paris Saint-Germain – as well as his country of Argentina, who is the reigning World Cup champion – doesn’t exactly hurt his case. 
      `) 
        .fontSize(16) 
        .lineHeight(24) 

    } 
    .borderRadius({ topLeft: 30, topRight: 30 }) 
    .backgroundColor(Color.White) 
    .padding(15) 
  } 

  build() { 
    NavDestination() { 
      List(){ 
        ListItem(){ 
          this.CustomBarBuilder() 
        } 
        ListItem(){ 
          this.TitleBuilder() 
        } 
        ListItem(){ 
          this.ContentBuilder() 
        } 
      } 
      .width('100%') 
      .height('100%') 
      .layoutWeight(1) 
    } 
    .hideTitleBar(true) 
    .backgroundImage($r('app.media.news01')) 
    .backgroundImageSize({ height: '60%', width: 'auto' }) 
    .backgroundImagePosition(Alignment.Top) 
    .onShown(() => this.setStatusBarContentColor('#FFFFFF')) 
    .onHidden(() => this.setStatusBarContentColor('#000000')) 
    .onReady((ctx) => { 
      this.news = ctx.pathInfo.param as NewsModel 
    }) 
  } 
}

Conclusion

This article implements the core functions of the news detail page in a news application. Key knowledge points include component - based development, the use of @Builder functions, dynamic status bar color setting, and page navigation. Component - based development improves the maintainability and reusability of the code.

HarmonyOS5-NewsAPP-NewsListPage

ShuGang Zhou — Thu, 26 Jun 2025 03:47:09 +0000

HarmonyOS 5 News Application - News List Page Implementation Case

Summary

This article introduces how to implement the news list page in a HarmonyOS 5.0 news application using the ArkTS language. By leveraging state management and UI components, it achieves the functions of news category filtering and list display.

Implementation Steps

Define necessary state variables.
Build navigation and search components.
Implement the news category filtering function.
Display the news list.

Code Implementation

1. Define State Variables

interface NewsModel {
  id: string
  author: string
  company: string
  time: string
  title: string
  category: string
}

@Component
struct NewsListPage {
  @State list: NewsModel[] = [
    {
      id: '1',
      author: 'Zhang San',
      company: 'Science and Technology Daily',
      time: '2025-06-20',
      title: 'HarmonyOS 5 New Features Released',
      category: 'Technology'
    },
    {
      id: '2',
      author: 'Li Si',
      company: 'Sports News',
      time: '2025-06-21',
      title: 'Football World Cup Schedule Announced',
      category: 'Sports'
    }
  ]
  @State categories: string[] = ['All', 'Technology', 'Sports', 'Finance', 'World']
}

2. Build Navigation and Search Components

  build() {
    NavDestination() {
      Column() {
        Column() {
          Text('Discover News')
            .fontSize(32)
            .fontWeight(FontWeight.Bold)
          Text('Stay Informed with Global News')
            .fontColor(Color.Gray)
            .margin({ top: 4 })
          Search({ placeholder: 'Search News' })
            .height(48)
            .searchButton('Search')
            .margin({ top: 20 })
            .searchIcon({ size: 20 })
        }
        .width('100%')
        .padding(15)
        .alignItems(HorizontalAlign.Start)

3. Implement the News Category Filtering Function

        List({ space: 15 }) {
          ForEach(this.categories, (cate: string) => {
            ListItem() {
              Button(cate)
                .height(40)
                .onClick(() => {
                  if (cate === 'All') {
                    this.list = mockData
                  } else {
                    this.list = mockData.filter(item => item.category === cate)
                  }
                })
            }
          })
        }
        .contentStartOffset(15)
        .width('100%')
        .height(64)
        .listDirection(Axis.Horizontal)
        .scrollBar(BarState.Off)

4. Display the News List

        List({ space: 12 }) {
          ForEach(this.list, (item: NewsModel) => {
            ListItem() {
              Column({ space: 8 }) {
                Text(item.title)
                  .fontSize(18)
                  .fontWeight(FontWeight.Medium)
                Row() {
                  Text(item.company)
                    .fontSize(14)
                    .fontColor(Color.Gray)
                  Text(item.time)
                    .fontSize(14)
                    .fontColor(Color.Gray)
                    .margin({ left: 10 })
                }
              }
              .padding(15)
            }
          })
        }
        .width('100%')
        .height('100%')
        .layoutWeight(1)
      }
      .width('100%')
    }
  }

Complete Example Code

interface NewsModel {
  id: string
  author: string
  company: string
  time: string
  title: string
  category: string
}

@Component
struct NewsListPage {
  @State list: NewsModel[] = [
    {
      id: '1',
      author: 'Zhang San',
      company: 'Science and Technology Daily',
      time: '2025-06-20',
      title: 'HarmonyOS 5 New Features Released',
      category: 'Technology'
    },
    {
      id: '2',
      author: 'Li Si',
      company: 'Sports News',
      time: '2025-06-21',
      title: 'Football World Cup Schedule Announced',
      category: 'Sports'
    }
  ]
  @State categories: string[] = ['All', 'Technology', 'Sports', 'Finance', 'World']

  build() {
    NavDestination() {
      Column() {
        Column() {
          Text('Discover News')
            .fontSize(32)
            .fontWeight(FontWeight.Bold)
          Text('Stay Informed with Global News')
            .fontColor(Color.Gray)
            .margin({ top: 4 })
          Search({ placeholder: 'Search News' })
            .height(48)
            .searchButton('Search')
            .margin({ top: 20 })
            .searchIcon({ size: 20 })
        }
        .width('100%')
        .padding(15)
        .alignItems(HorizontalAlign.Start)

        List({ space: 15 }) {
          ForEach(this.categories, (cate: string) => {
            ListItem() {
              Button(cate)
                .height(40)
                .onClick(() => {
                  if (cate === 'All') {
                    this.list = mockData
                  } else {
                    this.list = mockData.filter(item => item.category === cate)
                  }
                })
            }
          })
        }
        .contentStartOffset(15)
        .width('100%')
        .height(64)
        .listDirection(Axis.Horizontal)
        .scrollBar(BarState.Off)

        List({ space: 12 }) {
          ForEach(this.list, (item: NewsModel) => {
            ListItem() {
              Column({ space: 8 }) {
                Text(item.title)
                  .fontSize(18)
                  .fontWeight(FontWeight.Medium)
                Row() {
                  Text(item.company)
                    .fontSize(14)
                    .fontColor(Color.Gray)
                  Text(item.time)
                    .fontSize(14)
                    .fontColor(Color.Gray)
                    .margin({ left: 10 })
                }
              }
              .padding(15)
            }
          })
        }
        .width('100%')
        .height('100%')
        .layoutWeight(1)
      }
      .width('100%')
    }
  }
}

Conclusion

This article implements the news list page of a HarmonyOS 5 news application. Key knowledge points include using @State for state management, ForEach to iterate lists, the List component to display data, and implementing the news category filtering function. With these techniques, you can efficiently build a feature - rich and interactive news list page.

HarmonyOS5-NewsAPP-HomePage

ShuGang Zhou — Thu, 26 Jun 2025 03:45:13 +0000

Case Study of Implementing the Home Page of a News App on HarmonyOS 5

Abstract

This article introduces how to implement the home page of a news app on HarmonyOS 5. Using the provided ArkTS code, the home - page interface includes a carousel news display, a recommended news list, and supports navigating to the news list page when clicking "View all". An image img01.png is used as a screenshot to show the interface.

Implementation Steps

Define the navigation path stack pathStack.
Define the news data model NewsModel.
Implement the BannerNewsItem component for carousel news display.
Implement the ListNewsItem component for the recommended news list display.
Implement the TitleBar component as the title bar, supporting navigation when clicking "View all".
Mock the news data mockData.
Implement the PreviewPage as the entry component, combining the above components to build the home - page interface.

Code Implementation

const pathStack = new NavPathStack() 

interface NewsModel { 
  id: string 
  author: string 
  company: string 
  companyLogo: ResourceStr
  time: string 
  title: string, 
  category: string, 
  cover: ResourceStr 
} 

@Component 
struct BannerNewsItem { 
  news: NewsModel = {} as NewsModel 

  build() { 
    Stack() { 
      Image( this .news.cover) 
        .width('100%') 
        .height('100%') 
      Column({ space: 8 }) { 
        Button( this .news.category) 
          .size({ height: 36 }) 
        Blank() 
        Text() { 
          Span( this .news.company) 
          Span( this .news.author) 
          Span('·') 
          Span( this .news.time) 
            .fontSize(12) 
        } 
        .fontColor(Color.White) 
        .fontWeight(FontWeight.Medium) 

        Text( this .news.title) 
          .fontSize(18) 
          .fontColor(Color.White) 
          .fontWeight(FontWeight.Bold) 
          .maxLines(2) 
          .textOverflow({ overflow: TextOverflow.Ellipsis }) 
      } 
      .padding(20) 
      .width('100%') 
      .height('100%') 
      .alignItems(HorizontalAlign.Start) 
    } 
    .width('100%') 
    .aspectRatio(5 / 3) 
    .borderRadius(20) 
    .clip( true ) 
  } 
} 

@Component 
struct ListNewsItem { 
  news: NewsModel = {} as NewsModel 

  build() { 
    Row({ space: 12 }) { 
      Image( this .news.cover) 
        .width(120) 
        .aspectRatio(1) 
        .objectFit(ImageFit.Cover) 
        .borderRadius(12) 
      Column({ space: 12 }) { 
        Text( this .news.category) 
          .fontColor(Color.Gray) 
          .fontSize(14) 
        Text( this .news.title) 
          .maxLines(2) 
          .textOverflow({ overflow: TextOverflow.Ellipsis }) 
          .fontWeight(500) 
        Text() { 
          Span( this .news.author) 
          Span('·') 
          Span( this .news.time) 
        } 
        .fontSize(14) 
        .fontColor(Color.Gray) 
      } 
      .width('100%') 
      .height(120) 
      .justifyContent(FlexAlign.Start) 
      .alignItems(HorizontalAlign.Start) 
      .layoutWeight(1) 
    } 
    .padding({ left: 15, right: 15 }) 
  } 
} 

@Component 
struct TitleBar { 
  title: string = '' 
  category: string = '' 

  build() { 
    Row() { 
      Text( this .title) 
        .fontSize(18) 
        .fontWeight(FontWeight.Bold) 
      Blank() 
      Button('View all') 
        .buttonStyle(ButtonStyleMode.TEXTUAL) 
        .fontSize(14) 
        .onClick(() => { 
          pathStack.pushPathByName('NewsListPage', this .category) 
        }) 
    } 
    .width('100%') 
    .padding({ left: 15, right: 15, bottom: 10 }) 
  } 
} 

const mockData: NewsModel[] = [ 
  { 
    id: '100', 
    author: 'Glen Levy', 
    company: 'CNN Indonesia',
    companyLogo: $r('app.media.news_cnn'),
    time: 'Fri June 20, 2025', 
    title: 'Lionel Messi: The player who’s bigger than the club and the FIFA Club World Cup tournament?', 
    cover: $r('app.media.news01'), 
    category: 'Sports' 
  }, 
  { 
    id: '101', 
    author: 'Glen Levy', 
    company: 'CNN Indonesia',
    companyLogo: $r('app.media.news_cnn'),
    time: 'Fri June 20, 2025', 
    title: 'Lionel Messi: The player who’s bigger than the club and the FIFA Club World Cup tournament?', 
    cover: $r('app.media.news01'), 
    category: 'Sports' 
  }, 
  { 
    id: '102', 
    author: 'Glen Levy', 
    company: 'CNN Indonesia',
    companyLogo: $r('app.media.news_cnn'),
    time: 'Fri June 20, 2025', 
    title: 'Lionel Messi: The player who’s bigger than the club and the FIFA Club World Cup tournament?', 
    cover: $r('app.media.news01'), 
    category: 'Sports' 
  } 
] 

@Entry 
@Component 
struct PreviewPage { 
  @State list: NewsModel[] = mockData 

  @Builder 
  PagesMap(name: string) { 
    if (name === 'NewsListPage') { 
      NewsListPage() 
    } 
  } 

  @Builder 
  BreakingNewsBuilder() { 
    Column() { 
      TitleBar({ category: 'All', title: 'Breaking News' }) 
      Swiper() { 
        ForEach( this .list, (item: NewsModel) => { 
          BannerNewsItem({ news: item }) 
        }) 
      } 
      .itemSpace(20) 
      .safeAreaPadding({ left: 15, right: 15, bottom: 40 }) 
    } 
  } 

  @Builder 
  RecommendNewsBuilder() { 
    Column() { 
      TitleBar({ category: 'All', title: 'Recommendation' }) 
      Column({ space: 12 }) { 
        ForEach( this .list, (item: NewsModel) => { 
          ListNewsItem({ news: item }) 
        }) 
      } 
    } 
  } 

  build() { 
    Navigation(pathStack) { 
      List() { 
        ListItem() { 
          this .BreakingNewsBuilder() 
        } 

        ListItem() { 
          this .RecommendNewsBuilder() 
        } 
      } 
      .width('100%') 
      .height('100%') 
    } 
    .mode(NavigationMode.Stack) 
    .navDestination( this .PagesMap) 
    .hideToolBar( true ) 
  } 
}

Screenshot

Conclusion

This case study implements the home - page interface of a news app on HarmonyOS 5 using the ArkTS language. It includes carousel news and recommended news list displays, as well as page navigation functionality. The key points include component definition and combination, the use of data models, and the implementation of navigation functions.

16-HarmonyOS5-VisionKit-VisionImageAnalyzer-Case

ShuGang Zhou — Wed, 18 Jun 2025 04:05:11 +0000

Case Study of Vision Image Analyzer in VisionKit on HarmonyOS 5.0

Abstract

This article introduces how to use visionImageAnalyzer from @kit.VisionKit to implement image text analysis in HarmonyOS 5.0. By creating the VisionKitVisionImageAnalyzer component, users can perform text analysis on specified images and display all the text and the selected text.

Implementation Steps

Import visionImageAnalyzer from @kit.VisionKit.
Define the VisionKitVisionImageAnalyzer component and initialize the image analysis controller and state variables.
Set up listeners for text analysis and selected text change in the aboutToAppear lifecycle function.
Build the UI interface, including an analyzable image, a text area to display all text, and a text area to display selected text.

Implementation Code

import { visionImageAnalyzer } from '@kit.VisionKit' 

@Entry 
@Component 
struct VisionKitVisionImageAnalyzer { 
  aiController = new visionImageAnalyzer.VisionImageAnalyzerController() 
  @State text: string = '' 
  @State selectedText: string = '' 

  aboutToAppear(): void { 
    this.aiController.on('textAnalysis', (text) => { 
      this.text = text 
    }) 
    this.aiController.on('selectedTextChange', (selectedText) => { 
      this.selectedText = selectedText 
    }) 
  } 

  build() { 
    Column({ space: 15 }) { 
      Image(' `https://inews.gtimg.com/om_ls/O3W2Lv10CTyLNHOjw4k_Co1Kkb2-c42GHWvifzD-ka5OYAA_294195/0` ', { 
        types: [ImageAnalyzerType.TEXT], 
        aiController: this.aiController 
      }) 
        .enableAnalyzer(true) 
        .objectFit(ImageFit.Contain) 
        .width(300) 
        .height(300) 
      Text('All text: ' + this.text) 
      Text('Selected text: ' + this.selectedText) 
    } 
    .alignItems(HorizontalAlign.Start) 
    .padding(15) 
    .height('100%') 
    .width('100%') 
  } 
}

Summary

This case demonstrates how to use visionImageAnalyzer from @kit.VisionKit for image text analysis in HarmonyOS 5.0. The key knowledge points include the initialization of the image analysis controller, the setup of listener callbacks, and the display of analysis results. These methods can be used to develop applications that require image text analysis functions.

Application Scenarios

AI image recognition aggregates AI capabilities such as OCR (Optical Character Recognition), subject segmentation, entity recognition, and multi - object recognition to provide scene - based text recognition, subject segmentation, and image recognition search functions. The main switch for the AI image recognition function is located in the list of basic control APIs. If you accept the default interaction and functions of AI image recognition, you only need to use the relevant enabling interfaces provided by the basic controls to turn on the function switch. The APIs supporting this document are used in conjunction with basic controls, mainly to meet your customization requirements, help you achieve fine - grained control over the interaction of the AI image recognition function, and obtain analysis results such as text recognition and image segmentation for the development of extended services. Currently, the supported basic controls include Image, Video, and XComponent. Specifically, in combination with the Image control, the image recognition function for static images can be achieved; in combination with the Video control, the image recognition function for paused frames during video playback can be achieved; in combination with the XComponent, the image recognition function in scenarios such as custom rendering can be achieved.

Constraints

Supported text languages: Simplified Chinese, Traditional Chinese, English, Uyghur, and Tibetan.
The minimum supported image resolution is 100*100.
The images to be analyzed must be static non - vector images. That is, image types such as SVG and GIF are not supported for analysis. PixelMap can be passed for analysis, and currently only the RGBA_8888 type is supported.
The minimum width - to - height ratio for translatable images is 1:3 (the height is less than 3 times the width), and the minimum width - to - height ratio for text - recognizable images is 1:7 (the height is less than 7 times the width).

15-HarmonyOS5-VisionKit-DocumentScanner-Case

ShuGang Zhou — Wed, 18 Jun 2025 01:40:46 +0000

Case Study of VisionKit Document Scanning Function in HarmonyOS 5.0

Abstract

This article introduces how to use @hms.ai.DocumentScanner to implement the document scanning function in HarmonyOS 5.0. By creating the VisionKitDocumentScanner component, users can perform document scanning and display the scanning results.

Implementation Steps

Import relevant modules from @kit.ArkUI and @hms.ai.DocumentScanner.

import { DocumentScanner, ScanConfig } from "@hms.ai.DocumentScanner";
import { router } from "@kit.ArkUI";

Define the VisionKitDocumentScanner component and set the document image URI state.

@Entry
@Component
struct VisionKitDocumentScanner {
  @State docImageUri: string = '';
}

Configure the document scanner parameters.

const scanConfig: ScanConfig = {
  scanMode: 0, // 0: Auto mode, 1: Manual mode
  outputFormat: 0, // 0: JPEG, 1: PNG
  quality: 90
};

Build the UI interface, including the scanning result display area and the document scanner component.

  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Top }) {
        if (this.docImageUri) {
          Image(this.docImageUri)
            .objectFit(ImageFit.Contain)
            .width('80%')
            .height('80%')
        }

        DocumentScanner({
          scanConfig: scanConfig,
          onScanResult: this.onScanResult
        })
        .width('100%')
        .height('100%')
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .hideTitleBar(true)
  }

Implement the callback function of the document scanner to handle the scanning results and update the document image URI state.

  onScanResult = (result) => {
    if (result.code === 0) {
      this.docImageUri = result.imageUri;
    } else {
      console.error('Scan failed:', result.message);
      router.back();
    }
  }

Implementation Code

import { router } from '@kit.ArkUI' 
import { DocumentScanner, DocumentScannerConfig } from '@hms.ai.DocumentScanner' 

@Entry 
@Component 
struct VisionKitDocumentScanner { 
  @State docImageUris: string[] = [] 
  private docScanConfig = new DocumentScannerConfig() 

  aboutToAppear(): void { 
    this.docScanConfig.maxShotCount = 3 
  } 

  build() { 
    Stack({ alignContent: Alignment.Top }) { 
      Swiper() { 
        ForEach(this.docImageUris, (uri: string) => { 
          Image(uri) 
            .objectFit(ImageFit.Contain) 
            .width(100) 
            .height(100) 
        }) 
      } 
      .padding(15) 
      .width('100%') 
      .height('100%') 

      // Document scanning 
      DocumentScanner({
        scannerConfig: this.docScanConfig,
        onResult: (code, saveType, uris) => {
          if (code === -1) {
            router.back()
          }
          this.docImageUris = uris
        }
      }) 
    } 
    .height('100%') 
    .width('100%') 
  } 
}

Other Configurations

aboutToAppear() {
    this.docScanConfig.supportType = [DocType.DOC, DocType.SHEET]
    this.docScanConfig.isGallerySupported = true
    this.docScanConfig.editTabs = []
    this.docScanConfig.maxShotCount = 3
    this.docScanConfig.defaultFilterId = FilterId.ORIGINAL
    this.docScanConfig.defaultShootingMode = ShootingMode.MANUAL
    this.docScanConfig.isShareable = true
    this.docScanConfig.originalUris = []
  }
  // Explanation:
  // supportType: Supported document types, including DocType.DOC and DocType.SHEET
  // isGallerySupported: Whether to support selecting images from the gallery
  // editTabs: Edit tabs, supporting DocEditTab.CROP, DocEditTab.ROTATE, and DocEditTab.FILTER
  // maxShotCount: Maximum number of shots
  // defaultFilterId: Default filter ID
  // defaultShootingMode: Default shooting mode
  // isShareable: Whether to support sharing
  // originalUris: List of original image URIs

Summary

This case demonstrates how to use @hms.ai.DocumentScanner to implement the document scanning function in HarmonyOS 5.0. Key knowledge points include the configuration and use of the document scanner, the handling of scanning results, and the display of scanning results. These methods can be used to develop various applications that require document scanning functions.

Application Scenarios

The document scanning control provides a service to capture documents and convert them into high - definition scanned copies. Users only need to use their mobile phones to take pictures of documents, which will be automatically cropped and optimized. It supports saving and sharing in image and PDF formats. Meanwhile, it supports capturing images or selecting images from the gallery to recognize tables and generate table documents.

It can be widely used in educational and office scenarios. Users can scan documents, bills, classroom PPTs, books, etc., and output images/PDFs to complete operations such as sending and archiving.

Constraints

Supported languages: Simplified Chinese, English.
Currently, document scanning only supports phones and tablets.
It is not allowed to be blocked by other components or windows.

14-HarmonyOS5-VisionKit-CardRecognition-Case

ShuGang Zhou — Wed, 18 Jun 2025 01:18:14 +0000

Case Study of VisionKit Card Recognition in HarmonyOS 5.0

Abstract

This article introduces how to use @kit.VisionKit to implement the card recognition function in HarmonyOS 5.0. By creating the VisionKitCardRecognition component, users can perform ID card recognition and display the recognition results.

Implementation Steps

Import relevant modules from @kit.VisionKit and @kit.ArkUI.

import { CardRecognition, CardType, CardSide, ShootingMode } from "@kit.VisionKit" 
import { router } from "@kit.ArkUI";

Define the VisionKitCardRecognition component and set the card data state.

@Entry 
@Component 
struct VisionKitCardRecognition { 
  @State cardDataSource: Record<string, string>[] = [] 
}

Build the UI interface, including the card data display area and the CardRecognition component.

  build() { 
    NavDestination() { 
      Stack({ alignContent: Alignment.Top }) { 
        Stack() { 
          this.cardDataShowBuilder() 
        } 
        .width('80%') 
        .height('80%') 

        CardRecognition({ 
          supportType: CardType.CARD_ID, 
          cardSide: CardSide.DEFAULT, 
          cardRecognitionConfig: { 
            defaultShootingMode: ShootingMode.MANUAL, 
            isPhotoSelectionSupported: true 
          }
        })
      } 
      .width('100%') 
      .height('100%') 
    } 
    .width('100%') 
    .height('100%') 
    .hideTitleBar(true) 
  }

Implement the callback function of the CardRecognition component to handle the recognition results and update the card data state.

  callback: ((params) => { 
    if (params.code !== 200) { 
      router.back() 
    } 
    if (params.cardInfo?.front !== undefined) { 
      this.cardDataSource.push(params.cardInfo?.front) 
    } 
    if (params.cardInfo?.back !== undefined) { 
      this.cardDataSource.push(params.cardInfo?.back) 
    } 
    if (params.cardInfo?.main !== undefined) { 
      this.cardDataSource.push(params.cardInfo?.main) 
    } 
  })

Implement the cardDataShowBuilder method to display the card data.

  @Builder 
  cardDataShowBuilder() { 
    List() { 
      ForEach(this.cardDataSource, (cardData: Record<string, string>) => { 
        ListItem() { 
          Column() { 
            Image(cardData.cardImageUri) 
              .objectFit(ImageFit.Contain) 
              .width(100) 
              .height(100) 
            Text(JSON.stringify(cardData)) 
              .width('100%') 
              .fontSize(12) 
          } 
        } 
      }) 
    } 
    .listDirection(Axis.Vertical) 
    .alignListItem(ListItemAlign.Center) 
    .margin({ 
      top: 50 
    }) 
    .width('100%') 
    .height('100%') 
  }

Complete Example Code

import { CardRecognition, CardType, CardSide, ShootingMode } from "@kit.VisionKit" 
import { router } from "@kit.ArkUI"; 

@Entry 
@Component 
struct VisionKitCardRecognition { 
  @State cardDataSource: Record<string, string>[] = [] 

  build() { 
    NavDestination() { 
      Stack({ alignContent: Alignment.Top }) { 
        Stack() { 
          this.cardDataShowBuilder() 
        } 
        .width('80%') 
        .height('80%') 


        CardRecognition({ 
          supportType: CardType.CARD_ID, 
          cardSide: CardSide.DEFAULT, 
          cardRecognitionConfig: { 
            defaultShootingMode: ShootingMode.MANUAL, 
            isPhotoSelectionSupported: true 
          }, 
          callback: ((params) => { 
            if (params.code !== 200) { 
              router.back() 
            } 
            if (params.cardInfo?.front !== undefined) { 
              this.cardDataSource.push(params.cardInfo?.front) 
            } 
            if (params.cardInfo?.back !== undefined) { 
              this.cardDataSource.push(params.cardInfo?.back) 
            } 
            if (params.cardInfo?.main !== undefined) { 
              this.cardDataSource.push(params.cardInfo?.main) 
            } 
          }) 
        }) 
      } 
      .width('100%') 
      .height('100%') 
    } 
    .width('100%') 
    .height('100%') 
    .hideTitleBar(true) 
  } 


  @Builder 
  cardDataShowBuilder() { 
    List() { 
      ForEach(this.cardDataSource, (cardData: Record<string, string>) => { 
        ListItem() { 
          Column() { 
            Image(cardData.cardImageUri) 
              .objectFit(ImageFit.Contain) 
              .width(100) 
              .height(100) 


            Text(JSON.stringify(cardData)) 
              .width('100%') 
              .fontSize(12) 
          } 
        } 
      }) 
    } 
    .listDirection(Axis.Vertical) 
    .alignListItem(ListItemAlign.Center) 
    .margin({ 
      top: 50 
    }) 
    .width('100%') 
    .height('100%') 
  } 
}

Summary

This case demonstrates how to use @kit.VisionKit to implement card recognition in HarmonyOS 5.0. Key knowledge points include the configuration and use of the CardRecognition component, the processing of recognition results, and the display of card data. These methods can be used to develop various applications that require card recognition functions.

Applicable Scenarios

The card recognition control provides structured recognition services for ID cards (currently only supporting those issued in China), driving licenses, passports, and bank cards. It meets the automatic classification function of cards, allowing the system to automatically determine the type of the card and return structured information and card image information.

For scenarios where card information needs to be filled, such as ID card and bank card information, you can use the card recognition control to read OCR (Optical Character Recognition) information. After the result information is returned, it can be filled in. It supports single - side (front or back) recognition or double - side recognition simultaneously.

Constraints

Supported languages: Simplified Chinese, English.
Currently, card recognition only supports 5 types of cards: ID cards, driving licenses, passports, and bank cards.
It is not allowed to be blocked by other components or windows.

DEV Community: ShuGang Zhou

HarmonyOS5-NewsAPP-CalendarEventManager

HarmonyOS 5 News App Calendar Event Management Implementation

Abstract

Implementation Steps

Code Implementation

1. Bind the Pop - up Component

2. Implement the Function to Add Calendar Events

3. Build the Account Details Component to Display the Event List

Other API Explanations

Summary

Notes

HarmonyOS5-NewsAPP-CalendarAccountManager

HarmonyOS 5 News App Calendar Account Management Implementation

Abstract

Implementation Steps

Code Implementation

1. Implement the Account Addition Button Component

2. Implement the Account Deletion Builder

3. Operation Logic Explanation

Other API Explanations

Summary

Application Scenarios

Constraints and Limitations

HarmonyOS5-NewsAPP-CalendarAccountList

HarmonyOS 5 News App Calendar Account List Implementation

Abstract

Technical Introduction

Implementation Steps

Code Implementation

1. Initialize the Context and Calendar Manager

2. Request Calendar Read and Write Permissions

3. Implement the Calendar Account Creation Function

4. Display the Calendar Account List

Complete Code

Summary

Note

HarmonyOS5-NewsAPP-NavBar

HarmonyOS 5 News App Navigation Bar Implementation

Abstract

Implementation Steps

Code Implementation

1. Define the NavBarBuilder Builder

2. Define the BarButton Component

Summary

Expansion

Custom Components

Custom Builder Functions

What are the differences and limitations between the custom builder function @Builder and the custom component @Component?

HarmonyOS5-NewsAPP-KnockShare

HarmonyOS 5 News Application - Knock Sharing Function Implementation Case

Summary

Implementation Steps

Code Implementation

Conclusion

Use Cases

HarmonyOS5-NewsAPP-SystemShare

HarmonyOS 5 News Application - System Sharing Function Implementation Case

Summary

Implementation Steps

Code Implementation

Access Modes

Conclusion

Application Scenarios

Constraints and Limitations

HarmonyOS5-NewsAPP-NewsDetailPage

HarmonyOS 5 News Application - News Detail Page Implementation Case

Summary

Implementation Steps

Code Implementation

Conclusion

HarmonyOS5-NewsAPP-NewsListPage

HarmonyOS 5 News Application - News List Page Implementation Case

Summary

Implementation Steps

Code Implementation

1. Define State Variables

2. Build Navigation and Search Components

3. Implement the News Category Filtering Function

4. Display the News List

1. Define the `NavBarBuilder` Builder

2. Define the `BarButton` Component

What are the differences and limitations between the custom builder function `@Builder` and the custom component `@Component`?