综合案例

  • 更新时间:2026-03-02 22:19:31

Xml代码

<界面>
    <状态条 />
    <!--使用锚点布局配合滚动布局可以使应用条自带动画-->
    <锚点布局="最大">
        <!--应用标题栏-->
        <应用条布局="最大">
            <!--
            返回:开启返回按钮
            滑动标识:配置滚动布局滚动时的动画标记
            -->
            <应用条 副标题="加载"="最大" 标识="mAppbar" 标题="Load" 滑动标识="scroll|enterAlways"
                返回="是" />
        </应用条布局>
        <!--滑动布局 在锚点布局中可以配置控件行为是:适配应用条-->
        <滑动布局="最大" 行为="应用条"="最大">
            <!--线性布局:被滑动布局包裹,子控件较多时允许向下滑动-->
            <!--内边距:增加内边距[左,上,右,下]-->
            <线性布局 内边距="20,20,20,100"="最大"="最大">
                <!--概览-->
                <文本 可选择="是" 文本="概览" 重力="中间"="50" />
                <加载 />
                <!--设置主题颜色-->
                <文本 可选择="是" 文本="设置主题颜色 颜色=颜色" 重力="中间"="50" />
                <线性布局="最大" 方向="横向">
                    <加载 右外边距="15" 颜色="#57965C" />
                    <加载 右外边距="15" 颜色="#3574F0" />
                    <加载 颜色="#C94F4F" />
                </线性布局>
                <!--设置颜色组合-->
                <文本 可选择="是" 文本="设置颜色组合 颜色组=颜色1,颜色2..." 重力="中间"="50" />
                <加载 颜色组="#57965C,#3574F0,#C94F4F,#FFC31F,#F501F5" />
                <!--设置尺寸-->
                <文本 可选择="是" 文本="设置尺寸 尺寸=尺寸" 重力="中间"="50" />
                <线性布局="最大" 方向="横向">
                    <加载 右外边距="15" 尺寸="20" />
                    <加载 右外边距="15" 尺寸="25" />
                    <加载 尺寸="30" />
                </线性布局>
                <!--设置显示于隐藏-->
                <文本 可选择="是" 文本="设置显示于隐藏 显示=是、否" 重力="中间"="50" />
                <线性布局="最大" 方向="横向">
                    <加载 右外边距="15" 显示="是" 颜色="#57965C" />
                    <!--第二个加载器被隐藏了,所以实际上只能看到两个加载器-->
                    <加载 右外边距="15" 显示="false" 颜色="#3574F0" />
                    <加载 颜色="#C94F4F" />
                </线性布局>
                <文本 可选择="是" 文本="第二个(蓝色的)加载器被隐藏了,所以实际上只能看到两个加载器" 重力="中间"
="50" />
            </线性布局>
        </滑动布局>
    </锚点布局>
</界面>

JS代码

let ui = $ui.layout("example/$ui - 交互界面/11.load-加载/load.xml");
//获取控件
let mLoad = ui.id("mLoad");
let mButton = ui.id("mButton");
//绑定点击事件
mButton.click(()=>{
    //显示加载器
    mLoad.show();
    //加载中
    sleep(3000);
    //加载完毕:隐藏加载器
    mLoad.hide();
    toast("加载完毕");
});