ShortVideoApp视频发布模块一

一、功能说明

• 视频发布页面整体布局设计
• 基于Grid组件和GridItem组件实现视频相册页面
• 通过onPageShow方式获取视频选择的结果
• 视频发布校验
• 发布完成导航跳转到首页
• 更改从首页导航到视频发布页面的方式
• 存储发布的视频

二、视频发布页面整体布局设计

• 视频封面
• 视频内容
• 发布按钮

/*视频发布页面*/
import { VideoInfo } from '../model/VideoInfo';
import { router } from '@kit.ArkUI';
import Constants from '../common/Constants';

@Entry
@Component
export struct VideoPublishPage {
  //选中的视频对象
  @State selectedVideoInfo: VideoInfo = new VideoInfo();

  onPageShow(): void {
    // 获取选中的视频
    // 通过传递过来的路由参数中的对象
    let params = router.getParams();
    // 判断参数对象是否存在，存在再获取视频封面
    if (params != null) {
      this.selectedVideoInfo = (params as Record<string, VideoInfo>)[`${Constants.PARAM_SELECTED_VIDEO_INFO_KEY}`];
    }
  }

  build() {
    Row() {
      Column() {
        //视频封面
        Image($rawfile(this.selectedVideoInfo.coverPath != null
          ? this.selectedVideoInfo.coverPath : 'video/ic_video_upload.png'))
          .width(125)
          .height(180)
          .onClick(() => {
            //跳转到视频相册
            router.pushUrl({
              url: 'pages/VideoAlbumPage'
            })
          })
        //视频内容
        TextArea()
          .width(320)
         
        // 发布按钮
        Button('发布', { type: ButtonType.Normal })
      }
      .width('100%')
    }
    .height('100%')
  }
}

三、基于Grid和GridItem组件实现视频相册页面

• 准备待上传视频数据
• 创建视频相册页面VideoAlbumPage

/*
 * 视频相册
 **/
import { VideoInfo } from '../model/VideoInfo'
import router from '@ohos.router';
import Constants from '../common/Constants';

@Entry
@Component
struct VideoAlbumPage {

  build() {
    //导航组件，支持返回
    Navigation() {
      //网格
      Grid() {
        //网格数据GridItem
        ForEach(Constants.VIDEO_INFO_UPLOAD_ARR, (videoInfo: VideoInfo)=> {
          GridItem() {
            Image($rawfile(videoInfo.coverPath))
              .width('100%')
              .height('100%')
              .onClick(() => {
                //点击选择视频
                //返回视频发布页面
                router.back({
                  url: 'pages/VideoPublishPage',
                  params: { 'selectedVideoInfo': videoInfo }
                })
              })
          }
          .width('100%')
          .aspectRatio(0.768) //网格项高和宽的比例
        })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr') //4列
      .rowsGap(2)
      .columnsGap(2)
    }
    .title('视频相册')
    .titleMode(NavigationTitleMode.Mini)
    .hideBackButton(false) //显示返回按钮
  }
}