HarmonyOS5-NewsAPP-HomePage

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".

@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 ) 
  } 
}