HarmonyOS5-新闻应用-新闻详情页
HarmonyOS 5 新闻应用 - 新闻详情页实现案例
摘要
本文详细介绍了如何在 HarmonyOS 5.0 新闻应用中使用 ArkTS 语言实现新闻详情页。通过定义 BarButton 和 NewDetailPage 组件，实现了新闻详情页的界面布局、状态栏颜色设置和页面导航。
```typescript
@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(`
在新扩展的国际足联俱乐部世界杯上
`)
.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
})
}
}
```
查看原文
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.<p>@Component
struct BarButton {
icon: ResourceStr = ''<p><pre><code> build() {
Row() {
Image(this.icon)
.width(24)
.height(24)
.fillColor(Color.White)
}
.justifyContent(FlexAlign.Center)
.width(40)
.aspectRatio(1)
.borderRadius(22)
.backgroundColor('#45FFFFFF')
} </code></pre>
}<p>@Component
struct NewDetailPage {
news: NewsModel = {} as NewsModel<p><pre><code> 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
})
}
}</code></pre>