自动化助手

    综合案例

    • 更新时间:2026-03-02 22:18:54

    Xml代码

    <界面>
    <状态条 />
    <!--使用锚点布局配合滚动布局可以使应用条自带动画-->
    <锚点布局 宽="最大">
        <!--应用标题栏-->
        <应用条布局 宽="最大">
            <!--
            返回:开启返回按钮
            滑动标识:配置滚动布局滚动时的动画标记
            -->
            <应用条 副标题="多选框" 宽="最大" 标识="mAppbar" 标题="Check"
                滑动标识="滑动|进入时总是可见" 返回="是" />
        </应用条布局>
        <!--滑动布局 在锚点布局中可以配置控件行为是:适配应用条-->
        <滑动布局 宽="最大" 行为="应用条" 高="最大">
            <!--线性布局:被滑动布局包裹，子控件较多时允许向下滑动-->
            <!--内边距:增加内边距[左,上,右,下]-->
            <线性布局 内边距="20,20,20,100" 宽="最大" 高="最大">
                <!--概览-->
                <文本 可选择="是" 文本="概览" 重力="中间" 高="50" />
                <线性布局 宽="最大" 方向="横向">
                    <多选框 主题颜色="#518855" 文本="吃饭" 选中="是" />
                    <多选框 主题颜色="#C94F4F" 文本="睡觉" 选中="是" />
                    <多选框 主题颜色="#3471E9" 文本="游戏" 选中="是" />
                    <多选框 主题颜色="#C435FF" 文本="游泳" 选中="是" />
                </线性布局>
                <!--基础用法-->
                <文本 可选择="是" 文本="基础用法 监听选中事件" 重力="中间" 高="50" />
                <多选框 id="选中" 宽="最大" 文本="请勾选我" />
                <!--设置文本-->
                <文本 可选择="是" 文本="设置文本 text=文本" 重力="中间" 高="50" />
                <多选框 文本="我是文本" />
                <!--设置选中状态-->
                <文本 可选择="是" 文本="设置选中状态 选中=是" 重力="中间" 高="50" />
                <多选框 文本="选中状态" 选中="是" />
                <多选框 文本="未选中状态" 选中="否" />
                <!--设置主题颜色-->
                <文本 可选择="是" 文本="设置主题颜色 主题颜色=颜色" 重力="中间" 高="50" />
                <线性布局 宽="最大" 方向="横向">
                    <多选框 主题颜色="#518855" 文本="吃饭" 选中="是" />
                    <多选框 主题颜色="#C94F4F" 文本="睡觉" 选中="是" />
                    <多选框 主题颜色="#3471E9" 文本="游戏" 选中="是" />
                </线性布局>
                <!--设置按钮颜色-->
                <文本 可选择="是" 文本="设置按钮颜色 按钮颜色=颜色" 重力="中间" 高="50" />
                <线性布局 宽="最大" 方向="横向">
                    <多选框 按钮颜色="#518855" 文本="吃饭" 选中="是" />
                    <多选框 按钮颜色="#C94F4F" 文本="睡觉" 选中="是" />
                    <多选框 按钮颜色="#3471E9" 文本="游戏" 选中="是" />
                </线性布局>
                <!--设置文本颜色-->
                <文本 可选择="是" 文本="设置文本颜色 文本颜色=颜色" 重力="中间" 高="50" />
                <线性布局 宽="最大" 方向="横向">
                    <多选框 文本="吃饭" 文本颜色="#518855" 选中="是" />
                    <多选框 文本="睡觉" 文本颜色="#C94F4F" 选中="是" />
                    <多选框 文本="游戏" 文本颜色="#3471E9" 选中="是" />
                </线性布局>
                <!--设置最小宽度-->
                <文本 可选择="是" 文本="设置最小宽度 最小宽度=100" 重力="中间" 高="50" />
                <线性布局 宽="最大" 方向="竖向" 背景颜色="#55808080">
                    <多选框 文本="吃饭" 最小宽度="100" 背景颜色="#518855" 选中="是" />
                    <多选框 文本="睡觉" 最小宽度="120" 背景颜色="#C94F4F" 选中="是" />
                    <多选框 文本="游戏" 最小宽度="150" 背景颜色="#3471E9" 选中="是" />
                </线性布局>
                <!--设置最小高度-->
                <文本 可选择="是" 文本="设置最小高度 最小高度=100" 重力="中间" 高="50" />
                <线性布局 宽="最大" 方向="横向" 背景颜色="#55808080" 重力="中间|下">
                    <多选框 文本="吃饭" 最小高度="100" 背景颜色="#518855" 选中="是" 重力="下" />
                    <多选框 文本="睡觉" 最小高度="120" 背景颜色="#C94F4F" 选中="是" 重力="下" />
                    <多选框 文本="游戏" 最小高度="150" 背景颜色="#3471E9" 选中="是" 重力="下" />
                </线性布局>
                <!--设置内边距-->
                <文本 可选择="是" 文本="设置内边距 内边距=10" 重力="中间" 高="50" />
                <线性布局 宽="最大" 方向="横向" 背景颜色="#55808080">
                    <多选框 内边距="10" 文本="吃饭" 背景颜色="#518855" 选中="是" />
                    <多选框 内边距="20" 文本="睡觉" 背景颜色="#C94F4F" 选中="是" />
                    <多选框 内边距="40" 文本="游戏" 背景颜色="#3471E9" 选中="是" />
                </线性布局>
                <!--设置重力-->
                <文本 可选择="是" 文本="设置重力 重力=重力" 重力="中间" 高="50" />
                <多选框 宽="最大" 文本="吃饭" 选中="是" 重力="开始" />
                <多选框 宽="最大" 文本="睡觉" 选中="是" 重力="中间" />
                <多选框 宽="最大" 文本="游戏" 选中="是" 重力="结束" />
                <!--设置背景颜色-->
                <文本 可选择="是" 文本="设置背景颜色 背景颜色=颜色" 重力="中间" 高="50" />
                <线性布局 宽="最大" 方向="横向" 背景颜色="#55808080">
                    <多选框 文本="吃饭" 背景颜色="#518855" 选中="是" />
                    <多选框 文本="睡觉" 背景颜色="#C94F4F" 选中="是" />
                    <多选框 文本="游戏" 背景颜色="#3471E9" 选中="是" />
                </线性布局>
                <!--设置背景图片-->
                <文本 可选择="是" 文本="设置背景图片 背景图片=图片" 重力="中间" 高="50" />
                <多选框 外边距="3" 宽="最大" 文本="吃饭" 文本颜色="bg"
                    背景图片="example/$ui - 交互界面/03.check-复选框/img/bg01.png" 选中="是" />
                <多选框 外边距="3" 宽="最大" 文本="游戏" 文本颜色="bg"
                    背景图片="example/$ui - 交互界面/03.check-复选框/img/bg02.png" 选中="是" />
                <多选框 外边距="3" 宽="最大" 文本="睡觉" 文本颜色="bg"
                    背景图片="example/$ui - 交互界面/03.check-复选框/img/bg03.png" 选中="是" />
            </线性布局>
        </滑动布局>
    </锚点布局>
</界面>

    JS代码

    let ui = $ui.layout("example/$ui - 交互界面/02.button-按钮/button.xml");
//绑定标题栏返回按钮
ui.id("appbar").back(()=>{
    ui.finish();
});
//找到多选按钮并且设置监听事件
ui.id("check").onCheck((isChecked)=>{
    if(isChecked){
        toast("我被选中了");
    }else{
        toast("我被取消了");
    }
});
//显示界面
ui.show();