#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 实现视频新闻原创

紫妍是我

发布于 2024-8-15 22:12

浏览

0收藏

开发动机

随着互联网技术的狂飙突进和智能手机的全面占领，我们的信息获取方式就像坐上了火箭一样，一飞冲天！

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 实现视频新闻-鸿蒙开发者社区

曾经的报纸和杂志，那些散发着油墨香的老友，现在几乎都变成了电子屏幕上的像素点。特别是短视频新秀，它们就像是信息界的摇滚明星，以那股子直观又生动的魅力，吸引了一大票年轻粉丝。现在的小伙伴们啊，越来越喜欢用视频这种既养眼又省事儿的方式来看新闻、追热点了！

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 实现视频新闻-鸿蒙开发者社区

那么相比传统的文字报道，视频新闻能够更加生动形象地展示新闻事件，让用户仿佛置身于新闻现场。此外，快节奏的生活方式也使得人们更加偏爱短小精悍的视频内容，我们在闲暇之余多利用短视频平台获取信息。

我们随意打开一个新闻类的软件可以看到布局都是相似的，这种垂直的流式布局往往有更大的控件去展示新闻内容，从而吸引用户

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 实现视频新闻-鸿蒙开发者社区

但是我们可以看到页面上的内容非常的繁杂，而我们想要实现一个清爽的视频新闻

在HarmoneyOS 中我们如何去实现这样的功能呢？

跟我来！

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 实现视频新闻-鸿蒙开发者社区

功能实现

首先布局方面选择两列一行的布局，这样的布局能显示更多的内容，这种布局最合适的组件就是Grid ，他可以实现两条或者多条数据。（如图所示）

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 实现视频新闻-鸿蒙开发者社区

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中需要添加条目布局

一条的布局内容我们实现如下

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 实现视频新闻-鸿蒙开发者社区

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

视频页面如下

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 实现视频新闻-鸿蒙开发者社区

点击播放按钮播放视频

因为播放按钮是一个图片，下方是播放器所以外层用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%')

这时候开始填充数据，首先导入数据源，图片，和视频

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 实现视频新闻-鸿蒙开发者社区

在项目的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 中引入数据，执行后页面显示如下

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 实现视频新闻-鸿蒙开发者社区