综合案例

  • 更新时间:2026-03-03 11:24:42

Xml代码

<界面>
    <状态条 />
    <!--使用锚点布局配合滚动布局可以使应用条自带动画-->
    <锚点布局="最大">
        <!--应用标题栏-->
        <应用条布局="最大">
            <!--
            返回:开启返回按钮
            滑动标识:配置滚动布局滚动时的动画标记
            -->
            <应用条 副标题="悬浮按钮"="最大" 标识="mAppbar" 标题="Fab"
                滑动标识="滑动|进入时总是可见" 返回="是" />
        </应用条布局>
        <!--滑动布局 在锚点布局中可以配置控件行为是:适配应用条-->
        <滑动布局="最大" 行为="应用条"="最大">
            <!--线性布局:被滑动布局包裹,子控件较多时允许向下滑动-->
            <!--内边距:增加内边距[左,上,右,下]-->
            <线性布局 内边距="20,20,20,100"="最大"="最大">
                <!--概览-->
                <文本 可选择="是" 文本="概览" 重力="中间"="50" />
                <线性布局="最大" 方向="横向">
                    <悬浮按钮 主题颜色="#57965C" 右外边距="15" 图标="ic_menu_fill" />
                    <悬浮按钮 主题颜色="#C94F4F" 右外边距="15" 图标="ic_person_outline_fill" />
                    <悬浮按钮 右外边距="15" 图标="ic_adjust_fill" 尺寸="30" />
                    <悬浮按钮 右外边距="15" 图标="ic_build_fill" 尺寸="40" />
                    <悬浮按钮 主题颜色="#3574F0" 图标="ic_settings_fill" />
                </线性布局>
                <!--基础用法-->
                <文本 可选择="是" 文本="基础用法 监听点击事件" 重力="中间"="50" />
                <悬浮按钮 标识="mFab" />
                <!--设置主题颜色-->
                <文本 可选择="是" 文本="设置主题颜色 主题颜色=颜色" 重力="中间"="50" />
                <线性布局="最大" 方向="横向">
                    <悬浮按钮 主题颜色="#57965C" 右外边距="15" />
                    <悬浮按钮 主题颜色="#C94F4F" 右外边距="15" />
                    <悬浮按钮 主题颜色="#3574F0" 右外边距="15" />
                    <悬浮按钮 主题颜色="#3574F0" />
                </线性布局>
                <!--设置图标-->
                <文本 可选择="是" 文本="设置图标 图标=图标" 重力="中间"="50" />
                <悬浮按钮 图标="ic_image_outline" />
                <!--设置本地图标-->
                <文本 可选择="是" 文本="设置本地图标 路径=路径" 重力="中间"="50" />
                <悬浮按钮 路径="example/$ui - 交互界面/07.fab-悬浮按钮/img/fab-icon.png" />
                <!--设置图标颜色-->
                <文本 可选择="是" 文本="设置图标颜色 图标颜色或者iconColor" 重力="中间"="50" />
                <线性布局="最大" 方向="横向">
                    <悬浮按钮 右外边距="15" 图标颜色="#57965C" />
                    <悬浮按钮 右外边距="15" 图标颜色="#C94F4F" />
                    <悬浮按钮 右外边距="15" 图标颜色="#3574F0" />
                    <悬浮按钮 />
                </线性布局>
                <!--设置长按提示(安卓8.0以上支持)-->
                <文本 可选择="是" 文本="设置长按提示(安卓8.0以上支持) 提示=提示" 重力="中间"
="50" />
                <悬浮按钮 图标="ic_build_fill" 提示="构建" />
                <!--设置圆弧角度-->
                <文本 可选择="是" 文本="设置圆弧角度 弧度=弧度" 重力="中间"="50" />
                <线性布局="最大" 方向="横向">
                    <悬浮按钮 右外边距="15" 弧度="10" />
                    <悬浮按钮 右外边距="15" 弧度="15" />
                    <悬浮按钮 右外边距="15" 弧度="20" />
                    <悬浮按钮 弧度="25" />
                </线性布局>
                <!--设置尺寸-->
                <文本 可选择="是" 文本="设置尺寸 尺寸=尺寸" 重力="中间"="50" />
                <线性布局="最大" 方向="横向">
                    <悬浮按钮 右外边距="15" 尺寸="30" />
                    <悬浮按钮 右外边距="15" 尺寸="35" />
                    <悬浮按钮 右外边距="15" 尺寸="40" />
                    <悬浮按钮 尺寸="45" />
                </线性布局>
                <!--自动显示隐藏-->
                <文本 上外边距="20" 可选择="是"
                    文本="自动显示隐藏\n在锚点布局(coord)中可以配置一个悬浮按钮自动显示和隐藏\n1.必须在coord布局中\n2.必须要设置行为=悬浮按钮:意思是开启悬浮按钮的自动显示和隐藏\n\n我们可以把锚点布局(coord)理解成一个升级版的帧布局(frame):通过布局重力属性可以控制悬浮按钮的位置"
                    重力="中间|开始" />
            </线性布局>
        </滑动布局>
        <!--
        在锚点布局(coord)中可以配置一个悬浮按钮自动显示和隐藏
        1.必须在锚点布局(coord)布局中
        2.必须要设置‘行为’="悬浮按钮":开启悬浮按钮的自动显示和隐藏
        我们可以把锚点布局(coord)理解成一个升级版的帧布局(frame):通过‘布局重力’属性可以控制悬浮按钮的位置
        -->
        <悬浮按钮 图标="ic_build_fill" 外边距="25" 布局重力="结束|下" 提示="构建" 行为="悬浮按钮" />
    </锚点布局>
</界面>

JS代码

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