综合案例

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

Xml代码

<界面>
    <状态条 />
    <!--使用锚点布局配合滚动布局可以使应用条自带动画-->
    <锚点布局="最大">
        <!--应用标题栏-->
        <应用条布局="最大">
            <!--
            返回:开启返回按钮
            滑动标识:配置滚动布局滚动时的动画标记
            -->
            <应用条 副标题="按钮"="最大" 标识="mAppbar" 标题="Button"
                滑动标识="滑动|进入时总是可见" 返回="true" />
        </应用条布局>
        <!--滑动布局 在锚点布局中可以配置控件行为是:适配应用条-->
        <滑动布局="最大" 行为="应用条"="最大">
            <!--线性布局:被滑动布局包裹,子控件较多时允许向下滑动-->
            <!--内边距:增加内边距[左,上,右,下]-->
            <线性布局 内边距="20,20,20,100"="最大"="最大">
                <!--按钮概览-->
                <文本 可选择="是" 文本="按钮概览" 重力="中间"="50" />
                <线性布局="最大" 方向="横向">
                    <按钮 文本="按钮" />
                    <按钮 文本="按钮" 风格="轮廓" />
                    <按钮 文本="按钮" 风格="色调" />
                    <按钮 文本="按钮" 风格="文本" />
                </线性布局>
                <线性布局="最大" 方向="横向">
                    <按钮 主题颜色="#518855" 文本="按钮" />
                    <!--
                    文本颜色="bg" 使用背景颜色作为文本颜色(使文字颜色随主题动态变化)
                    -->
                    <按钮 主题颜色="#C94F4F" 文本="按钮" 文本颜色="背景" />
                    <按钮 主题颜色="#3471E9" 文本="按钮" 文本颜色="背景" 风格="色调" />
                    <按钮 主题颜色="#C435FF" 文本="按钮" 文本颜色="背景" 风格="文本" />
                </线性布局>
                <线性布局="最大" 方向="横向">
                    <按钮 图标="ic_delete_fill" 图标颜色="文本" 文本="删除" 风格="文本" />
                    <按钮 图标="ic_home_fill" 图标颜色="文本" 文本="主页" 风格="文本" />
                    <按钮 图标="ic_menu_fill" 图标颜色="文本" 文本="菜单" 风格="文本" />
                </线性布局>
                <!--基础用法-->
                <文本 可选择="是" 文本="基础用法 设置点击事件" 重力="中间"="50" />
                <按钮="最大" 文本="请点击我" 标识="button" />
                <!--设置样式-->
                <文本 可选择="是" 文本="设置样式 风格=文本|轮廓|图标|色调" 重力="中间"="50" />
                <按钮="最大" 文本="默认样式" />
                <按钮="最大" 文本="图标样式" 风格="图标" />
                <按钮="最大" 文本="文本样式" 风格="文本" />
                <按钮="最大" 文本="边框样式" 风格="轮廓" />
                <按钮="最大" 文本="色调样式" 风格="色调" />
                <!--设置主题颜色-->
                <文本 可选择="是" 文本="设置主题颜色 主题颜色=颜色" 重力="中间"="50" />
                <按钮 主题颜色="#57965C"="最大" 文本="绿色主题颜色" />
                <按钮 主题颜色="#C94F4F"="最大" 文本="红色主题颜色" />
                <按钮 主题颜色="#3574F0"="最大" 文本="蓝色主题颜色" />
                <!--设置文本-->
                <文本 可选择="是" 文本="设置文本 文本=我是文本" 重力="中间"="50" />
                <按钮="最大" 文本="我是文本" 风格="轮廓" />
                <!--设置文本字体-->
                <文本 可选择="是" 文本="设置文本字体 字体=字体" 重力="中间"="50" />
                <按钮 字体="斜体"="最大" 文本="斜体文本" 风格="轮廓" />
                <按钮 字体="粗体"="最大" 文本="粗体文本" 风格="轮廓" />
                <按钮 字体="粗体斜体"="最大" 文本="粗体斜体文本" 风格="轮廓" />
                <!--设置字体颜色-->
                <文本 可选择="是" 文本="设置字体颜色 文本颜色=颜色" 重力="中间"="50" />
                <按钮="最大" 文本="绿色字体颜色" 文本颜色="#57965C" 风格="轮廓" />
                <按钮="最大" 文本="红色字体颜色" 文本颜色="#C94F4F" 风格="轮廓" />
                <按钮="最大" 文本="蓝色字体颜色" 文本颜色="#3574F0" 风格="轮廓" />
                <!--设置涟漪颜色-->
                <文本 可选择="是" 文本="设置涟漪颜色 涟漪颜色=颜色" 重力="中间"="50" />
                <按钮="最大" 文本="绿色涟漪颜色" 涟漪颜色="#57965C" 风格="轮廓" />
                <按钮="最大" 文本="红色涟漪颜色" 涟漪颜色="#C94F4F" 风格="轮廓" />
                <按钮="最大" 文本="蓝色涟漪颜色" 涟漪颜色="#3574F0" 风格="轮廓" />
                <!--设置圆角弧度-->
                <文本 可选择="是" 文本="设置圆角弧度 弧度=弧度" 重力="中间"="50" />
                <按钮="最大" 弧度="5" 文本="弧度:5" 风格="轮廓" />
                <按钮="最大" 弧度="10" 文本="弧度:10" 风格="轮廓" />
                <按钮="最大" 弧度="15" 文本="弧度:15" 风格="轮廓" />
                <!--设置文本尺寸-->
                <文本 可选择="是" 文本="设置文本尺寸 文本尺寸=尺寸" 重力="中间"="50" />
                <按钮="最大" 文本="文本尺寸:10" 文本尺寸="10" 风格="轮廓" />
                <按钮="最大" 文本="文本尺寸:13" 文本尺寸="13" 风格="轮廓" />
                <按钮="最大" 文本="文本尺寸:16" 文本尺寸="16" 风格="轮廓" />
                <!--设置图标-->
                <文本 可选择="是" 文本="设置图标 图标=图标" 重力="中间"="50" />
                <按钮 图标="ic_settings_fill"="最大" 文本="设置图标" />
                <!--设置图标颜色-->
                <文本 可选择="是" 文本="设置图标颜色 图标颜色=颜色" 重力="中间"="50" />
                <按钮 图标="ic_settings_fill" 图标颜色="#C94F4F"="最大" 文本="设置图标颜色" />
                <!--设置图标尺寸-->
                <文本 可选择="是" 文本="设置图标尺寸 图标尺寸=尺寸" 重力="中间"="50" />
                <按钮 图标="ic_settings_fill" 图标尺寸="18"="最大" 文本="设置图标尺寸:10" />
                <按钮 图标="ic_settings_fill" 图标尺寸="20"="最大" 文本="设置图标尺寸:20" />
                <按钮 图标="ic_settings_fill" 图标尺寸="30"="最大" 文本="设置图标尺寸:30" />
                <!--设置图标重力-->
                <文本 可选择="是" 文本="设置图标重力 图标重力=开始|结束|上" 重力="中间"="50" />
                <按钮 图标="ic_settings_fill" 图标重力="开始"="最大" 文本="设置图标重力:开始" />
                <按钮 图标="ic_settings_fill" 图标重力="结束"="最大" 文本="设置图标重力:结束" />
                <按钮 h="70" 图标="ic_settings_fill" 图标重力="上"="最大"
                    文本="设置图标重力:上方" />
                <!--设置图标内边距-->
                <文本 可选择="是" 文本="设置图标内边距 图标内边距=尺寸" 重力="中间"="50" />
                <按钮 图标="ic_settings_fill" 图标内边距="20"="最大" 文本="设置图标内边距:20"
                    重力="开始|中间" />
                <按钮 图标="ic_settings_fill" 图标内边距="30"="最大" 文本="设置图标内边距:30"
                    重力="开始|中间" />
                <按钮 图标="ic_settings_fill" 图标内边距="40"="最大" 文本="设置图标内边距:40"
                    重力="开始|中间" />
                <!--设置最小宽度-->
                <文本 可选择="是" 文本="设置最小宽度 最小宽度=尺寸" 重力="中间"="50" />
                <按钮 文本="最小宽度:180" 最小宽度="180" />
                <按钮 文本="最小宽度:200" 最小宽度="200" />
                <按钮 文本="最小宽度:220" 最小宽度="220" />
                <!--设置最小高度-->
                <文本 可选择="是" 文本="设置最小高度 最小高度=尺寸" 重力="中间"="50" />
                <按钮="最大" 文本="最小高度:50" 最小高度="50" />
                <按钮="最大" 文本="最小高度:60" 最小高度="60" />
                <按钮="最大" 文本="最小高度:70" 最小高度="70" />
                <!--设置内边距-->
                <文本 可选择="是" 文本="设置内边距 内边距=左,上,右,下" 重力="中间"="50" />
                <按钮 内边距="10"="最大" 文本="内边距:10" />
                <按钮 内边距="20,10"="最大" 文本="内边距:20,10" />
                <按钮 内边距="10,10,10,20"="最大" 文本="内边距:10,10,10,20" />
                <!--设置重力-->
                <文本 可选择="是" 文本="设置重力 重力=重力" 重力="中间"="50" />
                <按钮="最大" 文本="左上角" 最小高度="80" 重力="开始" />
                <按钮="最大" 文本="右下角" 最小高度="80" 重力="结束|下" />
                <按钮="最大" 文本="设置重力:中间" 最小高度="80" 重力="中间" />
                <!--设置背景颜色-->
                <文本 可选择="是" 文本="设置背景颜色 背景颜色=颜色" 重力="中间"="50" />
                <按钮="最大" 文本="绿色背景" 背景颜色="#57965C" />
                <按钮="最大" 文本="红色背景" 背景颜色="#C94F4F" />
                <按钮="最大" 文本="蓝色背景" 背景颜色="#3574F0" />
                <!--设置背景图片-->
                <文本 可选择="是" 文本="设置背景颜色 背景图片=图片" 重力="中间"="50" />
                <按钮="最大" 文本="我是按钮"
                    背景图片="example/$ui - 交互界面/02.button-按钮/img/button_bg.png" />
            </线性布局>
        </滑动布局>
    </锚点布局>
</界面>

JS代码

let ui = $ui.layout("example/$ui - 交互界面/02.button-按钮/button.xml");
//绑定标题栏返回按钮
ui.id("appbar").back(()=>{
    ui.finish();
});
//找到按钮并且设置点击事件
ui.id("button").click(()=>{
    toast("我被点击了");
});
//显示界面
ui.show();