高通字库
版本 V1.22 · 更新于 2024-12-26

3. 元件介绍

3.1 按钮

按钮控件属于基础的控件之一。该控件可在屏幕上绘制一个矩形的带文字的按钮,同时具备按下过程的动画效果。

可更改的样式属性:

  • 宽度高度:通过定义不同的宽度高度以实现不同大小的按钮控件;将鼠标放在按钮边缘拖动可自由调整按钮大小
  • 坐标:通过定义不同的XY值来调整控件的位置;通过键盘↑↓←→键更精细地调整坐标位置
  • 文本:灵活修改按钮上的文本内容
  • 字体:修改按钮上文本内容使用的字体(需先在字库选项卡中添加字库)
  • 字体颜色:修改按钮上文本的字体颜色
  • 背景颜色:对按钮的未按下状态以及按下状态、边框的颜色值进行修改
  • 边框宽度:可以自定义按钮边框的宽度
  • 按钮半径:修改按钮的圆角半径,使其四角呈现出更大或更小的弧度
  • 透明度:更改按钮的透明度,使其呈现完全隐藏、若隐若现等效果
  • 切换状态:添加点击btn时切换控件显示的文本,可以添加多条,按添加顺序切换,切换到最后一条时重新切换回第一条循环
  • 隐藏:可以在画布中隐藏/显示元件
  • 首行缩进:可以设置首行缩进距离

button componentbutton component button propertiesbutton properties button styledbutton styled image componentimage component image component displayimage component display

3.2 图片

图片控件属于基础的控件之一。该控件可以将一张图片绘制在屏幕上。

可更改的样式属性:

  • 图片路径:要使用图片控件,需要先导入本地的图片素材,之后在图片控件的属性栏中设置图片路径
  • 宽度高度:图片控件在设置图片路径之后会自动将宽度高度设置为原图片的宽度高度;也可通过定义数值或拖动边缘调整大小
  • 坐标:通过定义不同的XY值或键盘↑↓←→键来调整控件的位置
  • 拉伸:勾选拉伸后,设置控件的宽度和高度时原图将跟随控件大小进行拉伸收缩调整
  • 透明度:可以更改图片的透明度
  • 隐藏:可以在画布中隐藏/显示元件

button styledbutton styled image componentimage component image component displayimage component display

3.3 标签

标签控件为基础控件之一。该控件可以在屏幕上显示指定的文本内容,而其余地方保持透明。

可更改的样式属性:

  • 宽度高度:通过定义不同的宽度高度或拖动边缘实现不同大小的标签控件
  • 坐标:通过定义不同的XY值或键盘↑↓←→键来调整控件位置
  • 文本:灵活修改标签上的文本内容(超出标签控件宽度和高度部分的文字将不会显示)
  • 字体:修改标签上文本内容使用的字体(需先在字库选项卡中添加字库)
  • 字体颜色:修改标签上文本的字体颜色
  • 透明度:更改标签的透明度
  • 字体对齐:字体对齐方式有多种模式,可根据实际需求进行设置(当仿真时文字不在同一水平线上,请将对齐方式设置为居中对齐)
  • 隐藏:可以在画布中隐藏/显示元件
  • 首行缩进:可以设置首行缩进距离
  • 字体风格:可以添加文字风格,如下划线、删除线、粗体、斜体

label componentlabel component

3.4 文本区

文本区为高级控件之一。该控件可以在屏幕上绘制一块显示文本的区域。与标签控件有所区别的是,文本区的背景并不透明,并且可以更改背景的颜色。

可更改的样式属性:

  • 宽度高度:通过定义数值或拖动边缘调整文本区大小
  • 坐标:通过定义不同的XY值或键盘↑↓←→键来调整控件位置
  • 文本:可以将文本设定为多段文本,设定不同颜色风格
  • 字体:修改文本区上文本内容使用的字体
  • 字体颜色:修改文本区上文本的字体颜色
  • 背景颜色:修改文本区除了文本的其他区域的背景颜色
  • 透明度:更改文本区的透明度
  • 字体对齐:字体对齐方式有多种模式
  • 隐藏:可以在画布中隐藏/显示元件
  • 首行缩进:可以设置首行缩进距离

textarea componenttextarea component input componentinput component

3.5 输入框

输入框控件为高级控件之一。该控件也是主要以显示文本为主要功能的控件,区别于文本区以及标签控件的是,该控件具有占位符、提示输入内容,以及可以添加和删除文本的功能。同时该控件背景不透明,可以修改背景颜色。

可更改的样式属性:

  • 宽度高度:通过定义数值或拖动边缘调整输入框大小
  • 坐标:通过定义不同的XY值或键盘↑↓←→键来调整控件位置
  • 文本:灵活修改输入框上的文本内容
  • 占位符:灵活修改提示输入的内容
  • 边框宽度:任意修改输入框的边框大小
  • 字体:修改输入框上文本内容使用的字体
  • 字体颜色:修改输入框上文本的字体颜色
  • 背景颜色:修改输入框除了文本的其他区域的背景颜色
  • 透明度:更改输入框的透明度
  • 隐藏:可以在画布中隐藏/显示元件
  • 字体风格:可以添加文字风格,如下划线、删除线、粗体、斜体

textarea componenttextarea component input componentinput component input component displayinput component display image button componentimage button component image button pressedimage button pressed


视频教程