Edit online

控件使用

本节提供了典型控件的使用示例,供用户参考。

按钮

按钮(Button)控件是一个简单的类似矩形的控件,当点击按钮的时候,按钮会自动切换到点击状态。

  • 设置文本为:Hello,按钮默认是蓝色

  • 添加标记 Checkable,并设置 Checked 状态时的颜色

  • 当点击一次 Button 按钮的时候,按钮切换成 Checked 状态,当再次点击按钮的时候,按钮切换回初始状态。


button_set

1. 按钮当前设置

button_check

2. 按钮 checked 状态设置 2

button_check1

3. 按钮 checked 状态设置 2

标签

标签是最基本的文本显示控件。

  • 设置文本的颜色,字号
  • 选择字体,可以先通过 资源 > 字体,添加需要的矢量字体图

label_set

4. 标签设置

图片按钮

图片按钮和按钮很类似,不一样的地方是用户可以用自定义的图片来取代颜色填充。
  • 设置按键释放时的图片为:btn_blue.png

  • 设置按键按下时的图片为:btn_dark.png


btn_img

5. 图片按钮设置

图片

  • image 控件支持从外部存储获取图片

  • 支持对图片大小进行设置,设置的大小和原图的大小不一致的时候,UIBuilder 会对图片进行转换

  • 当需要保持原图的大小的时候,可以点击属性框中图片路径后的 1:1 ,恢复原图的大小


img_set

6. 图片控件设置

进度条

进度条有两部分组成:主体(main)和指示器(indicator)
  • 主体设置为蓝色,并且透明度设置为 129
  • 指示器设置为红色

bar_main

7. 进度条主体设置

bar_indic

8. 进度条指示器设置

容器

容器控件可以包含子控件,当拖动控件到容器控件内部后,会自动作为容器控件的子控件
  • 新创建一个容器控件

  • 拖动其他控件到容器控件

  • 可以从 布局 树形结构中看到新添加的两个控件都已经做为了容器控件 container_1 的子控件


    container

    9. 容器控件使用

容器控件使用技巧:

  • 可以直接用鼠标拖动 布局 树形结构中的控件,改变控件在树形结构的位置, 当拖动 button_1 控件到 label_1button_2 之间并出现白色横线的时候, 就可以松开鼠标,完成位置的改变


    container_use

    10. 鼠标拖动改变控件树形结构
  • 可以把容器的背景设置为全透明,不让容器显示出来,容器只用来对子对象的统一管理

    container_no_opa

    11. 鼠标拖动改变控件树形结构

平铺视图

平铺视图控件可以自定义增加多个视图界面,在不同界面进行不同操作并自由切换,起始行列号为零,同一时间只显示一个视图,当拖动控件到平铺视图内部后,会自动作为该控件的子控件。

使用示例:

  • 在右侧属性栏设置两行两列四个视图

  • 将按钮控件添加进第零行零列视图

  • 运行时通过拖动屏幕切换视图


    tileview_create

    12. 平铺视图控件创建

tileview_handler

13. 操作视图

drag_screen

14. 拖动屏幕

窗口

窗口控件可自定义窗口名称,内置多个带有图标的按钮,可添加至窗口工具栏并为每一个按钮设置相应的事件处理,当拖动控件到窗口内部后,会自动作为该控件的子控件。

使用示例:

  • 创建三个不同的按钮(BATTERY,WiFi,CLOSE)

  • 为窗口按钮设置事件处理


    windows_create

    15. 窗口控件创建

  • windows_set

    16. 设置事件

滚轮

  • 创建六个选项

  • 设置显示行数为 5 行,显示模式为 infinite


    roller_create

    17. 滚轮控件创建

二维码

  • 设置暗色为黑色,亮色为白色,尺寸为两百

  • 设置文本数据为 ArtInChip


    qrcode_reate

    18. 二维码控件创建