Appearance
进度条(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 = 32、常用属性
| 属性 | 解释 | 值 | 默认值 |
|---|---|---|---|
| x | x | 数值 | 0 |
| y | y | 数值 | 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("移出")})