自动化助手

    综合案例

    • 更新时间:2026-03-06 18:16:28

    Xml代码

    <界面>
    <状态条 />
    <!--使用锚点布局配合滚动布局可以使应用条自带动画-->
    <锚点布局 宽="最大">
        <!--应用标题栏-->
        <应用条布局 宽="最大">
            <!--
            返回:开启返回按钮
            滑动标识:配置滚动布局滚动时的动画标记
            -->
            <应用条 副标题="范围条" 宽="最大" 标识="mAppbar" 标题="Range"
                滑动标识="滑动|进入时总是可见" 返回="是" />
        </应用条布局>
        <!--滑动布局 在锚点布局中可以配置控件行为是:适配应用条-->
        <滑动布局 宽="最大" 行为="应用条" 高="最大">
            <!--线性布局:被滑动布局包裹，子控件较多时允许向下滑动-->
            <!--内边距:增加内边距[左,上,右,下]-->
            <线性布局 内边距="20,20,20,100" 宽="最大" 高="最大">
                <!--设置开始值-->
                <文本 可选择="是" 文本="设置开始值 开始值=数字" 重力="中间" 高="50" />
                <范围 宽="最大" 开始值="0" 结束值="100" />
                <!--设置开始值-->
                <文本 可选择="是" 文本="设置开始值 左初始值=数字" 重力="中间" 高="50" />
                <范围 宽="最大" 左初始值="10" 开始值="0" 结束值="100" />
                <范围 宽="最大" 左初始值="20" 开始值="0" 结束值="100" />
                <!--设置结束值-->
                <文本 可选择="是" 文本="设置结束值 右初始值=数字" 重力="中间" 高="50" />
                <范围 右初始值="50" 宽="最大" 左初始值="10" 开始值="0" 结束值="100" />
                <范围 右初始值="50" 宽="最大" 左初始值="20" 开始值="0" 结束值="100" />
                <!--设置进步值-->
                <文本 可选择="是" 文本="设置进步值 进步值=数字" 重力="中间" 高="50" />
                <范围 右初始值="50" 宽="最大" 左初始值="10" 开始值="0" 结束值="100" 进步值="1" />
                <!--设置主题颜色-->
                <文本 可选择="是" 文本="设置主题颜色 主题颜色=颜色" 重力="中间" 高="50" />
                <范围 主题颜色="#57965C" 右初始值="50" 宽="最大" 左初始值="10" 开始值="0"
                    结束值="100" />
                <范围 主题颜色="#C94F4F" 右初始值="50" 宽="最大" 左初始值="10" 开始值="0"
                    结束值="100" />
                <范围 主题颜色="#3574F0" 右初始值="50" 宽="最大" 左初始值="10" 开始值="0"
                    结束值="100" />
                <!--设置标签文字-->
                <文本 可选择="是" 文本="设置标签文字 标签=文本" 重力="中间" 高="50" />
                <范围 宽="最大" 标签="比例:" />
                <!--设置标签后缀-->
                <文本 可选择="是" 文本="设置标签后缀 标签尾部=文本" 重力="中间" 高="50" />
                <范围 宽="最大" 标签尾部="%" />
                <!--设置背景颜色-->
                <文本 可选择="是" 文本="设置背景颜色 背景颜色=颜色" 重力="中间" 高="50" />
                <范围 宽="最大" 背景颜色="#57965C" />
                <范围 宽="最大" 背景颜色="#C94F4F" />
                <范围 宽="最大" 背景颜色="#3574F0" />
                <!--设置背景图片-->
                <文本 可选择="是" 文本="设置背景图片 背景图片=图片路径" 重力="中间" 高="50" />
                <范围 宽="最大" 背景图片="example/$ui - 交互界面/19.range-范围条/img/img.png" />
            </线性布局>
        </滑动布局>
    </锚点布局>
</界面>

    JS代码

    let ui = $ui.layout("example/$ui - 交互界面/10.input-输入框/input.xml");
//绑定标题栏返回按钮
ui.id("mAppbar").back(()=>{
    ui.finish();
});
//先获取控件
let mButton = ui.id("mButton");
let mInput = ui.id("mInput");
//找到按钮、点击按钮的时候就显示输入框的内容
mButton.click(()=>{
    //获取输入框的内容
    let content = mInput.getText();
    //显示输入框的内容
    mButton.snack("内容:"+content);
});
//显示界面
ui.show();