#HarmonyOS NEXT体验官# 基于鸿蒙Next的App（创意工坊）解析1：相关理论和主界面设计 原创 精华

Column() { // 主垂直布局容器
  Row({ space: 5 }) { // 水平布局容器，子元素之间间距为5
    Button({ type: ButtonType.Normal }) { // 新建按钮
      Column() { // 按钮内部的垂直布局
        Image($r('app.media.new')).width(16).height(16) // 按钮图标
        Text($r('app.string.new')) // 按钮文本
          .fontSize(10) // 文本字体大小
          .fontColor(0xffffff) // 文本字体颜色
          .fontWeight(FontWeight.Bold) // 文本字体粗细
          .margin({ top: 4 }) // 文本上边距
      }
    }
    .width(36) // 按钮宽度
    .height(36) // 按钮高度
    .borderRadius(8) // 按钮圆角半径
    .padding({ top: 3, bottom: 3 }) // 按钮上下内边距
    .margin({ bottom: 4 }) // 按钮下边距
    .backgroundColor(this.newButtonBackgroundColor) // 按钮背景颜色
    .onClick(() => { // 按钮点击事件
      this.toggleNewPanel(); // 切换新建面板
    })

    Button({ type: ButtonType.Normal }) { // 打开按钮
      Column() {
        Image($r('app.media.open')).width(16).height(16)
        Text($r('app.string.open'))
          .fontSize(10)
          .fontColor(0xffffff)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 4 })
      }
    }
    .width(36)
    .height(36)
    .backgroundColor($r('app.color.statusbar_background'))
    .padding({ top: 3, bottom: 3 })
    .margin({ bottom: 4 })
    .onClick(() => {
      this.saveDocumentFlag = false; // 设置保存文档标志为 false
      this.documentListDialogController.open(); // 打开文档列表对话框
    })

    Button({ type: ButtonType.Normal }) { // 清除画板按钮
      Column() {
        Image($r('app.media.clear_drawing_board')).width(16).height(16)
        Text($r('app.string.clear_drawing_board'))
          .fontSize(10)
          .fontColor(0xffffff)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 4 })
      }
    }
    .width(36)
    .height(36)
    .backgroundColor($r('app.color.statusbar_background'))
    .padding({ top: 3, bottom: 3 })
    .margin({ bottom: 4 })
    .onClick(() => {
      if(this.currentDocumentName === '') { // 如果当前文档名为空，则返回
        return;
      }
      AlertDialog.show({ // 显示警告对话框
        message:'是否清除画板的内容？', // 对话框消息
        alignment: DialogAlignment.Center, // 对话框居中对齐
        primaryButton: { // 确定按钮
          value: '确定',
          action: () => {
            this.controller1.runJavaScript(`clearCanvas()`); // 调用 JavaScript 清除画布内容
          }
        },
        secondaryButton: { // 取消按钮
          value: '取消',
          action: () => { }
        }
      })
    })

    Button({ type: ButtonType.Normal }) { // 画板按钮
      Column() {
        Image($r('app.media.drawing_board')).width(16).height(16)
        Text($r('app.string.drawing_board'))
          .fontSize(10)
          .fontColor(0xffffff)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 4 })
      }
    }
    .width(36)
    .height(36)
    .backgroundColor(this.drawingBoardButtonBackgroundColor)
    .padding({ top: 3, bottom: 3 })
    .margin({ bottom: 4 })
    .onClick(() => {
      if(this.currentDocumentName === '') {
        return;
      }
      this.toggleDrawingBoardPanel(); // 切换画板面板
    })

    Button({ type: ButtonType.Normal }) { // 插入图片按钮
      Column() {
        Image($r('app.media.insert_image')).width(16).height(16)
        Text($r('app.string.insert'))
          .fontSize(10)
          .fontColor(0xffffff)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 4 })
      }
    }
    .width(36)
    .height(36)
    .backgroundColor(this.insertElementsButtonBackgroundColor)
    .padding({ top: 3, bottom: 3 })
    .margin({ bottom: 4 })
    .onClick(() => {
      if(this.currentDocumentName === '') {
        return;
      }
      this.toggleInsertElementsPanel(); // 切换插入元素面板
    })

    Button({ type: ButtonType.Normal }) { // 图像特效按钮
      Column() {
        Image($r('app.media.image_effects')).width(16).height(16)
        Text($r('app.string.image_effects'))
          .fontSize(10)
          .fontColor(0xffffff)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 4 })
      }
    }
    .width(36)
    .height(36)
    .backgroundColor(this.effectsButtonBackgroundColor)
    .padding({ top: 3, bottom: 3 })
    .margin({ bottom: 4 })
    .onClick(() => {
      if(this.currentDocumentName === '') {
        return;
      }
      this.toggleEffectsPanel(); // 切换特效面板
    })

    Button({ type: ButtonType.Normal }) { // 分享按钮
      Column() {
        Image($r('app.media.share')).width(16).height(16)
        Text($r('app.string.share'))
          .fontSize(10)
          .fontColor(0xffffff)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 4 })
      }
    }
    .width(36)
    .height(36)
    .backgroundColor(this.sharedDataButtonBackgroundColor)
    .margin({ bottom: 4 })
    .padding({ top: 3, bottom: 3 })
    .onClick(() => {
      if(this.currentDocumentName === '') {
        return;
      }
      this.toggleSharedDataPanel(); // 切换共享数据面板
    })

    Button({ type: ButtonType.Normal }) { // 导出按钮
      Column() {
        Image($r('app.media.export')).width(16).height(16)
        Text($r('app.string.export'))
          .fontSize(10)
          .fontColor(0xffffff)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 4 })
      }
    }
    .width(36)
    .height(36)
    .margin({ bottom: 4 })
    .backgroundColor(this.exportButtonBackgroundColor)
    .padding({ top: 3, bottom: 3 })
    .onClick(() => {
      if(this.currentDocumentName === '') {
        return;
      }
      this.toggleExportPanel(); // 切换导出面板
    })

    Button({ type: ButtonType.Normal }) { // 设置按钮
      Column() {
        Image($r('app.media.settings')).width(16).height(16)
        Text($r('app.string.settings'))
          .fontSize(10)
          .fontColor(0xffffff)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 4 })
      }
    }
    .width(36)
    .height(36)
    .margin({ bottom: 4 })
    .backgroundColor(this.settingsButtonBackgroundColor)
    .padding({ top: 3, bottom: 3 })
    .onClick(() => {
      if(this.currentDocumentName === '') {
        return;
      }
      this.toggleSettingsPanel(); // 切换设置面板
    })

    Button({ type: ButtonType.Normal }) { // 更多按钮
      Column() {
        Image($r('app.media.more')).width(16).height(16)
        Text($r('app.string.more'))
          .fontSize(10)
          .fontColor(0xffffff)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 4 })
      }
    }
    .visibility(Visibility.None) // 按钮默认不可见
    .width(36)
    .height(36)
    .margin({ bottom: 4 })
    .backgroundColor(this.moreButtonBackgroundColor)
    .padding({ top: 3, bottom: 3 })
    .onClick(() => {
      if(this.currentDocumentName === '') {
        return;
      }
      this.toggleMorePanel(); // 切换更多面板
    })
  }.backgroundStyle() // 设置背景样式
  .justifyContent(FlexAlign.Start) // 水平对齐方式：开始
  .alignItems(VerticalAlign.Center) // 垂直对齐方式：居中
}