#HarmonyOS NEXT thể nghiệm quan # như thế nào vận dụng HarmoneyOS NEXT thực hiện video tin tức Nguyên sang

Grid() {
ForEach(BannerModel.addBannerList(), (item: BannerList) => {
GridItem() {
// tăng thêm điều mục bố cục }
})
}
.columnsGap(10)
.rowsGap(10)
.columnsTemplate('1fr 1fr')
.height('100%')
.width('100%')
.align(Alignment.TopStart)
.backgroundColor(Color.White)

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

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%')

export class BannerList{
title:string
txt:string
bannerType:number //0 hình ảnh 1 video
imgUrl:string|Resource
route:string
}

export class BannerModel {
addBannerList(): Array<BannerList> {

let bannerList: BannerList[] = [
new BannerList( "Trùng Khánh một 90 tuổi lão nhân tiệc mừng thọ thượng một người nữ ca sĩ té ngã qua đời", "Càng ngưu video", 1, $r('app.media.laodaye'), "1" ),
new BannerList( "Martin cự tuyệt cùng hoàng tử thao cùng đài, hoàng tử thao hiện trường khí đến rưng rưng phát sóng trực tiếp", "Friends", 1, $r('app.media.huangtitao'), "2" ),
new BannerList( "Hàng chụp # thiều quan long về trấn thủy đã ở chậm rãi thối lui thôn dân: Rất nhiều năm chưa thấy qua lớn như vậy vũ # Quảng Đông dou biết", "DV hiện trường", 1, $r('app.media.shaoguan'), "3" ),
new BannerList( "Ngô yến ni 100 mét vượt rào chạy ra 13 giây 04, tái sau đáp lại hoá trang vấn đề", "Hồng tinh tin tức", 1, $r('app.media.wuyanni'), "4" ),
new BannerList( "5-1 kỳ thật chỉ phóng một ngày, gần nhất xông lên hot search", "CCTV tin tức bản cài đặt", 1, $r('app.media.xiujia'), "5" ),

]
return bannerList
}
}
export default new BannerModel()