回复
#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 实现视频新闻 原创
紫妍是我
发布于 2024-8-15 22:12
浏览
0收藏
开发动机
随着互联网技术的狂飙突进和智能手机的全面占领，我们的信息获取方式就像坐上了火箭一样，一飞冲天！
曾经的报纸和杂志，那些散发着油墨香的老友，现在几乎都变成了电子屏幕上的像素点。特别是短视频新秀，它们就像是信息界的摇滚明星，以那股子直观又生动的魅力，吸引了一大票年轻粉丝。现在的小伙伴们啊，越来越喜欢用视频这种既养眼又省事儿的方式来看新闻、追热点了！
那么相比传统的文字报道，视频新闻能够更加生动形象地展示新闻事件，让用户仿佛置身于新闻现场。此外，快节奏的生活方式也使得人们更加偏爱短小精悍的视频内容，我们在闲暇之余多利用短视频平台获取信息。
我们随意打开一个新闻类的软件可以看到布局都是相似的，这种垂直的流式布局往往有更大的控件去展示新闻内容，从而吸引用户
但是我们可以看到页面上的内容非常的繁杂，而我们想要实现一个清爽的视频新闻
在HarmoneyOS 中我们如何去实现这样的功能呢？
跟我来！
功能实现
首先布局方面选择两列一行的布局，这样的布局能显示更多的内容，这种布局最合适的组件就是Grid ，他可以实现两条或者多条数据。（如图所示）
Grid() {
ForEach(BannerModel.addBannerList(), (item: BannerList) => {
GridItem() {
//添加的条目布局 }
})
}
.columnsGap(10)
.rowsGap(10)
.columnsTemplate('1fr 1fr')
.height('100%')
.width('100%')
.align(Alignment.TopStart)
.backgroundColor(Color.White)可以看到在gridItem中需要添加条目布局
一条的布局内容我们实现如下
@Builder NewsItem(item:BannerList){
Column(){
Image(item.imgUrl)
.objectFit(ImageFit.Fill)
.height(220)
.width('100%')
.borderRadius({topLeft:10,topRight:10})
Text(item.title).fontSize(12).fontWeight(FontWeight.Bold).margin({top:8})
.fontColor("#333333")
Text(item.txt).fontSize(12).fontColor("#ffffff").margin({top:8})
.backgroundColor("#ffcd7e7e")
.borderRadius(5)
.padding({left:5,right:5,top:3,bottom:3})
}
.backgroundColor(Color.White)
.borderRadius(10)
.width('100%')
.padding(10)
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Start)
.onClick(()=>{
router.pushUrl({
url:'pages/video/VideoDetailPage',
params: {video: item.route}})
})
}
点击条目后我们播放这条视频，所以在条目的click事件中实现了router的跳转代码
router.pushUrl({ url:'pages/video/VideoDetailPage', params: {video: item.route}})
视频页面如下
点击播放按钮播放视频
因为播放按钮是一个图片，下方是播放器所以外层用stack 容器包裹两个组件
Stack({alignContent:Alignment.Center}){
Video({
src:this.src,
currentProgressRate: this.curRate,
controller: this.controller
})
.height('100%')
.width('100%')
.autoPlay(false)
.controls(false)
.onStart(() => {
this.isPlay=true
console.info('onStart')
})
.onPause(() => {
this.isPlay=false
console.info('onPause')
})
.onFinish(() => {
this.isPlay=false
console.info('onFinish')
})
.onError(() => {
console.info('onError')
})
.onPrepared((e) => {
console.info('onPrepared is ' + e.duration)
})
.onSeeking((e) => {
console.info('onSeeking is ' + e.time)
})
.onSeeked((e) => {
console.info('onSeeked is ' + e.time)
})
.onUpdate((e) => {
console.info('onUpdate is ' + e.time)
})
.onClick(()=>{
if (this.isPlay) {
this.controller.pause()
}
})
Image($r('app.media.play'))
.height(50)
.width(50)
.visibility(this.isPlay?Visibility.None:Visibility.Visible)
.interpolation(ImageInterpolation.High)
.onClick(()=>{
if (this.isPlay) {
this.controller.pause()
}else {
this.controller.start()
}
})
}
.height('100%')
.width('100%')这时候开始填充数据，首先导入数据源，图片，和视频
在项目的media 和rawfile 文件夹下分别导入图片和视频
然后创建model 文件进行数据填充
填充前先创建数据类
export class BannerList{
title:string
txt:string
bannerType:number //0 图片 1 视频
imgUrl:string|Resource
route:string
}数据填充
export class BannerModel {
addBannerList(): Array<BannerList> {
let bannerList: BannerList[] = [
new BannerList("重庆一九十岁老人寿宴上一名女歌手摔倒去世", "越牛视频", 1, $r('app.media.laodaye'), "1"),
new BannerList("马丁拒绝与黄子韬同台，黄子韬现场气到含泪直播", "老友记", 1, $r('app.media.huangtitao'), "2"),
new BannerList("航拍#韶关龙归镇 水已在慢慢退去 村民：很多年没见过这么大的雨 #广东dou知道", "DV现场", 1, $r('app.media.shaoguan'), "3"),
new BannerList("吴燕妮100米栏跑出13秒04，赛后回应化妆问题", "红星新闻", 1, $r('app.media.wuyanni'), "4"),
new BannerList("五一其实只放一天，最近冲上热搜", "央视新闻客户端", 1, $r('app.media.xiujia'), "5"),
]
return bannerList
}
}
export default new BannerModel()然后在grid 中引入数据，执行后页面显示如下
可以看到我们的列表已经显示出来，当点击条目，拿到视频去播放页面播放,这样我们就实现了一个视频新闻的功能。看完之后你是不是也蠢蠢欲动了，快试试吧。
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
赞
收藏
回复
相关推荐
