#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)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

 @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}})
    })
  } 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

  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%')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.

export  class  BannerList{
title:string
txt:string
bannerType:number //0 图片 1 视频
imgUrl:string|Resource
route:string
}
1.
2.
3.
4.
5.
6.
7.

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()
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.