Skip to content

进度条(ProgressBar)

进度条是一种常用的用户界面元素,用于显示任务完成进度或操作进度。它通常由一个进度条和一个表示进度的指示器组成。 进度条可以用于工程中显示任务进度、操作进度或加载进度等。

1、进度条组件

typescript
const progressbar = new LM.ProgressBar()
// 设置颜色类型  0是图片类型,1是颜色类型
progressbar.sourceType = 1
// 设置位置
progressbar.x = 100
progressbar.y = 100
// 设置尺寸
progressbar.w = 200
progressbar.h = 40
// 设置最大进度
progressbar.max = 100
// 设置当前进度
progressbar.current = 30
// 设置方向
progressbar.direction = 0
// 设置进度颜色
progressbar.progress = "#00FF00"
// 设置背景颜色
progressbar.background = "#FF0000"
// 设置进度条的边框(px)
progressbar.progress_padding = 3

2、常用属性

属性解释默认值
xx数值0
yy数值0
z图层高度,越高越靠上层数值0
width宽,图片超出范围会显示不完整数值,不填为自适应
height高,图片超出范围会显示不完整数值,不填为自适应
sourceType资源类型0:为图片 1:颜色
background下层资源 图片链接或者颜色字符串
progress上层资源 图片链接或者颜色字符串
current当前值数值
max最大值数值100
direction方向进度方向 0-3 对应左右上下
backgroundColor背景色字符串,填色号如红色“#FF0000”
visible是否可见布尔值,true可见,false不可见true
alpha不透明度数值,0~255,255表示完全不透明255
touchEnabled是否可点击布尔值,true可点击,false不可点击true
alphaHitUnable透明区域是否可点击布尔值,true可点击,false不可点击true
isPenetrable是否可以穿透(点击到下层组件)布尔值,true可穿透,false不可穿透true
scaleX宽缩放率数值,1为原始的宽1
scaleY高缩放率数值,1为原始的高1
zoomCenterX缩放中心x(相对于自身)数值,0.5为组件X轴中点0
zoomCenterY缩放中心y(相对于自身)数值,0.5为组件Y轴中点0

其他属性见文档

3、常用方法

(1)onClick

点击行为

(2)onTouchDown

按下行为

(3)onTouchUp

抬起行为

(4)onTouchMove

鼠标在组件区域内移动(可用作悬浮)

(5)onTouchCancel

鼠标移出组件区域(可用作离开悬浮)

typescript
let progressBar = new LM.ProgerssBar()
// 注册了点击事件
progressBar.onClick(()=>{console.log("点击了控件")})
// 注册了按下事件
progressBar.onTouchDown(()=>{console.log("按下")})
// 注册了抬起事件
progressBar.onTouchUp(()=>{console.log("抬起")})
// 注册了移动事件
progressBar.onTouchMove(()=>{console.log("移动了")})
// 注册了移出事件
progressBar.onTouchCancel(()=>{console.log("移出")})