HarmonyOS 5 - 新闻应用 - 新闻详情页
2 分•作者: zhousg•6 个月前
HarmonyOS 5 新闻应用 - 新闻详情页实现案例
摘要
本文详细介绍了使用 ArkTS 语言在 HarmonyOS 5.0 新闻应用中实现新闻详情页的过程。通过定义 BarButton 和 NewDetailPage 组件，实现了新闻详情页的界面布局、状态栏颜色设置和页面导航。<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>
查看原文
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>