GUI指南

HiSpark Studio支持创建GUI工程和GUI模拟器的使用。按照“新建工程”指导新建Brandy工程后，单击工具栏菜单下的“创建GUI应用”图标可在Brandy的工程中创建GUI工程。

说明： Linux/WSL环境下不支持本章节功能。 仅Brandy/3322系列芯片支持本章节功能。

图 1 创建GUI工程 创建GUI工程

  • 像素值：默认454×454对应生成的画布大小，在形状为circle（圆形）时，分辨率为直径×直径，当创建圆形且分辨率的两个像素值不相等时，取默认466×466，在形状为rectangle（矩形）时，分辨率为长×宽。像素值可以自定义，取值范围为1～1024。

  • 形状：分为circle（圆形）和rectangle（矩形），如果不主动选择，默认为圆形。

说明： 使用GUI模拟器前，需要将对应的资源res复制到“software\code\sdk\application\wearable”中。HiDiTing SDK不需要进行上述复制操作。

GUI界面介绍

GUI拖拽界面介绍

GUI工程创建后，会在工程目录“application/wearable/nativeapp/nativeui/应用名”下创建一个以工程名命名的GUI文件，打开后会呈现表盘形状，可自定义表盘内容。

当前支持的组件包括Button、Image、Progress、List、Label、ToggleButton、CheckBox、RadioButton、LabelButton、ScrollView、CircleProgress、ArcLabel、SwipeView、TextureMapper、Slider、Picker、TimePicker、Chart、EditText、ImageAnimator、DigitalClock、Qrcode、AnalogClock、SweepClock、Coverflow、Barcode、CardPage、CrossView、MapView、RollerView、HexagonsList、IcosahedronView、CanvasExt、TransformList、SlipflowView、TransformGroup、Coverflow2、ParticleView组件和Root组件。

图 1 GUI拖拽界面

  • FileTree：页面树，可以选择添加、删除页面、修改页面标题、设置主页面。

  • UI Control：UI组件栏，可以将相应的组件选中并拖动到画布（Canvas）中，实现组件的添加。

  • Component Tree：组件树，在低代码开发界面中，开发者可以直观地看到组件的层级结构和摘要信息。开发者可以通过选中组件树中的组件（画布中对应的组件被同步选中），实现画布内组件的快速定位；单击组件后的“”，可以隐藏/显示相应的组件。

  • Panel：功能面板，包括CrossView、Coverflow2组件用到的子组件切换，以及常用的画布缩小放大、组件左对齐、垂直居中对齐、右对齐、顶对齐、水平居中对齐、底对齐、图层切换、撤销、显示/隐藏组件虚拟边框、一键生成C++代码等。

  • Canvas：画布，开发者可在此区域对组件进行拖拽、拉伸等可视化操作，构建UI界面布局效果。

  • Attributes & Styles：属性样式栏，选中画布中的相应组件后，在右侧属性样式栏可以对该组件的属性样式进行配置。

    • General：对应图标，用于设置Width、Height、Background、Position、Display等常规样式。

    • Feature：对应图标，用于设置组件的特有样式，如描述Text组件文字大小的FontSize样式等。

    • Events：对应图标，为组件绑定相关事件，并设置绑定事件的回调函数。

页面树介绍

页面的新增删除修改标题设置主页

  • 页面新增

    点击FileTree新增页面按钮，可新增空白页面。

    图 1 页面新增 页面新增

  • 页面删除

    将鼠标悬浮在需要删除的页面右侧，弹出操作框后，点击Delete按钮，可删除页面。

    图 2 页面删除 页面删除

  • 页面修改标题

    将鼠标悬浮在需要修改标题的页面右侧，弹出操作框后，点击Rename按钮，可修改标题。重命名只能包含字母（A-Z，a-z）、数字（0-9）和下划线（_），必须以字母开头。

    图 3 页面修改标题 页面修改标题

  • 页面设置主页

    将鼠标悬浮在需要设置主页的页面右侧，弹出操作框后，点击Set HomePage按钮，可设置主页。

    图 4 页面设置主页 页面设置主页

组件介绍

组件的复制粘贴删除

以Button组件为例，在画布内已经拖入Button组件的前提下进行操作：

  • 组件删除

    组件可以通过两种方式删除：

    • 右键点击画布中的Button组件显示操作栏，在弹出的操作栏点击Delete。

    • 选中Button组件，通过键盘Del键删除。

    图 1 组件删除 组件删除

  • 组件复制

    组件可以通过两种方式复制：

    • 右键点击画布中的Button组件显示操作栏，在弹出的操作栏点击Copy，再次右键后点击Paste，实现复制粘贴。

    • 选中Button组件，通过键盘Ctrl+C和Ctrl+V实现复制粘贴。

    图 2 组件复制 组件复制

    图 3 组件粘贴 组件粘贴

组件的共有属性

以Button组件为例，选中组件栏中的Button组件，将其拖拽至中央画布区域，松开鼠标，实现一个Button组件的添加。（组件会生成在画布上坐标(100,100)的位置）。

图 1 拖拽组件 拖拽组件

以下操作需在画布内已经拖入Button组件的前提下进行操作。

  • 选中画布内的Button组件，通过右侧属性样式栏中的样式图标（General），在展开的General栏中修改Button组件的ID。ID并非生成代码时的变量名，因此多个组件可以设置同一个ID。

    图 2 通用属性配置：Id 通用属性配置-Id

  • 选中画布内的Button组件，通过右侧属性样式栏中的样式图标（General），在展开的General栏中修改Button组件的宽高、位置；另外还可以通过拖拽的方式放大缩小Button组件以及改变组件的位置。

    图 3 通用属性的配置 通用属性的配置

  • 选中Button组件，单击右侧属性样式栏中的样式图标（General），在展开的General栏中修改Button组件的BackgroundColor属性改变背景颜色。

    图 4 修改背景颜色 修改背景颜色

  • 选中画布内的Button组件，通过右侧属性样式栏中的样式图标（General），在展开的General栏中修改Button组件GaussOption框中的FullScreenState、GaussianBlur属性以改变组件的高斯模糊。该操作需在同时选中两个组件的前提下进行。FullScreenState为false时高斯模糊设置不生效，FullScreenState为true时高斯模糊设置生效。GaussianBlur属性控制高斯模糊的模糊程度。详情请参见“高斯模糊属性”。

    图 5 高斯模糊 高斯模糊

  • 选中画布内的Button组件，通过右侧属性样式栏中的样式图标（General），在展开的General栏中修改Button组件Border框中的Width、Color、Radius属性改变边框的样式。

    图 6 修改组件边框样式 修改组件边框样式

  • 选中Button组件，单击右侧属性样式栏中的样式图标（General），在展开的General栏中修改Button组件Margin框中的MarginTop和MarginLeft属性调整组件相对表盘的位置。

    图 7 修改组件相对窗口位置 修改组件相对窗口位置

  • 选中Button组件，单击右侧属性样式栏中的样式图标（General），在展开的General栏中修改Padding改变组件padding部分四个方向的宽度。

    图 8 组件相对边框位置 组件相对边框位置

Button组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的Button组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Button组件的DefaultImgSrc属性加载图片。

    图 1 DefaultImgSrc属性配置 DefaultImgSrc属性配置

  • 选中画布内的Button组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Button组件的ImageX和ImageY属性调整图片位置（修改前需要设置DefaultImgSrc属性）。

    图 2 ImageX/ImageY属性配置 ImageX-ImageY属性配置

  • 选中画布内的Button组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Button组件的ImageOpacity属性调整图片透明度（需要设置DefaultImgSrc）。

    图 3 ImageOpacity属性配置 ImageOpacity属性配置

  • 选中画布内的Button组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    Button组件支持的事件有：OnClick、OnLongPress、OnPress、OnCancel和OnRelease。

    图 4 回调事件配置 回调事件配置

说明：

  • General页面下的MarginBottom属性和MarginRight属性无界面渲染效果。

  • Feature页面下的TriggeredImgSrc属性、TriggeredBackgroundColor属性、TriggeredBorderColor属性无界面渲染效果，可以在模拟器上查看渲染效果。

  • DefaultImgSrc和TriggeredImgSrc不支持中文路径。

Image组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的Image组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Image组件的ImagePath属性加载图片。 在已有选中图片情况下再次选择相同图片，或者在浏览文件时关闭窗口或单击取消时，界面渲染效果将不会改变。需要清空图片可以删除输入框中的文本。

    图 1 特有属性配置：ImagePath 特有属性配置-ImagePath

    说明： ImagePath不支持中文路径。 导入的Bin文件必须是图片转的Bin，否则模拟器会异常。

  • 选中画布内的Image组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Image组件的ImageOpacity属性调整图片透明度。

    图 2 特有属性配置：ImageOpacity 特有属性配置-ImageOpacity

  • 选中画布内的Image组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Image组件的AutoEnable属性。

    • AutoEnable属性设置为true时，组件会被限制为图片本身的大小，无法通过拖拽组件或直接修改Width/Height值来修改组件的显示效果。

    • AutoEnable属性设置为false时，会按照组件大小展示图片，设置不同的ImageResizeMode属性值可以呈现不同的显示效果。

    图 3 特有属性配置：AutoEnable 特有属性配置-AutoEnable

  • 选中画布内的Image组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Image组件的ImageResizeMode属性。

    • AutoEnable属性设置为true时，ImageResizeMode属性不生效。

    • AutoEnable属性设置为false时，ImageResizeMode生效，对应不同的显示效果。 当前共有6种模式对应的效果示例如下（图片原始尺寸为80×80）：

      • ImageResizeMode - None

        图 4 图片平铺（图中组件大小为200×200） 图片平铺（图中组件大小为200-200）

      • ImageResizeMode - Cover

        图 5 图片覆盖组件1（图中组件大小为100×200） 图片覆盖组件1（图中组件大小为100-200）

        图 6 图片覆盖组件2（图中组件大小为200×100） 图片覆盖组件2（图中组件大小为200-100）

      • ImageResizeMode - Contain

        图 7 图片被组件包含在内（图中组件大小为100×200） 图片被组件包含在内（图中组件大小为100-200）

        图 8 图片被组件包含在内（图中组件大小为200×100） 图片被组件包含在内（图中组件大小为200-100）

      • ImageResizeMode - Fill

        图 9 图片填满组件（图中组件大小为200×100） 图片填满组件（图中组件大小为200-100）

      • ImageResizeMode - Center

        图 10 图片处在组件中心（图中组件大小为100×100） 图片处在组件中心（图中组件大小为100-100）

        说明： 组件宽高任一为0时，图片隐藏。

      • ImageResizeMode - Scale Down

        图 11 组件宽高较大时，图片按原有尺寸显示 组件宽高较大时-图片按原有尺寸显示

        图 12 组件宽高较小时，图片会缩小并被组件包含在内 组件宽高较小时-图片会缩小并被组件包含在内

说明：

  • 组件的特有属性ImagePath未设置时，模拟器中不会显示组件。

  • General页面下的MarginBottom属性和MarginRight属性没有任何界面渲染效果，可在模拟器上查看效果。

  • Feature页面下的BlurLevel属性和Algorithm属性没有任何界面渲染效果，可在模拟器上查看效果。

  • Image组件不支持配置回调事件。

Progress组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中Progress组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中ForegroundStyle窗口中修改Progress组件的前景色。

    图 1 修改前景色 修改前景色

  • 选中Progress组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中BackgroundStyle窗口中修改Progress组件的背景色。

    图 2 修改背景色 修改背景色

  • 选中Progress组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Progress组件的ProgressWidth和ProgressHeight属性改变组件的宽度和高度。

    图 3 修改组件宽高 修改组件宽高

  • 选中Progress组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Progress组件的Direction属性以修改进度条方向。

    图 4 修改进度条方向 修改进度条方向

  • 选中Progress组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Progress组件的Value属性以修改进度。

    图 5 修改进度 修改进度

  • 选中Progress组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Progress组件的ForeImage属性添加已走过进度的图片和BackImage属性添加进度条整体的图片。路径不能为空，不支持中文路径。

    图 6 添加图片 添加图片

说明：

  • General页面下的BackgroungColor属性，MarginBottom属性和MarginRight属性暂无渲染效果。

  • Feature页面下的ForegroundStyle和BackgroundStyle的子属性BorderWidth、BorderColor、BorderRadius、LineWidth、LineHeight、LineColor、ImageOpacity属性暂无渲染效果。

  • Progress组件不支持配置回调事件。

List组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中List组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改itemHeight属性设置所有子项的高度；修改itemWidth属性设置所有子项的宽度；修改imageWidth属性设置所有子项图片的宽度；修改imageHeight属性设置所有子项图片的高度；修改FontSize属性设置所有子项的字体大小；点击Item栏右侧的加号添加子项，修改子项中的Text属性和ImagePath属性添加文本和图片。

    图 1 添加子项 添加子项

  • 选中List组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改List组件的OffsetX属性设置所有子项的横向偏移，修改OffsetY属性设置所有子项的纵向偏移。

    图 2 修改子项的偏移 修改子项的偏移

  • 选中List组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改List组件的Direction属性设置列表的排列方向。

    图 3 修改列表的排列方向 修改列表的排列方向

  • 选中画布内的List组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    List组件支持的事件有：OnClick、OnLongPress、OnDrag、OnDragStart、OnDragEnd、OnPress、OnCancel、OnRelease、OnFocus和OnBlur。

    图 4 回调事件配置 回调事件配置-1

说明：

  • General页面下的MarginBottom属性和MarginRight属性无渲染效果。

  • Feature页面下的Isloop属性、Autoalign属性、Aligntime属性、Startindex属性均没有界面渲染效果，在添加子元素后可在模拟器查看效果。

  • 目前删除子项的最后一个元素会出现无法删除的问题，如需删除，可以在关闭界面的状态下在index.visual中将属性listItemText和listItemPath删除。

Label组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的Label组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Label组件的Text属性来编辑文本内容（新添加组件默认文本内容为“default”）。

    图 1 特有属性配置：Text文本内容 特有属性配置-Text文本内容

  • 选中画布内的Label组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中设置Label组件的Font属性：

    • Color：字体颜色

    • Size：字体大小

    • LetterSpace：字母间距

    • LineSpace：行间距

    • LineHeight：行高（行高小于字体大小时将以字体大小为准，最终行高＝行高＋行间距）

    • TextDirection：文本方向

    图 2 通用属性配置：文本相关属性 通用属性配置-文本相关属性

  • 选中画布内的Label组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Label组件的TextAlign属性改变文字的横向与纵向排布。

    图 3 改变文字排布 改变文字排布

  • 选中画布内的Label组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Label组件的LineBreakMode属性。LineBreakMode对应6种换行模式，详细介绍如下：

    • Adapt：组件大小自适应文本，且不会对文本做自动换行。

      说明： 组件宽高不受通用属性Width/Height值影响，因此不可通过拖拽组件或直接修改Width/Height值的方式改变组件宽高。

      图 4 LineBreakMode - Adapt LineBreakMode---Adapt

    • Stretch：组件高度按照设置的Height值显示，宽度由文本中最长的行决定，文本不会自动换行。

      说明： 组件宽度不受通用属性Width值影响，因此不可通过拖拽组件或直接修改Width值的方式改变组件宽度。

      图 5 LineBreakMode - Stretch LineBreakMode---Stretch

    • Wrap：组件宽度按照设置的Width值显示，文本自动换行，组件高度由文本行数决定。

      说明： 组件高度不受通用属性Height值影响，因此不可通过拖拽组件或直接修改Height值的方式改变组件高度。

      图 6 LineBreakMode - Wrap LineBreakMode---Wrap

    • Ellipsis：组件大小按照设置的Height和Width值显示，文本自动换行，超出组件的文本将在末尾以省略号的形式显示。

      图 7 LineBreakMode - Ellipsis LineBreakMode---Ellipsis

    • Clip：组件大小按照设置的Height和Width值显示，文本自动换行，超出组件的文本将在末尾自动隐藏。

      图 8 LineBreakMode - Clip LineBreakMode---Clip

    • Marquee：组件大小按照设置的Height和Width值显示，文本不自动换行，超出组件的文本将自动隐藏。

      说明： 此模式下如果单行文本长度不超出组件时，文本按照设置的TextAlign进行对齐。 文本长度超出组件时，文本会自动向左循环滚动播放。

      图 9 LineBreakMode - Marquee LineBreakMode---Marquee

  • 选中画布内的Label组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Label组件的RollAnimation属性。

    RollAnimation属性只在LineBreakMode为Marquee且文本长度超出时生效。RollAnimation包含滚动速度（Speed）和滚动起始位置（Pos）。

    图 10 特有属性配置：RollAnimation 特有属性配置-RollAnimation

说明：

  • General页面下的MarginBottom属性和MarginRight属性没有任何界面渲染效果，可在模拟器上查看效果。

  • Label组件不支持配置回调事件。

ToggleButton组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的ToggleButton组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ToggleButton组件的ImageOpacity属性以修改图片透明度。

    图 1 修改图片透明度 修改图片透明度

  • 选中ToggleButton组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ToggleButton组件的State属性改变组件的状态，当属性值为true时为选中状态，反之为未选中状态。

    图 2 修改组件状态 修改组件状态

  • 选中ToggleButton组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ToggleButton组件的UnSelectedImg属性添加未选中时的图片和SelectedImg属性添加选中时的图片，两张图片必须同时存在时才会产生渲染效果，通过将属性UnSelectedImg和SelectedImg恢复成空（手动删除），可以实现图片的删除。

    说明： 图片不支持中文路径，且路径中不能包含空格。

    图 3 添加图片 添加图片-2

  • 选中画布内的ToggleButton组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    ToggleButton组件支持的事件有：OnClick、OnLongPress、OnPress、OnCancel、OnRelease和OnChange。

    图 4 回调事件配置 回调事件配置-3

说明： General页面下的MarginBottom属性、MarginRight属性暂无渲染效果。

CheckBox组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的CheckBox组件，在已经添加图片的前提下，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改CheckBox组件的ImageOpacity属性以修改图片透明度。

    图 1 修改图片透明度 修改图片透明度-4

  • 选中CheckBox组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改CheckBox组件的State属性改变组件的状态，当属性值为Selected时为选中状态，反之为未选中状态。

    图 2 修改组件状态 修改组件状态-5

  • 选中CheckBox组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改CheckBox组件的UnSelectedImg属性添加未选中时的图片和SelectedImg属性添加选中时的图片，两张图片必须同时存在才会产生渲染效果，通过将属性UnSelectedImg和SelectedImg恢复成空（手动删除），可以实现图片的删除。

    说明： 图片不支持中文路径，且路径中不能包含空格。

    图 3 添加图片 添加图片-6

  • 选中画布内的CheckBox组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    CheckBox组件支持的事件有：OnClick、OnLongPress、OnPress、OnCancel、OnRelease和OnChange。

    图 4 回调事件配置 回调事件配置-7

说明： General页面下的MarginTop属性、MarginRight属性无渲染效果。

RadioButton组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的RadioButton组件，在已经添加图片的前提下，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改RadioButton组件的ImageOpacity属性以修改图片透明度。

    图 1 修改图片透明度 修改图片透明度-8

  • 选中RadioButton组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改RadioButton组件的State改变组件的状态，当属性值为Selected时为选中状态，反之为未选中状态。

    图 2 修改组件状态 修改组件状态-9

  • 选中RadioButton组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改RadioButton组件的SelectedImg属性添加选中时的图片和UnSelectedImg属性添加未选中时的图片，两张图片必须同时存在才会产生渲染效果，通过将SelectedImg和UnSelectedImg属性恢复成空（手动删除），可以实现图片的删除。

    图 3 添加图片效果展示 添加图片效果展示

    说明： SelectedImg属性和UnSelectedImg属性不支持中文路径。

  • 选中画布内的RadioButton组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    RadioButton组件支持的事件有：OnClick、OnLongPress、OnPress、OnCancel、OnRelease和OnChange。

    图 4 回调事件配置 回调事件配置-10

说明：

  • General页面下的MarginBottom属性和MarginRight属性无渲染效果。

  • Feature页面下的Name属性没有任何界面渲染效果。当界面上有2个组件，并且Name属性一样时，模拟器才可以实现状态的切换。

LabelButton组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中LabelButton组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改LabelButton组件的ImageOpacity属性可以修改图片的透明度。

    图 1 修改图片透明度 修改图片透明度-11

  • 选中LabelButton组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改LabelButton组件的ImageX属性和ImageY属性可以对图片的位置进行调整。

    图 2 修改ImageX属性和ImageY属性的效果 修改ImageX属性和ImageY属性的效果

  • 选中LabelButton组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改LabelButton组件的Text属性添加文本。

    图 3 添加文本 添加文本

  • 选中LabelButton组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中设置LabelButton组件的Font属性：

    • Color：字体颜色

    • FontSize：字体大小

    • TextDirection：文本方向

    图 4 文本相关属性 文本相关属性

  • 选中LabelButton组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改LabelButton组件的Text Xoffset属性和Text Yoffset属性对文字的位置进行调整。

    图 5 对文字位置进行调整 对文字位置进行调整

  • 选中LabelButton组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改LabelButton组件的TextAlign属性对文字的水平对齐方式进行调整。

    图 6 修改文字的对齐方式 修改文字的对齐方式

  • 选中LabelButton组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改LabelButton组件的DefaultImgSrc属性可以添加图片，通过将属性DefaultImgSrc恢复成空（手动删除），可以实现图片的删除。

    图 7 添加图片 添加图片-12

    说明： DefaultImgSrc属性不支持中文路径。

  • 选中画布内的LabelButton组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    LabelButton组件支持的事件有：OnClick、OnLongPress、OnPress、OnCancel和OnRelease。

    图 8 回调事件配置 回调事件配置-13

说明：

  • General页面下的MarginBottom属性和MarginRight属性没有任何的渲染效果。

  • Feature页面下的TriggeredImgSrc属性、TriggeredBackgroundColor属性、TriggeredborderColor属性没有任何界面渲染效果，可在模拟器上查看效果。

ScrollView组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中组件栏中的其他组件，可以将其拖入ScrollView组件中，并且对其他组件进行样式调整。子组件的位置是相对于父容器的左上角，当组件已经存在于界面上时，点击组件中心位置可以将组件拖入容器中。

    图 1 将其他组件拖入ScrollView组件中 将其他组件拖入ScrollView组件中

  • 选中ScrollView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ScrollView组件的Direction属性可以控制组件哪个方向可以滚动。

    图 2 修改组件状态 修改组件状态-14

  • 选中画布内的ScrollView组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    ScrollView组件支持的事件有：OnDrag、OnDragStart、OnDragEnd、OnFocus、OnBlur和OnScroll。

    图 3 回调事件配置 回调事件配置-15

说明：

  • 当其他组件不是直接从左侧UI Control栏拖入时可能会发生其他组件出现在ScrollView组件外面且无法看到的情况，并且当多次从左侧UI Control栏拖入组件时，它们会重复出现在画布(100,100)坐标位置。

  • General页面下的MarginBottom属性和MarginRight属性没有任何的渲染效果。

  • Feature页面下的除Direction属性外其他属性均没有界面渲染效果，可在模拟器上查看效果。

  • ScrollView的滚动条一直处于隐藏状态，但仍保持正常的拖拽方式。

CircleProgress组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的CircleProgress组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改CircleProgress组件的ForegroundStyle和BackgroundStyle窗口中LineWidth属性改变进度条宽度；修改LineColor属性改变进度条颜色。

    图 1 修改进度条宽度 修改进度条宽度

    图 2 修改进度条颜色 修改进度条颜色

  • 选中画布内的CircleProgress组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改CircleProgress组件的RangeMax和RangeMin用来限制进度条的value，修改value来改变进度值。

    图 3 修改进度值 修改进度值

  • 选中画布内的CircleProgress组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改CircleProgress组件的Radius和CenterX属性和CenterY用来限定圆环。

    图 4 修改圆环大小 修改圆环大小

  • 选中画布内的CircleProgress组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改CircleProgress组件的StartAngel和EndAngel属性用来限制绘制角度。

    图 5 修改角度 修改角度

  • 选中画布内的CircleProgress组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改CircleProgress组件的ForeImage或者BackImage的子属性来添加前景或者背景图片并且修改图片位置。

    说明： 图片不支持中文路径，且路径中不能包含空格。

    图 6 添加图片 添加图片-16

说明：

  • General页面下的MarginBottom属性、MarginRight属性无渲染效果。

  • Feature页面下的ForegroundStyle和BackgroundStyle的子属性BackgroundColor、BorderWidth、BorderColor、BorderRadius、LineHeight、ImageOpacity无渲染效果。

  • CircleProgress组件不支持回调事件配置。

ArcLabel组件

本组件的共有属性不包含Position属性与Size属性，其他共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的ArcLabel组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ArcLabel组件的LetterSpace属性来修改文本之间的间隔。

    图 1 修改文字颜色 修改文字颜色

  • 选中画布内的ArcLabel组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ArcLabel组件的TextAlign属性改变文本在圆环上的对齐方式。

    图 2 文本对齐方式修改 文本对齐方式修改

  • 选中画布内的ArcLabel组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ArcLabel组件的Text属性来改变显示的文本。

    图 3 显示文本的修改 显示文本的修改

  • 选中画布内的ArcLabel组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ArcLabel组件的TextColor属性来修改文字的颜色。

    图 4 修改文字颜色 修改文字颜色-17

  • 选中画布内的ArcLabel组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ArcLabel组件的TextSize改变文本中文字的大小。

    图 5 文本中文字大小修改 文本中文字大小修改

  • 选中画布内的ArcLabel组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ArcLabel组件的CenterX、CenterY属性改变文字所在圆的圆心位置。

    图 6 文本所在圆圆心修改 文本所在圆圆心修改

  • 选中画布内的ArcLabel组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ArcLabel组件的TextRadius改变文字所在圆的半径。

    图 7 文本所在圆半径修改 文本所在圆半径修改

  • 选中画布内的ArcLabel组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ArcLabel组件的StartAngle、EndAngle属性改变文本在圆中出现的范围。

    图 8 文本出现在圆上的范围修改 文本出现在圆上的范围修改

  • 选中画布内的ArcLabel组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ArcLabel组件的TextOrientation改变文本的朝向。

    图 9 文本朝向修改 文本朝向修改

说明：

  • General页面下的MarginBottom属性和MarginRight属性无任何渲染效果。

  • ArcLabel组件不支持回调事件配置。

SwipeView组件

本组件的共有属性不包含Border属性、Margin属性与Padding属性，其他共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中SwipeView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改SwipeView组件的Direction属性改变组件的滚动方向。子组件的位置是相对于父容器的左上角，当组件已经存在于界面上时，点击组件中心位置可以将组件拖入容器中。

    图 1 修改滚动条位置 修改滚动条位置

    说明： 滚动条已被隐藏，当容器内的子组件超出范围时可拖动，HORIZONTAL是水平滚动，VERTICAL是垂直滚动。

  • 选中画布内的SwipeView组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    SwipeView组件支持的事件有：OnDrag、OnDragStart、OnDragEnd、OnSwipe。

    图 2 回调事件配置 回调事件配置-18

说明：

  • Feature页面下的Isloop属性、AlignMode属性、TickTime属性暂无渲染效果。

  • 在水平模式下上方工具栏的顶部对齐、底部对齐、上下居中对齐不可用。

  • 在垂直模式下上方工具栏的左对齐、右对齐、左右居中对齐不可用。

  • SwipeView的滚动条一直处于隐藏状态，但仍保持正常的拖拽方式。

TextureMapper组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中TextureMapper组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏通过修改TextureMapper组件的ImagePath属性添加图片，通过将ImagePath属性恢复成空（手动删除），可以实现图片的删除。

    图 1 添加图片 添加图片-19

    说明： ImagePath属性不支持中文路径。

  • 选中TextureMapper组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏通过修改TextureMapper组件的ImageOpacity属性修改图片的透明度。

    图 2 修改图片透明度 修改图片透明度-20

  • 选中画布内的TextureMapper组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    TextureMapper组件支持的事件有：OnMapper。

    图 3 回调事件配置 回调事件配置-21

说明：

  • General页面下的MarginBottom属性和MarginRight属性均无渲染效果。

  • Feature页面下除ImagePath属性外其他属性均没有界面渲染效果，可在模拟器上查看效果。请在展示动画效果前先添加图片并且Feature页面的IsStart属性为true。

  • 组件的大小在添加图片后固定为图片的大小，且修改组件宽高不生效。

Slider组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中Slider组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Slider组件的SliderValue属性改变滑块的位置。

    图 1 修改滑块位置 修改滑块位置

  • 选中Slider组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Slider组件的SliderWidth属性改变滑槽的宽度。

    图 2 修改滑槽宽度 修改滑槽宽度

  • 选中Slider组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Slider组件的SliderHeight属性改变滑槽的高度。SliderHeight不能超出边框的高度。

    图 3 修改滑槽高度 修改滑槽高度

  • 选中Slider组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Slider组件的Direction属性改变滑槽的方向。

    图 4 修改滑动方向 修改滑方向

  • 选中Slider组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Slider组件的KnobWidth属性改变滑块的宽度。

    图 5 修改滑块大小 修改滑块大小

  • 选中Slider组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Slider组件的BackGroundImage属性改变滑槽的背景图片；修改Slider组件的BackGroundColor属性改变滑槽的背景色。

    说明： 图片不支持中文路径，且路径中不能包含空格。

    图 6 添加图片 添加图片-22

    图 7 设置颜色 设置颜色

  • 选中Slider组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏的ForeStyle窗口中修改Slider组件的ForeImg属性改变滑槽的前景图片；修改ForeGroundColor改变滑槽的前景颜色。

    说明： 图片不支持中文路径，且路径中不能包含空格。

    图 8 添加图片 添加图片-23

    图 9 修改背景颜色 修改背景颜色-24

  • 选中Slider组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏KnobStyle窗口中修改Slider组件的KnobImage属性添加图片；修改KnobBackGroundColor属性改变滑块的颜色；修改KnobRadius属性改变滑块的边框弧度。

    图 10 添加图片 添加图片-25

    说明： 图片不支持中文路径，且路径中不能包含空格。

    图 11 修改背景颜色 修改背景颜色-26

    图 12 修改弧度 修改弧度

  • 选中画布内的Slider组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    Slider组件支持的事件有：OnClick、OnLongPress、OnDrag、OnDragStart、OnDragEnd、OnPress、OnCancel、OnRelease、OnFocus、OnBlur。

    图 13 回调事件配置 回调事件配置-27

说明：

  • General页面下的GaussianBlur属性、MarginBottom属性和MarginRight属性均无渲染效果。

  • 组件的大小在添加图片后固定为图片的大小，且修改组件宽高不生效。

Picker组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中Picker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Picker组件的Normal属性改变组件未选中字体颜色。

    图 1 修改未选中字体颜色 修改未选中字体颜色

  • 选中Picker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Picker组件的HighLight属性改变组件选中字体颜色。

    图 2 修改选中字体颜色 修改选中字体颜色

  • 选中Picker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Picker组件的ItemHeight属性改变组件条目高度。

    图 3 修改条目高度 修改条目高度

  • 选中Picker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Picker组件的LoopState属性使组件内容循环。

    图 4 设置循环 设置循环

  • 选中Picker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Picker组件的Values属性改变组件显示文本，数据格式为："x1", "x2", "x3"...（必须带""）

    图 5 修改文本 修改文本

  • 选中Picker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中同步Count属性值（必须与输入数组子元素个数相等）。

    图 6 添加元素个数值 添加元素个数值

  • 选中Picker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Picker组件的TextDirection属性值改变文本的书写方向。LTR表示文字方向为从左至右，RTL为从右至左。如图7所示，第一个值为“12345”，通过设置TextDirection属性值为RTL后，画布中显示的文字为“54321”。

    图 7 修改文本方向 修改文本方向

  • 选中画布内的Picker组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    Picker组件支持的事件有：OnFocus和OnBlur。

    图 8 回调事件配置 回调事件配置-28

说明：

  • General页面下的MarginBottom属性和MarginRight属性均无渲染效果。

  • Count属性值与数组元素个数保持一致。

TimePicker组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中TimePicker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改TimePicker组件的ItemHeight属性改变组件条目高度。

    图 1 修改条目高度 修改条目高度-29

  • 选中TimePicker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改TimePicker组件的Values属性改变组件显示文本。

    图 2 修改文本 修改文本-30

  • 选中TimePicker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改TimePicker组件的HourLoop属性改变组件小时窗口是否循环。

    图 3 设置循环 设置循环-31

  • 选中TimePicker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改TimePicker组件的MinLoop属性改变组件分钟窗口是否循环。

    图 4 设置循环 设置循环-32

  • 选中TimePicker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改TimePicker组件的SecLoop属性改变组件秒窗口是否循环。（在SecShows属性为true情况下）

    图 5 设置循环 设置循环-33

  • 选中TimePicker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改TimePicker组件的NormalColor属性改变组件未选中字体颜色。

    图 6 修改字体颜色 修改字体颜色

  • 选中TimePicker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改TimePicker组件的HighLightColor属性改变组件选中字体颜色。

    图 7 修改字体颜色 修改字体颜色-34

  • 选中TimePicker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改TimePicker组件的SecShow属性设置秒窗口是否显示。

    图 8 设置秒窗口显示 设置秒窗口显示

  • 选中TimePicker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改TimePicker组件的BackgroundFontsize属性改变组件未选中字体大小。

    图 9 设置字体大小 设置字体大小

  • 选中TimePicker组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改TimePicker组件的HighlightFontsize属性改变组件选中字体大小。

    图 10 设置字体大小 设置字体大小-35

  • 选中画布内的TimePicker组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    TimePicker组件支持的事件有：OnFocus和OnBlur。

    图 11 回调事件配置 回调事件配置-36

说明： General页面下的MarginBottom属性和MarginRight属性均无渲染效果。

Chart组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中Chart组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改XAxis栏中的属性改变横坐标的样式。

    • MarkNum属性：改变坐标轴上点的数量

    • RangMin和RangMax：改变坐标轴的取值范围

    • Color：改变坐标轴的颜色

    • Visible：控制坐标轴的可见与否

    图 1 修改横坐标属性 修改横坐标属性

  • 选中Chart组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改YAxis栏中的属性改变纵坐标样式，具体修改与横坐标相同，请参考图2。

    图 2 修改纵坐标样式 修改纵坐标样式

  • 选中Chart组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中点击DataSerial属性右侧的加号添加数据，可以添加多组数据。

    图 3 添加数据 添加数据

  • 选中Chart组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中添加数据然后改变数据的样式，其中Data属性是要填入的数据，DataCount属性是数据的个数，FillColor是填充渐变色的颜色，LineColor是线的颜色，EnableGradient属性控制是否填充渐变色。

    图 4 添加数据效果展示 添加数据效果展示

  • 选中Chart组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中ColorGradient窗口中MinOpa和MaxOpa属性改变渐变色的范围，MaxOpa控制上面的渐变色透明度，MinOpa控制下面的渐变色透明度。

    图 5 修改透明度渐变色 修改透明度渐变色

  • 选中Chart组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Chart组件的Type属性改变图的类型。

    图 6 修改图的类型 修改图的类型

说明：

  • General页面下的MarginBottom属性和MarginRight属性均无渲染效果。

  • 添加数据时的格式为： {x1,y1},{x2,y2}; 数据中不能有空格，横坐标应从0开始依次递增，DataCount属性中的数字不能比数据个数小。当DataCount属性中的数字比数据个数大时，会自动补连{0,0}，柱状图时横坐标的MarkNum也不能比数据个数小。

  • ColorGradient属性只有在折线图时有用。

  • 目前Chart首次修改DataSerial属性时，属性界面可能无法发生变化，通过再次修改DataSerial属性中的其他属性可使界面发生变化。

  • Chart组件不支持回调事件的配置。

EditText组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中EditText组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改EditText组件的Placeholder属性以修改背景提示文字。

    图 1 修改背景提示文字 修改背景提示文字

  • 选中EditText组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改EditText组件的Text属性以修改前景文字的内容，并且当前景文字存在时无法显示背景文字。

    图 2 修改前景文字 修改前景文字

  • 选中EditText组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改EditText组件的EditTextColor属性以修改前景文字的颜色。

    图 3 修改前景文字颜色 修改前景文字颜色

  • 选中EditText组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改EditText组件的MaxLength属性来限制前景文字输入长度。

    图 4 限制前景文字长度 限制前景文字长度

  • 选中EditText组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改EditText组件的InputType属性来改变输入模式。

    • text模式：输入的文本正常显示

    • password模式：输入的文本以密码模式显示（被“·”代替）

    图 5 改变输入模式 改变输入模式

  • 选中EditText组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改EditText组件的PlaceholderColor属性以修改背景提示文字的颜色。

    图 6 修改背景提示文字颜色 修改背景提示文字颜色

  • 选中EditText组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改EditText组件的CursorColor属性来修改光标的颜色。

    图 7 光标颜色 光标颜色

  • 选中画布内的EditText组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    EditText组件支持的事件有：OnClick、OnLongPress、OnPress、OnCancel、OnRelease。

    图 8 回调事件配置 回调事件配置-37

说明：

  • General页面下的MarginBottom属性和MarginRight属性均无渲染效果。

  • 文字修改只能通过右侧的特有属性进行，在界面上通过键盘删除文字时会出现将组件删除的问题，修改前景文本请通过右侧的Text文本进行。

DigitalClock组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中DigitalClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改DigitalClock组件的Color属性改变字体颜色。

    图 1 修改字体颜色 修改字体颜色-38

  • 选中DigitalClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改DigitalClock组件的DisplayMode属性改变组件显示状态。

    图 2 组件显示状态 组件显示状态

  • 选中DigitalClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改DigitalClock组件的DisplayLeadigZero属性设置是否在小时前面加0。

    图 3 是否添加0 是否添加0

  • 选中DigitalClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改DigitalClock组件的Hour属性设置小时。

    图 4 设置小时 设置小时

  • 选中DigitalClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改DigitalClock组件的Minute属性设置分钟。

    图 5 设置分钟 设置分钟

  • 选中DigitalClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改DigitalClock组件的Second属性设置秒。

    图 6 设置秒 设置秒

说明：

  • General页面下的MarginBottom属性和MarginRight属性均无渲染效果。

  • DigitalClock不支持回调事件的配置。

ImageAnimator组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中ImageAnimator组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中添加图片路径。

    图 1 图片路径 图片路径

  • 选中ImageAnimator组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ImageAnimator组件的ImageNum属性保证显示图片的个数与输入图片路径的个数相等。

    图 2 图片的个数 图片的个数

  • 选中ImageAnimator组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ImageAnimator组件的Times属性控制循环次数。该属性只有在Repeat为false情况下生效。

    图 3 循环次数 循环次数

  • 选中ImageAnimator组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ImageAnimator组件的Fixed属性用来适应图片大小。

    图 4 是否适应图片大小 是否适应图片大小

  • 选中ImageAnimator组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ImageAnimator组件的Repeat属性控制图片是否循环。

    图 5 设置图片是否循环 设置图片是否循环

  • 选中ImageAnimator组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ImageAnimator组件的Reverse属性设置图片循环方向。

    图 6 设置图片循环方向 设置图片循环方向

  • 选中ImageAnimator组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ImageAnimator组件的FillMode属性设置动画最后一帧显示的图片，true为当前循环模式下动画的第一张图片，false为最后一张。其中，Reverse属性值影响循环动画的图片先后顺序。

    图 7 设置最后一帧 设置最后一帧

说明：

  • General页面下的MarginBottom属性和MarginRight属性均无渲染效果。

  • Feature页面下的TimeOfUpdate属性和TimeOfPause属性无渲染效果。

  • ImageAnimator组件不支持回调事件的配置。

Qrcode组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的Qrcode组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Qrcode组件的ImageOpacity属性来修改二维码的透明度。

    图 1 修改二维码透明度 修改二维码透明度

  • 选中画布内的Qrcode组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Qrcode组件的BackColor属性修改二维码的背景颜色。

    图 2 修改背景色 修改背景色-39

  • 选中画布内的Qrcode组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Qrcode组件的QrcodeColor属性修改二维码的颜色。

    图 3 修改二维码颜色 修改二维码颜色

说明：

  • General页面下的BackgroungColor属性、MarginBottom属性和MarginRight属性均无渲染效果。

  • Feature页面下的Text属性无界面渲染效果，具体效果可在模拟器查看。

  • Qrcode组件不支持回调事件的配置。

AnalogClock组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中AnalogClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Hour窗口中的PositionX属性和PositionY属性来修改时针的位置，同时，Minute窗口和Second窗口中的PositionX属性和PositionY属性可以分别修改分针和秒针的位置。

    图 1 修改指针的位置 修改指针的位置

  • 选中AnalogClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Hour窗口中的CenterX属性和CenterY属性来修改时针的旋转中心（该坐标以PositionX和PositionY所在点为原点，相对于表针位置而非组件左上角）同时，Minute窗口和Second窗口中的CenterX属性和CenterY属性可以分别修改分针和秒针的旋转中心。

    图 2 修改指针的旋转中心 修改指针的旋转中心

  • 选中AnalogClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Hour窗口中的Color属性来修改时针的颜色，同时，Minute窗口和Second窗口中的Color属性可以分别修改分针和秒针的颜色。

    图 3 修改指针的颜色 修改指针的颜色

  • 选中AnalogClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Hour窗口中的Width属性来修改时针的宽度，同时，Minute窗口和Second窗口中的Width属性可以分别修改分针和秒针的宽度。

    图 4 修改指针的宽度 修改指针的宽度

  • 选中AnalogClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Hour窗口中的Length属性来修改时针的长度，同时，Minute窗口和Second窗口中的Length属性可以分别修改分针和秒针的长度。

    图 5 修改指针的长度 修改指针的长度

  • 选中AnalogClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Hour窗口中的Opacity属性来修改时针的颜色透明度，同时，Minute窗口和Second窗口中的Opacity属性可以分别修改分针和秒针的颜色透明度。

    图 6 修改指针的颜色透明度 修改指针的颜色透明度

  • 选中AnalogClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Hour窗口中的LineImage属性来为时针添加图片，同时，Minute窗口和Second窗口中的LineImage属性可以分别为分针和秒针添加图片。

    图 7 为指针添加图片 为指针添加图片

    说明： LineImage属性不支持中文路径。

  • 选中AnalogClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改AnalogClock组件的NewMode属性来控制秒针的显示。

    图 8 控制秒针的显示 控制秒针的显示

  • 选中画布内的AnalogClock组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    AnalogClock组件支持的事件有：OnClick、OnLongPress、OnPress、OnCancel和OnRelease。

    图 9 回调事件配置 回调事件配置-40

  • 选中组件栏中的其他组件，可以将其拖入AnalogClock组件中，并且对其他组件进行样式调整。子组件的位置是相对于父容器的左上角，当组件已经存在于界面上时，单击组件中心位置可以将组件拖入容器中。

    图 10 将其他组件拖入AnalogClock组件中 将其他组件拖入AnalogClock组件中

说明：

  • General页面下的MarginBottom属性和MarginRight属性均无渲染效果。

  • Feature页面下的Am属性无界面渲染效果。

SweepClock组件

本组件包含AnalogClock组件的所有属性，与其类似，因此相同属性不再赘述，请参见“AnalogClock组件”描述。

  • 选中SweepClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Hour窗口中的CenterImage属性，为时针中心点添加图片，同时，Minute窗口和Second窗口中的CenterImage属性可以分别修改分针和秒针的中心点添加图片。

    图 1 为中心圆圈添加图片 为中心圆圈添加图片

    说明： CenterImage属性不支持中文路径。

  • 选中SweepClock组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改Hour窗口中的CenterImageX属性和CenterImageY属性，修改时针中心图片的位置。同时，Minute窗口和Second窗口中的CenterImage属性可以分别修改分针和秒针的中心图片的位置。

    图 2 控制秒针的显示 控制秒针的显示-41

  • 选中组件栏中的其他组件，可以将其拖入SweepClock组件中，并且对其他组件进行样式调整。子组件的位置是相对于父容器的左上角，当组件已经存在于界面上时，单击组件中心位置可以将组件拖入容器中。

    图 3 将其他组件拖入SweepClock组件中 将其他组件拖入SweepClock组件中

说明：

  • General页面下的MarginBottom属性和MarginRight属性均无渲染效果。

  • Feature页面下的Am属性无界面渲染效果。

  • SweepClock不支持回调事件的配置。

Coverflow组件

本组件的共有属性不包含Border属性、Margin属性与Padding属性，其他共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中Coverflow组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏导入一张或者多张图片（可以调整画布大小，使图片显示效果更好），第一张图片默认位于画布正中间。

    图 1 特有属性配置：ImagePath 特有属性配置-ImagePath-42

    说明： ImagePath不支持中文路径。 导入的Bin文件必须是图片转的Bin，否则模拟器会异常。

  • 选中画布内的Coverflow组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改Coverflow组件中的ImgWidth和ImgHeight可以调整图片宽高。

    更改图片宽高后，所有导入Coverflow组件的图片宽高随之改变，且第一张图片始终位于组件的正中间。

    图 2 特有属性配置：ImgWidth和ImgHeight 特有属性配置-ImgWidth和ImgHeight

  • 选中画布内的Coverflow组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改Coverflow组件中的RotateAngle调整旋转角度。

    图 3 特有属性配置：RotateAngle 特有属性配置-RotateAngle

  • 选中画布内的Coverflow组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改Coverflow组件中的Padding调整图片之间的间距。

    图 4 特有属性配置：Padding 特有属性配置-Padding

  • 选中画布内的Coverflow组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改Coverflow组件中的IsShowMirrorImg设置是否显示图片镜像。

    图 5 特有属性配置：IsShowMirrorImg 特有属性配置-IsShowMirrorImg

  • 选中画布内的Coverflow组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改Coverflow组件中的MirrorOpa设置图片镜像的透明度。

    图 6 特有属性配置：MirrorOpa 特有属性配置-MirrorOpa

  • 选中画布内的Coverflow组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    Coverflow组件支持的事件有：OnDrag、OnDragStart、OnDragEnd和OnCoverflow。

    图 7 回调事件配置 回调事件配置-43

说明：

  • Feature页面下的RotateAngle、IsShowMirrorImg和MirrorOpa暂无渲染效果，具体效果可以在模拟器查看。

  • Coverflow的回调事件在生成的XXXPresenter.cpp文件中的回调函数名称为“OnScroll（）”。

Barcode组件

共有属性使用方法请参见“组件的共有属性”章节内容。

选中画布内的Barcode组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中有一个BarcodeInfo属性，提供Barcode的信息，且不能设置为空，如果设置为空，生成代码后，在模拟器中会显示条形码失败。

图 1 特有属性配置：BarcodeInfo 特有属性配置-BarcodeInfo

说明：

  • Feature页面下的BarcodeInfo属性无页面渲染效果。

  • Barcode组件不支持回调事件的配置。

  • BarcodeInfo不能设置为空，且不支持中文，如果设置为空或者为中文，模拟器中显示条形码失败。

  • BarcodeInfo设置完成后请点击其他位置后，再生成代码。

CardPage组件

本组件的General属性请参见“组件的共有属性”描述。

  • 选中画布内的CardPage组件，单击右侧属性样式栏中的 样式图标（Feature），在展开的Feature栏中有一个IsCoverable属性，默认为false，它的作用是设置拖动其他CardPage组件展示时是否覆盖上一个。

    图 1 特有属性配置：IsCoverable 特有属性配置-IsCoverable

  • 选中画布内的CardPage组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    CardPage组件支持的事件类型有：OnClick、OnLongPress、OnDrag、OnDragStart、OnDragEnd、OnPress、OnCancel、OnRelease、OnFocus、OnBlur、OnRotate、OnRotateStart、OnRotateEnd。

    图 2 回调事件配置 回调事件配置-44

说明：

  • Feature页面下的属性无界面渲染效果。

  • CardPage是一个容器组件，主要作为CrossView的子组件使用。

CrossView组件

本组件的General属性请参见“组件的共有属性”描述。

  • 选中CrossView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中可以看到EnableScreenCap属性，会弹出一个设定bool变量值的下拉框，它决定切换卡片时是否使能截图模式。

    图 1 特有属性配置：EnableScreenCap

  • 选中CrossView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中可以看到SetAnimatorTime属性，它决定模拟器中松手动画时间，其单位为毫秒（ms）。

    图 2 特有属性配置：SetAnimatorTime

  • 选中CrossView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中可以看到DragDirection属性，它决定子组件拖拽来的方向。

    图 3 特有属性配置：DragDirection

    当拖拽来的组件不是CardPage类型时，右下角会有“Only supports cardpage component”或“仅支持拖拽CardPage组件”提示，并且拖入的子组件不会在画布上展示。

    图 4 特有属性配置：DragDirection（仅支持拖拽CardPage类型的子组件） 特有属性配置-DragDirection（仅支持拖拽CardPage类型的子组件）

    CrossView组件前端渲染界面仅会展示其某一个CardPage子组件：

    • 当新增CardPage组件时，默认会展示最新拖拽进来的CardPage组件，隐藏掉之前的；

    • 当删除CardPage组件时，默认会展示上个被拖入的CardPage组件，并隐藏掉其他的。

    如果想实现切换，可以点击“GUI拖拽界面介绍”中所介绍的Panel面板的按钮，该按钮使用说明如下：

    1. 左右切换会分别显示拖拽来的上一个和下一个CardPage子组件。

    2. 是否支持组件间的循环切换和模拟器的设定规则保持一致，可以在Feature栏的Isloop中选择True或False。当置为False时，第一个组件单击左按钮和最后一个组件单击右按钮时不会有切换效果；当置为True时，第一个组件单击左按钮和最后一个组件单击右按钮时会实现彼此切换。

    3. 切换按钮仅在选中父组件为CrossView的CardPage子组件时生效，选中操作可以通过单击左侧组件树中的CardPage，或在渲染界面单击CardPage后单击左右按钮，从而展示被选中组件的前一个和后一个，如图5所示。

    4. 切换按钮如果选的不是父组件为CrossView的CardPage子组件时，会弹窗提示，如图6所示。

    图 5 特有属性配置：DragDirection（CardPage切换展示逻辑） 特有属性配置-DragDirection（CardPage切换展示逻辑）

    图 6 特有属性配置：DragDirection（非CrossView子组件切换的弹窗提醒） 特有属性配置-DragDirection（非CrossView子组件切换的弹窗提醒）

    当选择DragDirection为Horizontal方向时，拖拽CardPage组件，CardPage个数不做限制，每次拖拽入新的都会隐藏掉其他的CardPage子组件。

    图 7 特有属性配置：DragDirection（水平方向拖拽来的CardPage类型子组件） 特有属性配置-DragDirection（水平方向拖拽来的CardPage类型子组件）

    当选择DragDirection为Vertical-Up方向时，拖拽CardPage组件，拖拽新的组件时也会隐藏掉其他的CardPage子组件，但仅支持拖拽一个，当再次拖拽该方向的CardPage子组件时右下角会有“UpPage direction only supports one component”或“竖直上方向的CardPage组件仅支持拖拽一个”提示。

    图 8 特有属性配置：DragDirectio（竖直上方向仅支持拖拽一个子组件） 特有属性配置-DragDirectio（竖直上方向仅支持拖拽一个子组件）

    当选择DragDirection为Vertical-Down方向时，拖拽CardPage组件，拖拽新的组件时也会隐藏掉其他的CardPage子组件，且仅支持拖拽的个数为一个，当再次拖拽该方向的CardPage子组件时右下角会有“DownPage direction only supports one component”或“竖直下方向的CardPage组件仅支持拖拽一个”提示。

    图 9 特有属性配置：DragDirection（竖直下方向仅支持拖拽一个子组件） 特有属性配置-DragDirection（竖直下方向仅支持拖拽一个子组件）

  • 选中CrossView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中点击Isloop属性，会弹出一个设定bool变量值的下拉框，它决定是否开启水平卡片循环模式。

    图 10 特有属性配置：Isloop

  • 选中CrossView组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    CrossView组件支持的事件有：OnClick、OnLongPress、OnDrag、OnDragStart、OnDragEnd、OnPress、OnCancel、OnRelease、OnFocus、OnBlur、OnRotate、OnRotateStart、OnRotateEnd、OnSwipe。其中OnSwipe默认为True。

    图 11 回调事件配置

说明：

  • Feature界面除DragDirection的特性和Isloop与GUI界面前端渲染关联外，其他属性无界面渲染效果，可在模拟器中查看。

  • CrossView组件仅支持CardPage类型的子组件拖拽。

  • CrossView组件的所有弹窗均支持中英文适配。

MapView组件

本组件的General属性请参见“组件的共有属性”描述。

须知： 使用MapView前，需要将随SDK携带的map_convert_tool复制到“tools\simulator”目录下。

  • 选中MapView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中单击SvgPath右侧的图标，会弹出一个选择Svg文件的界面，解压地图对应的Svg文件到任意目录，单击选择后，再次打开该目录，刷新，可以看到会生成一个与Svg文件同名的bin文件，该文件用于模拟器读取并展示。同时该地图文件会绘制到画布中。

    图 1 特有属性配置：SvgPath-选择Svg文件 特有属性配置-SvgPath-选择Svg文件

    图 2 特有属性配置：SvgPath-绘制Svg图片 特有属性配置-SvgPath-绘制Svg图片

  • 选中MapView组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    MapView组件支持的事件有：OnClick、OnLongPress、OnDrag、OnDragStart、OnDragEnd、OnPress、OnCancel、OnRelease、OnFocus、OnBlur、OnRotate、OnRotateStart、OnRotateEnd和OnPOIClick。

    图 3 回调事件配置 回调事件配置-45

说明：

  • MapView是地图组件，应将地图文件展示到画布和模拟器中。

  • MapView的General属性仅包含ID、Position两个选项可供用户设置，工具和模拟器会默认展示该Svg图片的原始大小，用户可以根据模拟器实际效果调整Position参数。

RollerView组件

本组件的共有属性不包含Border属性、Margin属性与Padding属性，其他共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中RollerView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏导入一张或者多张图片（可以调整画布大小，使图片显示效果更好），第一张图片默认位于画布正中间。

    图 1 特有属性配置：ImagePath 特有属性配置-ImagePath-46

    说明： ImagePath不支持中文路径。 导入的Bin文件必须是图片转的Bin，否则模拟器会异常。

  • 选中画布内的RollerView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改RollerView组件中的ImageWidth和ImageHeight可以调整图片宽高。

    更改图片宽高后，所有导入RollerView组件的图片宽高随之改变，且第一张图片始终位于组件的正中间。

    图 2 特有属性配置：ImageWidth和ImageHeight 特有属性配置-ImageWidth和ImageHeight

  • 选中画布内的RollerView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改RollerView组件中的MirrorOpacity调整滚筒元素镜像图的透明度。

    图 3 特有属性配置：MirrorOpacity 特有属性配置-MirrorOpacity

  • 选中画布内的RollerView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改RollerView组件中的SensitivityFactor调整滚筒灵敏度。

    图 4 特有属性配置：SensitivityFactor 特有属性配置-SensitivityFactor

  • 选中画布内的RollerView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改RollerView组件中的Padding调整图片之间的间距。

    图 5 特有属性配置：Padding 特有属性配置-Padding-47

  • 选中画布内的RollerView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改RollerView组件中的CameraDistance设置模拟器中相机的距离。

    图 6 特有属性配置：CameraDistance 特有属性配置-CameraDistance

  • 选中画布内的RollerView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改RollerView组件中的CamY设置模拟器中相机的Y坐标。

    图 7 特有属性配置：CamY 特有属性配置-CamY

  • 选中画布内的RollerView组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    RollerView组件支持的事件有：OnClick、OnLongPress、OnDrag、OnDragStart、OnDragEnd、OnPress、OnCancel、OnRelease、OnFocus、OnBlur、OnScroll、OnModeChange。

    图 8 回调事件配置 回调事件配置-48

说明： Feature页面下的CameraDistance和CamY暂无渲染效果，具体效果可以在模拟器查看。 RollerView组件在模拟器中可以实现水平方向上将图片按照滚筒的形式排布并支持滚动交互。

HexagonsList组件

本组件的共有属性不包含Border属性、Margin属性与Padding属性，其他共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中HexagonsList组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏导入一张或者多张图片（可以调整画布大小，使图片显示效果更好），第一张图片默认位于画布正中间。

    图 1 特有属性配置：ImagePath 特有属性配置-ImagePath-49

    说明： ImagePath不支持中文路径。 导入的Bin文件必须是图片转的Bin，否则模拟器会异常。

  • 选中画布内的HexagonsList组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改HexagonsList组件中的ImageWidth和ImageHeight可以调整图片宽高。

    更改图片宽高后，所有导入HexagonsList组件的图片宽高随之改变，且第一张图片始终位于组件的正中间。

    图 2 特有属性配置：ImageWidth和ImageHeight 特有属性配置-ImageWidth和ImageHeight-50

  • 选中画布内的HexagonsList组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改HexagonsList组件中的Padding调整图片之间的间距。

    图 3 特有属性配置：Padding 特有属性配置-Padding-51

  • 选中画布内的HexagonsList组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改HexagonsList组件中的OriImgDistance属性来设置模拟器中两个相邻图像中心之间的原始图像距离。

    图 4 特有属性配置：OriImgDistance 特有属性配置-OriImgDistance

  • 选中画布内的HexagonsList组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改HexagonsList组件中的ImgSizeInCenter属性来设置模拟器中图像位于中心位置的大小。

    图 5 特有属性配置：ImgSizeInCenter 特有属性配置-ImgSizeInCenter

  • 选中画布内的HexagonsList组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改HexagonsList组件中的ReboundedSize属性来设置回弹大小，即拖拽到列表边缘之外再释放后回弹至列表边缘移动的距离。

    图 6 特有属性配置：ReboundedSize 特有属性配置-ReboundedSize

  • 选中画布内的HexagonsList组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改HexagonsList组件中的ScrollBlankSize属性来设置模拟器中组件滚动视图时的空白大小。

    图 7 特有属性配置：ScrollBlankSizec 特有属性配置-ScrollBlankSizec

  • 选中画布内的HexagonsList组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    HexagonsList组件支持的事件有：OnClick、OnLongPress、OnDrag、OnDragStart、OnDragEnd、OnPress、OnCancel、OnRelease、OnFocus、OnBlur、OnRotate、OnRotateStart、OnRotateEnd。

    图 8 回调事件配置 回调事件配置-52

说明： Feature页面下的OriImgDistance、ImgSizeInCenter、ReboundedSize和ScrollBlankSize暂无渲染效果，具体效果可以在模拟器查看。 ImageWidth、Padding，ImageHeight可以用于用户在界面展示多个组件时设置图片大小。 Rebounded和ScrollBlankSize的初始值为227，是默认组件的Position为(0, 0, 454, 454)，即整个表盘。具体的取值大小可以根据实际模拟器展示效果进行调整，通常这个取值为组件宽度的一半。 OriImgDistance和ImgSizeInCenter属性与组件宽度的乘积，决定了模拟器中图片的摆放位置关系。

IcosahedronView组件

本组件的共有属性不包含Position属性、Border属性、Margin属性与Padding属性，其他共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中IcosahedronView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏导入一张图片（可以调整画布大小，使图片显示效果更好），图片会默认填满整个画布。

    图 1 特有属性配置：DefaultSrc 特有属性配置-DefaultSrc

  • 选中IcosahedronView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改IcosahedronView组件中的LuminanceFactor属性来设置模拟器中亮度补偿因子，调整亮度。

    图 2 特有属性配置：LuminanceFactor 特有属性配置-LuminanceFactor

  • IcosahedronView组件仅支持Image组件导入。IcosahedronView组件的DefaultSrc属性设置了默认图片，如果导入的Image组件的图片个数少于20张，则使用该默认图片填充，达到类似足球样式的模拟器效果图。

    图 3 仅支持导入Image组件 仅支持导入Image组件

  • 选中画布内的IcosahedronView组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    IcosahedronView组件支持的事件有：OnClick、OnLongPress、OnDrag、OnDragStart、OnDragEnd、OnPress、OnCancel、OnRelease、OnFocus、OnBlur、OnRotate、OnRotateStart、OnRotateEnd。

    图 4 回调事件配置 回调事件配置-53

说明： IcosahedronView组件仅支持width和height调节，其坐标位置固定。

CanvasExt组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的CanvasExt组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。CanvasExt组件支持的事件有：OnClick、OnLongPress、OnPress、OnCancel和OnRelease。

    图 1 回调事件配置 回调事件配置-54

TransformList组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中TransformList组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改itemHeight属性设置所有子项的高度；修改itemWidth属性设置所有子项的宽度；修改itemSpace属性设置子项之间的间隙；修改imageHeight属性设置所有子项图片的高度；修改FontSize属性设置所有子项的字体大小；点击Item栏右侧的加号添加子项，修改子项中的Text属性和ImagePath属性添加文本和图片。

    图 1 添加子项 添加子项-55

  • 选中TransformList组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改List组件的OffsetX属性设置所有子项的横向偏移，修改OffsetY属性设置所有子项的纵向偏移。

    图 2 修改子项的偏移 修改子项的偏移-56

  • 选中TransformList组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改TransformList组件的Direction属性设置列表的排列方向。

    图 3 修改列表的排列方向 修改列表的排列方向-57

  • 选中画布内的TransformList组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    TransformList组件支持的事件有：OnClick、OnLongPress、OnDrag、OnDragStart、OnDragEnd、OnPress、OnCancel、OnRelease、OnFocus和OnBlur。

    图 4 回调事件配置 回调事件配置-58

SlipflowView组件

本组件的共有属性不包含Position属性、Size属性、GaussOption属性、Border属性、Margin属性与Padding属性，其他共有属性使用方法请参见“组件的共有属性”描述。

  • 选中画布内的SlipflowView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改SlipflowView组件中的ImgWidth和ImgHeight可以调整图片宽高。

    更改图片宽高后，所有导入SlipflowView组件的图片宽高随之改变，且第一张图片始终位于组件的正中间。

    图 1 特有属性配置：ImgWidth和ImgHeight 特有属性配置-ImgWidth和ImgHeight-59

  • 选中画布内的SlipflowView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改SlipflowView组件中的isEnableBackImage可以控制是否使能背景图片。

    图 2 特有属性配置：isEnableBackImage 特有属性配置-isEnableBackImage

  • 选中SlipflowView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改SlipflowView组件中的backImagePath可以设置背景图片资源路径。

    图 3 特有属性配置：backImagePath 特有属性配置-backImagePath

  • 选中SlipflowView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏导入一张或者多张图片（可以调整画布大小，使图片显示效果更好），第一张图片默认位于画布正中间。

    图 4 特有属性配置：ImagePath

    说明： ImagePath不支持中文路径。 导入的Bin文件必须是图片转的Bin，否则模拟器会异常。

  • 选中画布内的SlipflowView组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    SlipflowView组件支持的事件有：OnClick、OnLongPress、OnPress、OnCancel、OnRelease、OnScroll、OnScrollUpStart、OnScrollUpEnd、OnRemove和OnRefreshPageOpaScale。

    图 5 回调事件配置 回调事件配置-60

说明：

  • SlipflowView组件坐标位置固定，大小固定。

  • Feature页面下的isEnableBackImage和backImagePath暂无渲染效果，具体效果可以在模拟器查看。

TransformGroup组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的TransformGroup组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    TransformGroup组件支持的事件类型有：OnClick、OnLongPress、OnPress、OnCancel、OnRelease。

    图 1 回调事件配置 回调事件配置-61

说明： TransformGroup是一个容器组件，主要作为Coverflow2的子组件使用。

Coverflow2组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的Coverflow2组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改Coverflow2组件中的RotateAngle调整旋转角度。

    图 1 特有属性配置：RotateAngle

  • 选中画布内的Coverflow2组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改Coverflow2组件中的Padding调整图片之间的间距。

    图 2 特有属性配置：Padding

  • 选中画布内的Coverflow2组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改Coverflow2组件中的IsShowMirrorImg设置是否显示图片镜像。

    图 3 特有属性配置：IsShowMirrorImg

  • 选中画布内的Coverflow2组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改Coverflow2组件中的MirrorOpa设置图片镜像的透明度。

    图 4 特有属性配置：MirrorOpa

    当拖拽来的组件不是TransformGroup类型时，右下角会有“Only supports transformgroup component”或“仅支持拖拽TransformGroup组件”提示，并且拖入的子组件不会在画布上展示。

    图 5 组件拖入Coverflow2组件中 组件拖入Coverflow2组件中

Coverflow2组件前端渲染界面仅会展示其某一个TransformGroup子组件：

  • 当新增TransformGroup组件时，默认会展示最新拖拽进来的TransformGroup组件，隐藏掉之前的；

  • 当删除TransformGroup组件时，默认会展示上个被拖入的TransformGroup组件，并隐藏掉其他的。

如果想实现切换，可以单击“GUI拖拽界面介绍”中的Panel面板的按钮，该按钮使用说明如下：

  1. 左右切换会分别显示拖拽来的上一个和下一个TransformGroup子组件。

  2. 切换按钮在选中父组件为Coverflow2的TransformGroup子组件时生效，选中操作可以通过单击左侧组件树中的TransformGroup，或在渲染界面单击TransformGroup后单击左右按钮，从而展示被选中组件的前一个和后一个，如图6所示。

  3. 切换按钮如果选的不是父组件为Coverflow2的TransformGroup子组件时，会弹窗提示，如图7所示。

图 6 TransformGroup切换展示逻辑 TransformGroup切换展示逻辑

图 7 非Coverflow2子组件切换的弹窗提醒 非Coverflow2子组件切换的弹窗提醒

ParticleView组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的ParticleView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改ParticleView组件中的birthRateRatio调整粒子生产率系数，该系数将与ParticleCell定义的粒子生产率相乘。

    图 1 特有属性配置：birthRateRatio 特有属性配置-birthRateRatio

  • 选中画布内的ParticleView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改ParticleView组件中的lifeTimeRatio调整粒子生命周期系数，该系数将与ParticleCell定义的粒子生命周期相乘。

    图 2 特有属性配置：lifeTimeRatio 特有属性配置-lifeTimeRatio

  • 选中画布内的ParticleView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改ParticleView组件中的scaleRatio调整粒子缩放系数，该系数将与ParticleCell定义的粒子缩放倍数相乘。

    图 3 特有属性配置：scaleRatio 特有属性配置-scaleRatio

  • 选中画布内的ParticleView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改ParticleView组件中的velocityRatio调整粒子速度系数，该系数将与ParticleCell定义的粒子速度相乘。

    图 4 特有属性配置：velocityRatio 特有属性配置-velocityRatio

  • 选中画布内的ParticleView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改ParticleView组件中的Repeat调整粒子动画是否重复运行。

    图 5 特有属性配置：Repeat 特有属性配置-Repeat

  • 选中画布内的ParticleView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中修改ParticleView组件中的Time调整粒子动画运行周期。

    图 6 特有属性配置：Time 特有属性配置-Time

  • 选中画布内的ParticleView组件，通过右侧属性样式中的样式图标（Feature），在展开的Feature栏中点击ImagePath右侧的加号，导入一张或多张图片，并设置各项参数。

    图 7 特有属性配置：ImagePath 特有属性配置-ImagePath-62

    表 1 特有属性配置：ImagePath参数说明

    属性

    介绍

    Path

    设置粒子图源。

    CellWidth

    设置粒子初始宽度。

    CellHeight

    设置粒子初始高度。

    CellSizeRange

    设置粒子初始宽高上下浮动范围。

    PosX

    设置粒子横向初始位置。

    PosY

    设置粒子纵向初始位置。

    PosXRange

    设置粒子横向初始位置上下浮动范围。

    PosYRange

    设置粒子纵向初始位置上下浮动范围。

    Lifetime

    设置粒子生命周期。

    LifetimeRange

    设置粒子生命周期上下浮动范围。

    BirthRate

    设置粒子生产率：每个动画周期生产多少粒子。

    Velocity

    设置粒子速度。

    VelocityRange

    设置粒子速度上下浮动范围。

    StartAlpha

    设置粒子起始透明度。

    FinalAlpha

    设置粒子最终透明度。

    AlphaRange

    设置粒子起始和最终透明度上下浮动范围。

    ScaleX

    设置粒子横向最终缩放倍数。

    ScaleY

    设置粒子纵向最终缩放倍数。

    ScaleRange

    设置粒子最终缩放倍数上下浮动范围。

    AccelerationX

    设置粒子横向加速度。

    AccelerationY

    设置粒子纵向加速度。

    EmissionAngle

    设置粒子发射角度。

    EmissionRange

    设置粒子发射角度上下浮动范围。

    TotalPeriod

    设置ParticleCell活跃周期。仅在活跃周期内的ParticleCell可以生产粒子。

    Spin

    设置粒子周期性旋转度数。

    SpinMode

    设置粒子周期性旋转模式。

    SpinRange

    设置粒子周期性旋转度数上下浮动范围。

LabelExt组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中画布内的LabelExt组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改LabelExt组件的Text属性来编辑文本内容（新添加组件默认文本内容为“default”）。

    图 1 特有属性配置：Text文本内容 特有属性配置-Text文本内容-63

  • 选中画布内的LabelExt组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中设置LabelExt组件的Font属性：

    • Color：字体颜色

    • Size：字体大小

    • LetterSpace：字母间距

    • LineSpace：行间距

    • LineHeight：行高（行高小于字体大小时将以字体大小为准，最终行高＝行高＋行间距）

    • TextDirection：文本方向

    图 2 通用属性配置：文本相关属性 通用属性配置-文本相关属性-64

  • 选中画布内的LabelExt组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改LabelExt组件的TextAlign属性改变文字的横向与纵向排布。

    图 3 改变文字排布 改变文字排布-65

  • 选中画布内的LabelExt组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改LabelExt组件的LineBreakMode属性。LineBreakMode对应6种换行模式，详细介绍如下：

    • Adapt：组件大小自适应文本，且不会对文本做自动换行。

      说明： 组件宽高不受通用属性Width/Height值影响，因此不可通过拖拽组件或直接修改Width/Height值的方式改变组件宽高。

      图 4 LineBreakMode - Adapt LineBreakMode---Adapt-66

    • Stretch：组件高度按照设置的Height值显示，宽度由文本中最长的行决定，文本不会自动换行。

      说明： 组件宽度不受通用属性Width值影响，因此不可通过拖拽组件或直接修改Width值的方式改变组件宽度。

      图 5 LineBreakMode - Stretch LineBreakMode---Stretch-67

    • Wrap：组件宽度按照设置的Width值显示，文本自动换行，组件高度由文本行数决定。

      说明： 组件高度不受通用属性Height值影响，因此不可通过拖拽组件或直接修改Height值的方式改变组件高度。

      图 6 LineBreakMode - Wrap LineBreakMode---Wrap-68

    • Ellipsis：组件大小按照设置的Height和Width值显示，文本自动换行，超出组件的文本将在末尾以省略号的形式显示。

      图 7 LineBreakMode - Ellipsis LineBreakMode---Ellipsis-69

    • Clip：组件大小按照设置的Height和Width值显示，文本自动换行，超出组件的文本将在末尾自动隐藏。

      图 8 LineBreakMode - Clip LineBreakMode---Clip-70

    • Marquee：组件大小按照设置的Height和Width值显示，文本不自动换行，超出组件的文本将自动隐藏。

      说明： 此模式下当单行文本长度不超出组件时，文本按照设置的TextAlign进行对齐。 文本长度超出组件时，文本会自动向左循环滚动播放。

      图 9 LineBreakMode - Marquee LineBreakMode---Marquee-71

  • 选中画布内的LabelExt组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改LabelExt组件的RollAnimation属性。 RollAnimation属性只在LineBreakMode为Marquee且文本长度超出时生效。RollAnimation包含滚动速度（Speed）和滚动起始位置（Pos）。

    图 10 特有属性配置：RollAnimation 特有属性配置-RollAnimation-72

    说明：

    • General页面下的MarginBottom属性和MarginRight属性没有任何界面渲染效果，可在模拟器上查看效果。

    • LabelExt组件不支持配置回调事件。

  • 选中画布内的LabelExt组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改LabelExt组件的TextId属性，设置TextId，该功能需用户手动注册多语言功能，否则界面无法正常显示。

    图 11 特有属性配置：TextId 特有属性配置-TextId

  • 选中画布内的LabelExt组件，通过右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改LabelExt组件的ForceResetText属性，强制根据控件内部的TextId设置文本内容，该功能需用户手动注册多语言功能，否则界面无法正常显示。

    图 12 特有属性配置：ForceResetText 特有属性配置-ForceResetText

ChartPillarExt组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中ChartPillarExt组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改XAxis栏中的属性改变横坐标的样式。

    • MarkNum属性：改变坐标轴上点的数量

    • RangMin和RangMax：改变坐标轴的取值范围

    • Color：改变坐标轴的颜色

    • Visible：控制坐标轴的可见与否

    图 1 修改横坐标属性 修改横坐标属性-73

  • 选中ChartPillarExt组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改YAxis栏中的属性改变纵坐标样式，具体设置与横坐标相同，请参考图2。

    图 2 修改纵坐标样式 修改纵坐标样式-74

  • 选中ChartPillarExt组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中单击DataSerial属性右侧的加号添加数据，可以添加多组数据。

    图 3 添加数据 添加数据-75

  • 选中ChartPillarExt组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中添加数据然后改变数据的样式，其中Data属性是要填入的数据，DataCount属性是数据的个数，FillColor是填充颜色。

    图 4 添加数据效果展示 添加数据效果展示-76

  • 选中ChartPillarExt组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ChartPillarExt组件的PillarType属性改变图的类型。

    图 5 修改图的类型 修改图的类型-77

说明：

  • General页面下的MarginBottom属性和MarginRight属性均无渲染效果。

  • 添加数据时的格式为： {x1,y1},{x2,y2}; 数据中不能有空格，横坐标应从0开始依次递增，DataCount属性中的数字不能比数据个数小。当DataCount属性中的数字比数据个数大时，会自动补连{0,0}，柱状图时横坐标的MarkNum也不能比数据个数小。

  • 目前ChartPillarExt会有第一次修改DataSerial属性里的属性界面无法发生变化的问题，通过再次修改DataSerial属性中的其他属性的方式可以使界面发生变化。

  • ChartPillarExt组件不支持回调事件的配置。

ListNested组件

共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中ListNested组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改itemHeight属性设置所有子项的高度；修改itemWidth属性设置所有子项的宽度；修改imageWidth属性设置所有子项图片的宽度；修改imageHeight属性设置所有子项图片的高度；修改FontSize属性设置所有子项的字体大小；单击Item栏右侧的加号添加子项，修改子项中的Text属性和ImagePath属性添加文本和图片。

    图 1 添加子项 添加子项-78

  • 选中ListNested组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ListNested组件的OffsetX属性设置所有子项的横向偏移，修改OffsetY属性设置所有子项的纵向偏移。

    图 2 修改子项的偏移 修改子项的偏移-79

  • 选中ListNested组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ListNested组件的InterceptDireaction属性设置拦截方向，修改IsIntercept属性设置是否拦截上抛事件。

    图 3 修改拦截事件相关属性 修改拦截事件相关属性

  • 选中ListNested组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改ListNested组件的Direction属性设置列表的排列方向。

    图 4 修改列表的排列方向 修改列表的排列方向-80

  • 选中画布内的ListNested组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    ListNested组件支持的事件有：OnClick、OnLongPress、OnDrag、OnDragStart、OnDragEnd、OnPress、OnCancel、OnRelease、OnFocus和OnBlur。

    图 5 回调事件配置 回调事件配置-81

说明：

  • General页面下的MarginBottom属性和MarginRight属性无渲染效果。

  • Feature页面下的Isloop属性、Autoalign属性、Aligntime属性、Startindex属性均没有界面渲染效果，在添加子元素后可在模拟器查看效果。

SwipeViewNested组件

本组件的共有属性不包含Border属性、Margin属性与Padding属性，其他共有属性使用方法请参见“组件的共有属性”章节内容。

  • 选中SwipeViewNested组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改SwipeViewNested组件的Direction属性改变组件的滚动方向。子组件的位置是相对于父容器的左上角，当组件已经存在于界面上时，单击组件中心位置可以将组件拖入容器中。

    图 1 修改滚动条位置 修改滚动条位置-82

    说明： 滚动条已被隐藏，当容器内的子组件超出范围时可拖动，HORIZONTAL是水平滚动，VERTICAL是垂直滚动。

  • 选中SwipeViewNested组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中修改SwipeViewNested组件的InterceptDireaction属性设置拦截方向，修改IsIntercept属性设置是否拦截上抛事件。

    图 2 修改拦截事件相关属性 修改拦截时间相关属性

  • 选中画布内的SwipeViewNested组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    SwipeViewNested组件支持的事件有：OnDrag、OnDragStart、OnDragEnd、OnSwipe。

    图 3 回调事件配置 回调事件配置-83

说明：

  • Feature页面下的Isloop属性、AlignMode属性、TickTime属性暂无渲染效果。

  • 在水平模式下上方工具栏的顶部对齐、底部对齐、上下居中对齐不可用。

  • 在垂直模式下上方工具栏的左对齐、右对齐、左右居中对齐不可用。

  • SwipeViewNested的滚动条一直处于隐藏状态，但仍保持正常的拖拽方式。

LottieView组件

共有属性使用方法请参见“组件的共有属性”章节内容。

须知： 使用LottieView前，需要将随SDK携带的flatbuffertool复制到“tools\simulator”目录下。

  • 选中LottieView组件，单击右侧属性样式栏中的样式图标（Feature），在展开的Feature栏中单击LottiePath右侧的图标，会弹出一个选择Json文件的界面，选择Lottie对应的json文件，单击选择后，再次打开该目录、刷新，可以看到会生成一个与json文件同名的bin文件，该文件用于被模拟器读取并展示。同时画布中会显示Lottie图标。

    图 1 特有属性配置：LottiePath-选择Json文件 特有属性配置-LottiePath-选择Json文件

    图 2 特有属性配置：LottiePath-绘制lottie图标 特有属性配置-LottiePath-绘制lottie图标

  • 选中LottieView组件，通过右侧属性样式栏中的样式图标（Events），在展开的Events栏中配置回调事件。

    LottieView组件支持的事件有：OnClick、OnLongPress、OnDrag、OnDragStart、OnDragEnd、OnPress、OnCancel、OnRelease、OnFocus、OnBlur、OnRotate、OnRotateStart、OnRotateEnd。

    图 3 回调事件配置 回调事件配置-84

Root组件

本组件为中央区域的背景画布。

图 1 Root组件 Root组件

选中Root组件，在右侧展开的General栏中修改BackgroundColor属性，可以修改Root组件的颜色。

图 2 修改背景色 修改背景色-85

说明：

  • Root组件是所有组件的父组件。

  • Root组件是唯一的、自动创建的，不可进行除改变颜色外的其他操作。

用户代码编辑

用户单击画布右上角“Convert to C++ files”，会在工程中生成与界面样式对应的代码。

图 1 生成代码按钮 生成代码按钮

以工程名为aaaa的aaaa.gui工程和Button组件为例，生成的代码目录位于工程目录下“application/wearable/nativeapp/gui工程名”，具体结构如图2所示。用户可自行在xxxPresenter.cpp文件中按照模板添加自己的回调事件，模板代码如图3所示，其余部分都是自动生成的，每次点击生成代码按钮都会刷新。

图 2 生成代码目录结构 生成代码目录结构

说明：

  • 从其他组件切成CrossView组件，或者从CrossView组件切成其他组件，而后去生成代码时，由于CrossView组件添加子组件的特殊性，需要先手动删除当前已有的“/src/${AppName}View.cpp”后，再单击转换生成代码。

  • 其余“ui_xxView.h”格式的文件不可修改，GUI每次单击生成代码都会覆盖生成。

图 3 回调事件模板代码 回调事件模板代码

以click的回调事件为例，如果当前画布中只有一个组件的click回调被置为true，用户可直接在OnClick的回调函数中添加回调事件，如果当前画布中有多个组件的click回调被置为true，则用户需要按照提示来区分组件实现各自的回调，如图4所示。

图 4 多个组件同一回调事件代码实现 多个组件同一回调事件代码实现

组件对齐

组件对齐通过选中组件再单击界面上方工具栏中的对齐按钮实现。

对齐效果分别为左对齐，左右居中对齐，右对齐，顶部对齐，上下居中对齐和底部对齐六种。

根据选中的组件个数不同，对齐操作分为两种：

  • 选中一个组件

    只选中一个组件时，会将被选中的组件作为需要对齐的组件，以其父组件作为参照物进行对齐。可以通过组件树（Component Tree）查看组件的父子关系。

    说明： 只选中Root组件时无效。

  • 选中多个组件（通过按住Ctrl键单击多个组件）

    当被选中的组件不止一个时，将会以最后一个被选中的组件作为参照物，其他被选中的组件作为需要对齐的组件进行对齐。

    说明： 被选中的组件只能为Root组件或其直接子组件。

组件层级移动

组件层级移动通过选中组件再单击界面上方工具栏中的层级移动按钮实现。

图 1 组件层级移动 组件层级移动

为前进一层，为后退一层。

说明：

  • 每次单击操作只能使组件向前/向后一层。

  • 同时选中多个组件时层级移动操作只对最后一个选中的组件生效。

  • 层级移动无法调整当前组件的父组件（如当前组件是ScrollView/SwipeView的子组件，层级移动操作无法将组件移出父组件）。

  • 组件树中越靠近顶端的组件层级越低，越靠近底部的组件层级越高。

高斯模糊属性

组件的高斯模糊属性通过单击右侧属性样式栏中的样式图标（General），在展开的General栏中修改组件的GaussianBlur属性以设置高斯模糊，如图1所示。

图 1 高斯模糊 高斯模糊-86

组件设置高斯模糊之后，会将层级低于该组件的其他组件模糊处理。如图2所示。

图 2 高斯模糊效果范例 高斯模糊效果范例

说明：

  • 只有同时满足FullScreenState为true且GaussianBlur不为0时，高斯模糊才会生效。

  • 因渲染方式不同，GUI界面中组件渲染效果会与模拟器中实际效果存在一定差异。

  • 多个组件均设置高斯模糊效果时，仅最下层组件的高斯模糊生效。

  • 组件层级可通过组件树查看，层级移动方式和详细说明参考“组件层级移动”。

  • GaussianBlur属性决定不同程度的高斯模糊效果，合理的范围是[0, 32]。

  • 事件添加：当前版本在控件的Events属性中使能事件不会生成事件代码，需用户手动添加事件代码，具体添加方法是在应用代码（以应用名为gui6为例，在SDK根目录/application/wearable/nativeapp/nativeui/gui6/include/ui_gui6View.h）的setupUi方法中，对指定控件添加所需事件，如需要给id名称为“button1”的控件添加OnLongPress事件，则在setupUi方法末尾增加“button1->SetOnLongPressListener(gui6presenter_);”，其中“button1_”为控件在代码中的变量名，“gui6presenter_”为与应用名关联的在代码中自动生成的指针。

模拟器效果展示方法

Demo运行

单击图示中的“App Debug”，会启动编译调试并展示模拟器，运行默认Demo效果如图2所示。

运行过程中的日志信息记录在当前打开的工程根目录下的“simulator_build/error.txt”文件中。

图 1 App Debug按钮 App-Debug按钮

图 2 模拟器效果展示 模拟器效果展示

调试运行

单击“App Debug”按钮后，会自动启动编译和调试功能，用户可自行添加断点并进行调试。调试功能请参见“工程调试”章节。

图 1 调试功能展示 调试功能展示

经过GUI界面拖拽生成代码运行

用户在画布中添加组件、更改属性或使能回调后，启动模拟器，即可按照图1操作看到画布中添加的功能列表。

图 1 从模拟器查看添加的组件功能 从模拟器查看添加的组件功能

说明： 当模拟器显示主界面时，单击右上角按钮，会自动跳到功能列表页面，列表最前面即为添加组件列表；当模拟器显示非主界面时，单击右上角按钮，会自动跳到主界面。

从图中可以看出，当前添加的功能名称默认为创建的GUI工程名称，图标默认为“示例”图标。如果想要修改模拟器中GUI工程的图标和名称，可以在对应GUI工程的生成代码目录下的“Register.cpp”文件中进行修改。

图 2 修改默认GUI工程名称和列表前的图标 修改默认GUI工程名称和列表前的图标

在对应的cpp文件中，修改这四个参数可以修改模拟器中对应组件的图标或者名称。

①：桌面中选择图标模式（默认模式）对应的图标显示，格式为.bin的文件。

②：桌面中选择蜂窝模式对应的图标显示，格式为.bin的文件。

③：桌面中对应足球模式对应的图标显示，格式为.bin的文件。

④：组件对应的名称。

对于默认选择的图标模式，只需要更改①和④中的参数，即可修改模拟器中组件对应的图标和组件名。

模拟器尺寸与形状设置

用户创建GUI工程后，若需重新改变画布或模拟器的尺寸与形状，可以在工程中搜索“graphic_config.h”文件，该文件位于工程目录下的“application/brandy/simulator/libui”目录下，更改HORIZONTAL_RESOLUTION、VERTICAL_RESOLUTION以及DEVICE_SHAPE这三个参数，分别对应模拟器的直径（长宽）以及模拟器的形状。

图 1 更改模拟器的尺寸与形状 更改模拟器的尺寸与形状

图形工具介绍

图形工具用到的脚本在tools/graphic_tools.tar.gz的压缩包中，需提前解压供后续使用。单击插件页面或者状态栏中的“Graphics Tools”图标。

图 1 插件页面或者状态栏中的“Graphics Tools”图标

弹出功能页签，当前包含“图片解压缩”和“视频首帧提取”两个功能。

图 2 “GUI图形工具”页签

环境配置

在使用“Graphics Tools”图形工具功能之前，需要配置Python环境，请参考“工具链配置”。

Python安装成功后需要安装pip的依赖模块。

  • opencv模块

  • numpy模块

  • Pillow模块

  • ffmpeg-python

Python环境可以通过在选择的工具链下载目录中tools目录下的python目录如“D:\toolchain\tools\python”路径下打开cmd（命令提示符）窗口中进行验证。执行“.\python.exe --version”输出结果为‘Python 3.11.4’，以及执行“python.exe ..\..\downloads\pip.pyz list”命令输出结果显示有opencv-python、numpy以及pillow这些pip.pyz的依赖及其对应版本，则说明Python环境配置正确。

图 1 Python环境验证 python环境验证-87

图片解压缩工具

图片解压缩工具的功能：依据xml文件配置的压缩算法以及像素格式信息，将指定目录下的每一个子目录都打包成一个资源文件并且生成资源索引文件“ImageResources.cpp”；或者将指定目录下的每一个图片文件都打包成一个资源文件。解压模式下会将.bin文件的图片解压为.png格式的图片；压缩模式下会将.png、.jpg或者.bmp文件格式的图片压缩为.bin文件格式。

图 1 图片解压缩界面 图片解压缩界面

  • 脚本路径：需选择“images_convert.py”脚本所在的文件夹路径，一般为“graphic_tools\image_converter_tool”。

  • 解/压缩模式：指定解压、压缩模式，默认选择压缩模式。

  • 打包方式：分为文件打包方式和文件夹打包方式，默认选择文件打包方式。

    • 文件打包方式：以每个图片为单位进行打包。

    • 文件夹打包方式：将图片进行打包后，再以子文件夹为单位将其包含的已打包图片一并打包。

  • 压缩模式：默认为手动压缩模式。

  • alpha压缩模式：0：非压缩；1：压缩。默认为1：压缩模式。

  • rgb压缩模式：0：非压缩；1：压缩。默认为1：压缩模式。

  • 压缩单元宽度：4--4x4；6--6x4；8--8x4；16--16x4，也叫压缩倍率，在ARGB8888格式时分别对应4倍压缩、6倍压缩、8倍压缩、16倍压缩；在RGB888时分别对应3倍压缩，4.5倍压缩，6倍压缩，12倍压缩；在RGB565时分别对应2倍压缩，3倍压缩，4倍压缩，8倍压缩。默认为6倍压缩。

  • 图片输入路径：指定待处理图片的根目录，图片目录下的图片可以为“.jpg、.png、.bmp”等格式。

  • 图片输出路径：指定输出的文件夹。

须知：

  • 同一张图片压缩和解压的打包方式要保持一致，比如压缩模式选择“文件打包方式”，解压的时候也需要选择“文件打包方式”，若打包方式选择不一致，会导致压缩或解压功能异常。

  • 图片压缩仅支持.png、.bmp、.jpg文件的压缩，且图片分辨率大小不能超过1280*800（宽*高）。

  • 子文件夹名以及文件名必须为数字以及字母的组合。

  • 解/压缩模式选择为解压模式时，压缩模式、alpha压缩模式、rgb压缩模式和压缩单元宽度选项隐藏。

  • alpha和rgb同时为0是非压缩模式请注意适配。

  • 压缩倍率是与裸数据大小进行对比，而非与源文件大小对比，例如466×466的RGBA图片，无压缩大小为848KB，6倍压缩时为142KB，16倍压缩时大约为54KB。

  • 压缩操作为有损压缩，压缩倍率越大，图损越大。

  • 图片输出路径建议与图片输入路径保持一致，否则执行功能时会删除“图片输出路径”的文件夹，再自动创建一个同名文件夹保存输出的图片。

压缩模式样例

图 2 图片压缩具体选择样例 图片压缩具体选择样例

各选项均选择后，单击完成，执行压缩功能，终端界面输出显示内容如下：

图 3 图片压缩执行时终端界面输出 图片压缩执行时终端界面输出

“Conversion Success!”说明压缩成功。图片所在文件夹前后对比如下，成功将两张png格式图片转换成bin文件格式：

图 4 图片压缩前后效果展示 图片压缩前后效果展示

解压模式样例

将解/压缩模式选择为解压模式，压缩模式、alpha压缩模式、rgb压缩模式和压缩单元宽度选项隐藏。

图 5 图片解压具体选择样例 图片解压具体选择样例

各选项均选择后，单击完成，执行解压功能，终端界面输出显示内容如下：

图 6 图片解压执行时终端界面输出 图片解压执行时终端界面输出

“Decmpress Success”说明解压成功。图片所在文件夹前后对比如下，成功将两张bin格式图片解压为png文件格式：

图 7 图片解压前后对比 图片解压前后对比

视频首帧提取工具

视频在未加载前，首帧为黑帧，需要用户手动设置一张起始预览图，该功能提供提取视频首帧并将其转换为BMP格式图片的能力。

图 1 视频首帧提取工具页面 视频首帧提取工具页面

  • 脚本路径：需选择“convert_2_bmp.py”脚本所在的文件夹路径，一般为“graphic_tools\convert_2_bmp”。

  • 视频路径：需要提取的视频文件路径。

  • 视频帧宽/视频帧高：指定视频帧的宽高，需要与视频资源一致，且需要用户手动输入。

  • 图片生成路径：图片生成路径。

注意：

  • 视频格式当前仅支持YUV444和YUV420这两种。

  • 视频仅支持MJPEG编码及.mp4封装，调整视频格式及大小可借助ffmpeg工具， 例："ffmpeg -i video.mp4 -vf crop=454:454 -b:v 4228k -vcodec mjpeg out.mp4"。

  • 视频帧宽/高可以在视频的属性-->详细信息中查看。如果视频帧宽高与实际不一致，生成的图片会产生花屏。

视频首帧提取样例：

图 2 视频首帧提取具体选项样例 视频首帧提取具体选项样例

各选项均选择后，单击完成，执行视频首帧提取功能，终端界面输出显示内容如下：

图 3 视频首帧提取执行时终端界面输出 视频首帧提取执行时终端界面输出

“success”说明提取成功。视频所在文件夹前后对比如下，成功将mp4格式视频的首帧提取出来并保存为bmp格式的图片：

图 4 适配转换前后对比 适配转换前后对比

如果执行功能时终端中提示“未检测到 FFmpeg”，如图5所示。

图 5 未安装ffmepg提示信息 未安装ffmepg提示信息

需要手动下载安装ffmepg工具并添加至环境变量中，然后关闭所有的VS Code工具，再次打开执行视频首帧提取功能。

图 6 ffmpeg下载 ffmpeg下载

配置环境变量：编辑系统环境变量->环境变量->Path->将解压后的绝对路径“\ffmpeg-7.1.1-full_build-shared\bin”添加到环境变量中。

3D建模工具

使用方法

运行

单击COMMANDS里面的Modeling Tools，在上方选择“3D Modeling Tool”。

界面介绍

  • 工具启动主界面

    启动后工具主界面如图所示：

    图 1 3D建模工具启动主界面 3D建模工具启动主界面

    按钮功能介绍如下：

    • 模型类型：选择当前要使用的模型（球面：sphere；网格：mesh；平面：cylinder），会自动加载默认参数并运行。

    • 纹理导入：选择纹理素材文件。

    • 模型导入：选择模型文件。

    • 模型创建：打开子界面，进行模型参数配置并生成模型。

    • 模型导出：将工具中对应模式下生成的模型文件导出到本地。

    • 运行：运行对应模式下的用例并显示运行效果。

    • 默认参数：一键恢复所有参数到其默认值。

    • 参数导出：根据当前界面配置的模式，调整参数，获得理想效果后，可将该模式下的该组参数保存到一个文件中。

    • 显示日志/隐藏日志：打开/关闭下方的日志框。

  • 模型创建界面

    ①mesh界面：在模型选择中选择网格后，单击模型创建，弹出如图所示界面：

    图 2 mesh界面 mesh界面

    ②cylinder界面：在模型选择中选择平面后，单击模型创建，弹出如图所示界面：

    图 3 cylinder界面 cylinder界面

    ③sphere界面：在模型选择中选择球面后，单击模型创建，弹出如图所示界面：

    图 4 sphere界面 sphere界面

    单击保存按钮保存配置值，当单击完保存后，子窗体自动关闭。

操作步骤

  • mesh模式：

    mesh分为7种子模式，其中type0和type6属于强交互模式，模型在线生成，无需离线生成和载入；type1～type5属于弱交互模式，运行用例之前需要离线生成模型或者载入模型，二者选一即可。

    1. 单击主界面网格单选按钮，选中网格模式。

    2. 单击主界面模型创建按钮，进行模型参数设置。

    3. 单击type输入框进行子模式选择，并进行相关参数配置：

      type0：thr建议配置为1.0，len建议配置为5，cx、cy建议配置在非中心点位置，其他参数建议保持默认值

      type1：len建议配置为0.0，cx、cy只支持配置在中心点，其他参数建议保持默认值

      type2：len建议配置为4.52，cx、cy只支持配置在中心点，其他参数建议保持默认值

      type3：len建议配置为1，cx、cy只支持配置在中心点，其他参数建议保持默认值

      type4：len建议配置为3，cx、cy只支持配置在中心点，其他参数建议保持默认值

      type5：len建议配置为9.33，cx、cy只支持配置在中心点，其他参数建议保持默认值

      type6：thr建议配置为0.1，其他参数建议保持默认值

    4. 单击保存按钮保存，并返回主界面。

    5. 单击主界面纹理导入按钮选择纹理素材。

    6. 单击运行按钮。

    7. 拖动右侧mesh_ctrl滑块，观察效果。

  • cylinder模式：

    1. 单击主界面平面单选按钮，选中cylinder模式。

    2. 单击主界面模型创建按钮，进行模型参数设置，建议使用默认值。

    3. 单击保存按钮保存，并返回主界面。

    4. 单击纹理导入按钮选择纹理素材。

    5. 单击运行按钮。

    6. 拖动右侧cylinder_ctrl滑块（主要滑动的是cylinder_ctl），观察效果。

  • sphere模式：

    1. 单击主界面球面单选按钮，选中sphere模式。

    2. 单击主界面模型创建按钮，进行模型参数设置，建议使用默认值。

    3. 单击保存按钮保存，并返回主界面。

    4. 单击纹理导入按钮选择纹理素材。

    5. 单击运行按钮。

    6. 拖动右侧angel_x、angel_y、angel_z三个滑块，观察效果。

素材默认路径

须知： 以下路径不能删除，否则会导致程序运行错误。

  • 默认纹理素材路径：C:/Users/${用户名}/.vscode/extensions/hispark.hisparkstudio-${版本号}/dist/source_file/texture/

  • 默认模型素材路径：C:/Users/${用户名}/.vscode/extensions/hispark.hisparkstudio-${版本号}/dist/source_file/model/，即模型创建完成之后的默认保存路径

  • 默认蒙版素材路径：C:/Users/${用户名}/.vscode/extensions/hispark.hisparkstudio-${版本号}/dist/source_file/mask/，此路径仅供sphere模式使用，目的是使纹理与模型叠加时在连接处能够保持平滑过渡；生成的球蒙版宽高要和dst_width/dst_height一致，且球蒙版为ARGB8888。

  • 其中${用户名}为当前Windows登录账号用户名，${版本号}为本插件版本号。

参数表

滚筒日历

表 1 滚筒日历模型参数

序号

参数名

参数含义

范围&demo参数

1

dst_width

屏幕的宽

-

2

dst_height

屏幕的高

-

3

cylinder_radius

圆柱体半径

(0,cylinder_dst_width]; 230

4

cylinder_width

圆柱体宽

(0,cylinder_dst_height]; 230

5

cylinder_height

圆柱体高

(0,cylinder_dst_height]; 230

6

cylinder_x_step

模型x方向采样步长

[4 ,8];4

7

cylinder_y_step

模型y方向采样步长

[4 , 8];4

说明：

  • cylinder_x_step：逻辑约束cylinder_dst_width / cylinder_x_step

  • cylinder_y_step：逻辑约束cylinder_dst_height /cylinder_y_step 注意：对于cylinder模式的素材，建议宽为屏幕的1/2，高至少为2048。

表 2 滚筒日历demo参数

序号

参数名

参数含义

范围&demo参数

1

angle

旋转角度

[-180,180]； 0

2

v_fov

视口

[1,200]； 102.674

3

aspect_ratio

屏幕长宽比

(0,2]； 0.46

4

z_near

近平面

[-400,400]； -10

5

z_far

远平面

[-400,400]； -70

6

axis_x

三维空间的旋转轴x

[-1,1]； 1

7

axis_y

三维空间的旋转轴y

[-1,1]； 0

8

axis_z

三维空间的旋转轴z

[-1,1]； 0

9

scale_x

沿x轴缩放系数

(0,10]；1

10

scale_y

沿y轴缩放系数

(0,10]；1

11

scale_z

沿z轴缩放系数

(0,10]；1

12

translation_x

沿x轴平移系数

[-400, 400]; 0

13

translation_y

沿y轴平移系数

[-400, 400]; 0

14

translation_z

沿z轴平移系数

[-400, 400]; 0

15

look_from_x

camera位置x轴的坐标

[-400, 400]; 0

16

look_from_y

camera位置y轴的坐标

[-400, 400]; 0

17

look_from_z

camera位置z轴坐标

[-400, 400]; 0

月相星球表盘

表 3 月相星球表盘模型参数

序号

参数名

参数含义

范围& demo参数

1

dst_width

屏幕的宽

-

2

dst_height

屏幕的高

-

3

sphere_radius

球半径

(0, +∞) ；150

4

sphere_cx

球心x坐标

(0, +∞) ；dst_surface中心

5

sphere_cy

球心y坐标

(0, +∞) ；dst_surface中心

6

sphere_step_x

模型x方向采样步长

[4, 8];4；

7

sphere_step_y

模型y方向采样步长

[4, 8];4；

说明：

  • sphere_step_x：逻辑约束dst_height / sphere_step_x< 128

  • sphere_step_y：逻辑约束dst_width / sphere_step_y < 128

表 4 月相星球表盘demo参数

序号

参数名

参数含义

范围&demo值

1

sphere_angle_x

沿x旋转角度

[0,360];0

2

sphere_angle_y

沿y轴旋转角度

[0,360];0

3

sphere_angle_z

沿z轴旋转角度

[0,360];0

MESH表盘互动

表 5 MESH表盘互动模型参数

序号

参数名

参数含义

范围&demo值

1

src_width

素材的宽

建议与屏幕的宽保持一致

2

src_height

素材的高

建议与屏幕的高保持一致

3

dst_width

屏幕的宽

-

4

dst_height

屏幕的高

-

5

mesh_x_block_num

水平方向划分块数量

(0,32];32

6

mesh_y_block_num

垂直方向划分块数量

(0,32];32

7

mesh_cx

形变中心点x坐标

弱互动：mesh_dst_width / 2

强互动建议在[0,mesh_dst_width)

8

mesh_cy

形变中心点y坐标

弱互动：mesh_dst_height / 2

强互动建议在[0,mesh_dst_height)

9

mesh_len

形变程度

[0,10]；

10

mesh_thr

形变阈值

[0,10]；

11

mesh_type

mesh模型类别

支持[0,6]共7种模型，其中type=0/6为强互动模型

12

region_w

动画显示区域宽度

[0,32]

13

region_h

动画显示区域高度

[0,32]

说明：

  • mesh_x_block_num：逻辑约束mesh_dst_width / x_step < 128， 软算法性能约束不超过32。

  • mesh_y_block_num：逻辑约束mesh_dst_height / y_step < 128， 软算法性能约束不超过32。 弱互动：只转动表冠；需要载入模型。 强互动：支持触屏；不需要载入模型。

表 6 MESH表盘互动demo参数

序号

参数

解释

范围&demo值

1

mesh_ctl

连续帧控制

[0,100];

蒙版工具

蒙版制作工具支持展示/生成圆形、高斯模糊、HSV三种蒙版文件。

使用方法

运行

单击COMMANDS里面的Modeling Tools，在上方选择“Mask Tool”。

界面介绍

启动后工具主界面如图所示：

图 1 蒙版工具启动界面 蒙版工具启动界面

其中按钮功能介绍如下：

  • 模型类型：选择当前要使用的模型（高斯蒙版、圆形截图蒙版、HSV蒙版）

  • 生成蒙版：在界面左侧区域生成蒙版图片

  • 保存蒙版：保存蒙版文件。

  • 显示日志/隐藏日志：打开/关闭下方的日志框

操作步骤

  1. 选择模型类型

  2. 修改右侧控制参数（可选）

  3. 单击“生成蒙版”查看效果。

  4. 单击“保存蒙版”保存蒙版文件

素材默认路径

HSV蒙版生成需要依赖素材文件。工具已提供默认素材文件，用户可自行替换。素材文件路径和文件名如下：

C:/Users/${用户名}/.vscode/extensions/hispark.hisparkstudio-${版本号}/dist/resources/mask/mask_test/res/input/hsv_img_w454_h454.data

其中${用户名}为当前Windows登录账号用户名，${版本号}为本插件版本号。

须知： 该文件不能删除或修改文件名，否则会导致程序运行错误。

高斯蒙版路径参数生成方法

  1. 打开网址：https://www.jyshare.com/more/svgeditor/

  2. 绘制图形：目前只支持以path开头的图形。

  3. 注意：绘制图形时，需要在未选中图形时，在最右侧设置分辨率。

  4. 单击菜单栏->视图->源代码。

  5. 复制path中的“d=”之后的字符串到路径。

控制参数

路径：字符串（仅高斯蒙版模式需要）

宽度：素材width（最大640）

高度：素材height（最大600）

通道：素材channel（只支持3：RGB、4：ARGB）

注意事项

  • 只有高斯蒙版需要路径，其他两个模式下路径默认为空。

  • 圆形截图蒙版只支持正圆。

  • HSV蒙版工具目前不支持RGB格式。

GUI工程使用常见问题

起模拟器日志记录位置

在启动模拟器运行过程中的日志信息记录在当前打开的工程根目录下的“simulator_build/error.txt”文件中。可参考“Demo运行”。