进度条

  • 更新时间:2025-12-02 10:12:47

进度条-progress

圆形原生类型:{com.google.android.material.progressindicator.CircularProgressIndicator} 线性原生类型:{com.google.android.material.progressindicator.LinearProgressIndicator}

进度条:比如下载进度,游戏进度,进度条就是用来显示进度的控件

<ui>
    <statusbar />
    <linear w="max" padding="10">
        <linear w="max" dir="h">
            <progress w="max" padding="10" run="true" />
            <progress w="max" color="#518855" padding="10" run="true" />
            <progress w="max" color="#B44A4A" padding="10" run="true" />
        </linear>
        <progress w="max" style="line" run="true" padding="10" />
        <progress w="max" style="line" color="#518855" padding="10" run="true" />
        <progress w="max" style="line" color="#B44A4A" padding="10" run="true" />
    </linear>
</ui>

一、基础用法

<ui>
    <statusbar />
    <linear w="max" padding="10">
        <!-- 指定进度条的id -->
        <progress id="circularProgress" w="max"/>
        <progress id="lineProgress" w="max" style="line"/>
    </linear>
</ui>
//解析布局
let ui = $ui.layout("ui.xml");
ui.show();//显示界面
//获取圆形/线性进度条
let cp = ui.id("circularProgress");
let lp = ui.id("lineProgress");
//动态模拟进度条的走动
for (let i = 1; i <= 10; i++) {
    sleep(150);
    //[核心]:设置进度
    cp.setProgress(i * 10);
    lp.setProgress(i * 10);
}

二、常用属性

visible - 可见性

设置可见性

<progress visible="false" />

style - 样式

设置样式

<ui>
    <statusbar />
    <linear w="max" padding="10">
        <!-- 默认样式 -->
        <progress w="max" />
        <!-- 直线样式 -->
        <progress w="max" style="line" />
    </linear>
</ui>

thickness - 厚度

设置厚度

<ui>
    <statusbar />
    <linear w="max" padding="10">
        <!-- 设置厚度 thickness="10" -->
        <progress w="max" thickness="10" />
        <progress w="max" style="line" thickness="10" />
    </linear>
</ui>

run - 动画

设置动画

<ui>
    <statusbar />
    <linear w="max" padding="10">
        <!-- 默认样式 -->
        <progress w="max" run="true"/>
        <!-- 直线样式 -->
        <progress w="max" style="line" run="true"/>
    </linear>
</ui>

color - 颜色

设置颜色

<ui>
    <statusbar />
    <linear w="max" padding="10">
        <!-- 设置颜色 color="#518855" -->
        <progress w="max" color="#518855" />
        <progress w="max" style="line" color="#B44A4A" />
    </linear>
</ui>

minW - 最小宽度

设置最小宽度

<progress minW="100" />

minH - 最小高度

设置最小高度

<progress minH="100" />

padding - 内边距

设置内边距

<ui>
    <statusbar />
    <linear w="max" padding="10">
        <!-- 设置内边距 padding="20" -->
        <progress padding="20" />
        <progress style="line" padding="35" />
    </linear>
</ui>

bg - 背景颜色

设置背景颜色

<ui>
    <statusbar />
    <linear w="max" padding="10">
        <!-- 设置背景颜色 -->
        <progress w="max" padding="10" bg="#518855"/>
        <progress w="max" style="line" bg="#B44A4A" padding="10" />
    </linear>
</ui>

bgImg - 背景图片

设置背景图片

<ui>
    <statusbar />
    <linear w="max" padding="10">
        <!-- 设置背景图片 bgImg="/res/bg_pg.png" -->
        <progress w="max" padding="10" bgImg="/res/bg_pg.png" />
        <!-- 设置背景图片 bgImg="/res/bg_pgLine.png" -->
        <progress w="max" style="line" padding="10" bgImg="/res/bg_pgLine.png" />
    </linear>
</ui>

三、常用函数

setProgress(progress)

设置进度

此方法需要安卓7.0以上生效

  • 参数 : progress {int} 进度值

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let progress = ui.id("mProgress");
//设置进度
progress.setProgress(50);

setMax(progress)

设置最大进度

  • 参数 : progress {int} 最大值

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let progress = ui.id("mProgress");
//设置最大进度
progress.setMax(100);

getProgress()

获得进度

  • 返回 : {int} 进度

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let progress = ui.id("mProgress");
//获得进度
let p = progress.getProgress();

show()

显示进度条

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let progress = ui.id("mProgress");
//显示进度条
progress.show();

hide()

隐藏进度条

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let progress = ui.id("mProgress");
//隐藏进度条
progress.hide();