UI组件控件

在 SDK 中，我们提供了一些 UI 组件，可以通过 UIDisplayWidget 控件暴露出来并对这些 UI 组件使用。

UI组件控件的初始化和管理方式与其他常规控件并无差异，只是在使用时有众多参数，在此就不在介绍初始化以及管理方式。

1. 数据结构

1.1 UIDisplayWidget 控件

// 参数数据结构
interface UIDisplayProps{
  position?: Position 
  // 标题
  title?: string
  components: IComponents[]
}

1.2 UI 组件的位置

// 暴露 
type Position = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

1.3 可暴露的UI组件

interface IComponents {
  //表单
  form?: IForm
  //图片列表
  imgList?: IImgList
  //图表
  chart?: IChart
  //数列表
  treeTable?: ITreeTable
  //播放器
  player?: IPlayer
}

1.4 表单配置项数据结构

interface IForm {
  type?:'form'
  schemas: []
  showBtn: boolean
  onchanged: void
  onsubmit: void
}

1.5 图片列表配置项

interface IImgList {
  type?:'imgList'
  imgListOptions: []
  onchange: void
}

1.6 图表配置项

interface IImgList {
  type?: 'chart'
  options: object
  width: string
  height: string
  onchartClick: void
}

1.7 数列表配置项

interface ITreeTable {
  type?: 'treeTable'
  data: []
  columns: []
  gotoRow: string
  onrowClick: void
}

1.8 播放器配置项

interface IPlayer {
  type?: 'player'
  // 视频地址
  url: string
  // 是否直播
  isLive: boolean
  // 是否自动播放
  autoplay: boolean
  // 是否自动静音自动播放，如果autoplay为false，则该属性的作用为默认静音播放
  muted: boolean
  // 是否显示全屏空间
  fullscreen: boolean
  // 音量，设置为false则不显示此控件，音量范围为0~1
  volume: number | boolean
  // 视频封面
  poster: string
  // 是否循环播放
  loop: boolean
}

2. 控件使用

由上述控件参数数据结构不难看出，当我们使用 UI 组件类型为 'form' 时，只需要传入相应的 form 表单配置项，以此来自定义我们所想要的表单格式。

以表单为具体的使用示例展示如下：

const UIDisplayWidget = new ubm.UIDisplayWidget(scene, {
  position: 'top-right',
  title: '表单',
  // 1、components为对象时用法如下
  components:{
    form: {
      schemas: [
        // 在此不展示太多表单配置项 此表单配置项为 input输入框
        { type: 'input', label: '必填输入框', value: '111', name: 'input', required: true, labelDirection: 'horizontal' }
      ],
      // 是否展示表单提交按钮
      showBtn: true,
      // 表单修改回调
      onchanged: (e) => {
        const change = e.detail
        console.log('表单修改:', e, change)
      },
      // 表单提交回调
      onsubmit: (e) => {
        const data = e.detail.value.data
        console.log('表单信息:', data)
      }
    }
  }
  // 2、components为数组时用法如下
  components:[
    {
      type:'form',
      schemas: [
        // 在此不展示太多表单配置项 此表单配置项为 input输入框
        { type: 'input', label: '必填输入框', value: '111', name: 'input', required: true, labelDirection: 'horizontal' }
      ],
      // 是否展示表单提交按钮
      showBtn: true,
      // 表单修改回调
      onchanged: (e) => {
        const change = e.detail
        console.log('表单修改:', e, change)
      },
      // 表单提交回调
      onsubmit: (e) => {
        const data = e.detail.value.data
        console.log('表单信息:', data)
      }
    }
  ]
})

//scene为场景实例
scene.ui.add(UIDisplayWidget)
注：如代码示例所示，components 属性可为对象或者数组。由于其是对象时，其中的UI组件不可重复使用，所以如果需要在同一个 UIDisplayWidget 控件中重复使用UI组件时，请使用 components 属性为数组的方式填写内容。

使用此控件的展示效果和具体使用方式，以及其他几种 UI 组件类型的具体使用方式，请看下方"相关应用实例"跳转页。

Table of Contents