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