HarmonyOS5-NewsAPP-NewsDetailPage

3 points by zhousg 12 hours ago

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.

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