鸿蒙NEXT开发笔记（三十）仿抖音快手App的实现正在上传的等待效果

上一节我们使用fileIo工具实现了相册视频复制到沙箱目录的功能，那么在向服务器上传视频的过程中，为了避免用户的误操作导致上传中断，比如用户不小心按了返回键等等，就要引入等待上传机制，通过临时冻结界面的交互操作，以保护上传操作的正常执行，在上传结束后再恢复界面的交互操作。
在Android系统中，等待上传机制通过弹出进度对话框实现，但鸿蒙系统并未提供类似进度对话框的组件，只提供了进度条组件LoadingProgress。这个LoadingProgress跟Text、Button等组件一样内嵌在界面中，不能在弹窗后冻结周围组件。为此需要引入Stack布局，以叠加方式实现通常意义上的弹窗覆盖效果。具体的操作步骤如下：

一、使用堆叠布局区分正常界面和等待上传界面

多数时候显示视频信息的编辑界面，只有在上传视频时切换到弹窗等待，此时可编写堆叠布局代码，让两个布局代码在Stack内部先后排列，代码框架如下所示：

Stack() {
  Column() {
    // 这里填短视频信息的编辑界面布局
  .width('100%').height('100%')
  Column() {
    // 这里填等待上传的进度对话框布局
  }.width('100%').height('100%')
}.width('100%').height('100%')

二、结合进度条组件实现弹窗等待效果

常见的等待上传效果为：界面中央是个进度对话框，而四周呈现半透明的遮罩，并且遮罩区域不可点击。那么可将实现代码划分为下列两项：
1、内部引入一个Column布局，然后把LoadingProgress组件放在该布局的中央位置；
2、把外部Column布局的背景颜色设为半透明，比如'#40000000'；
于是弹窗等待效果的界面布局变成了下面这样：

Column() {
  Column() {
    LoadingProgress().width(80).height(80).color(Color.Black)
    Text('正在上传短视频，请稍等……').fontSize(16)
  }
  .width('40%').padding({bottom:15})
  .backgroundColor(Color.White).justifyContent(FlexAlign.Center)
}
.width('100%').height('100%')
.backgroundColor('#40000000').justifyContent(FlexAlign.Center)

三、引入布尔变量显示或者隐藏进度对话框

在一个完整的上传周期当中，控制显隐的布尔变量呈现以下三种状态：
1、在填写视频信息时，布尔变量为假，此时隐藏进度对话框的界面布局；
2、点击上传按钮后，在视频上传期间将布尔变量置为真，此时显示进度对话框的界面布局；
3、视频上传完毕，将布尔变量置为假，此时再次隐藏进度对话框的界面布局；
可见进度对话框的显隐状态变迁取决于布尔变量的真假为何，那么综合堆叠布局、进度条组件以及布尔变量，编写短视频上传界面的代码框架示例如下：

Stack() {
  Column() {
    // 这里填短视频信息的编辑界面布局
  .width('100%').height('100%')
  if (this.isUploading) { // 这里是上传中的加载进度窗口
    Column() {
      Column() {
        LoadingProgress().width(80).height(80).color(Color.Black)
        Text('正在上传短视频，请稍等……').fontSize(16)
      }
      .width('40%').padding({bottom:15})
      .backgroundColor(Color.White).justifyContent(FlexAlign.Center)
    }
    .width('100%').height('100%')
    .backgroundColor('#40000000').justifyContent(FlexAlign.Center)
  }
}.width('100%').height('100%')

下一篇文章会介绍如何把手机上的文件上传给服务器。