综合案例

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

Xml代码

<界面>
    <状态条 />
    <!--使用锚点布局配合滚动布局可以使应用条自带动画-->
    <锚点布局="最大">
        <!--应用标题栏-->
        <应用条布局="最大">
            <!--
            返回:开启返回按钮
            滑动标识:配置滚动布局滚动时的动画标记
            -->
            <应用条 副标题="应用条"="最大" 标识="mAppbar" 标题="Appbar"
                滑动标识="滑动|进入时总是可见" 返回="是" />
        </应用条布局>
        <!--滑动布局 在锚点布局中可以配置控件行为是:适配应用条-->
        <滑动布局="最大" 行为="应用条"="最大">
            <!--线性布局:被滑动布局包裹,子控件较多时允许向下滑动-->
            <!--padding:增加内边距[左,上,右,下]-->
            <线性布局 内边距="20,20,20,100"="最大"="最大">
                <!--基础用法-->
                <文本 可选择="是" 文本="基础用法 设置菜单按钮点击事件" 重力="中间"="50" />
                <应用条布局="最大">
                    <!--
                    在应用条(appbar)中所有的标签中的文本(text)属性值不能重复
                    因为在监听菜单的时候只会根据(text)文本属性值进行匹配
                    -->
                    <应用条 副标题="副标题"="最大" 标识="appbar" 标题="应用条" 返回="是">
                        <菜单 图标="ic_settings_fill" 文本="设置" />
                        <!-- menu标签也等价于item标签 -->
                        <项目 图标="ic_share_fill" 文本="分享" />
                        <!--在menu中可以使用item配置多级子标签-->
                        <菜单 文本="更多">
                            <项目 文本="关于软件" />
                            <项目 文本="检查更新" />
                            <!--在item标签中还可以嵌套使用item作为子标签-->
                            <项目 文本="更多选项">
                                <项目 文本="关于软件11" />
                                <项目 文本="检查更新22" />
                            </项目>
                        </菜单>
                    </应用条>
                </应用条布局>
                <!--设置主菜单-->
                <文本 可选择="是" 文本="设置主菜单 菜单标签" 重力="中间"="50" />
                <应用条布局="最大">
                    <应用条 副标题="副标题"="最大" 标题="应用条">
                        <!-- 菜单、项目、选项 都可以作为标签 -->
                        <菜单 图标="ic_settings_fill" 文本="设置" />
                        <选项 图标="ic_share_fill" 文本="分享" />
                        <项目 图标="ic_article_fill" 文本="日志" />
                    </应用条>
                </应用条布局>
                <!--设置主菜单颜色-->
                <文本 可选择="是" 文本="设置主菜单颜色 图标颜色=颜色" 重力="中间"="50" />
                <应用条布局="最大">
                    <应用条 副标题="副标题"="最大" 标题="应用条">
                        <!-- 菜单、项目、选项 都可以作为标签 -->
                        <菜单 图标="ic_settings_fill" 图标颜色="#3574F0" 文本="设置" />
                        <项目 图标="ic_share_fill" 图标颜色="#C94F4F" 文本="分享" />
                        <选项 图标="ic_article_fill" 图标颜色="#57965C" 文本="日志" />
                    </应用条>
                </应用条布局>
                <!--设置多级菜单-->
                <文本 可选择="是" 文本="设置多级菜单 menu-item标签" 重力="中间"="50" />
                <应用条布局="最大">
                    <!--
                    在应用条(appbar)中所有的标签中的文本(text)属性值不能重复
                    因为在监听菜单的时候只会根据(text)文本属性值进行匹配
                    -->
                    <应用条 副标题="副标题"="最大" 标题="应用条">
                        <菜单 图标="ic_settings_fill" 文本="设置" />
                        <!-- menu标签也等价于item标签 -->
                        <项目 图标="ic_share_fill" 文本="分享" />
                        <!--在一级标签中还可以设置多级菜单-->
                        <菜单 文本="更多">
                            <!-- 菜单、项目、选项 都可以作为标签 -->
                            <选项 文本="关于软件" />
                            <选项 文本="检查更新" />
                            <!--在item标签中还可以嵌套使用item作为子标签-->
                            <选项 文本="更多选项">
                                <选项 文本="关于软件11" />
                                <选项 文本="检查更新22" />
                            </选项>
                        </菜单>
                    </应用条>
                </应用条布局>
                <!--设置多级菜单图标-->
                <文本 可选择="是" 文本="设置多级菜单图标 更多 更多图标颜色" 重力="中间"="50" />
                <应用条布局="最大">
                    <!--
                    在应用条(appbar)中所有的标签中的文本(text)属性值不能重复
                    因为在监听菜单的时候只会根据(text)文本属性值进行匹配
                    -->
                    <应用条 副标题="副标题"="最大" 标题="应用条">
                        <!--设置多级菜单的图标
                        更多=图标 (或者 更多图标)
                        更多颜色=图标颜色 (或者 更多颜色、更多图标颜色)
                        -->
                        <菜单 文本="更多" 更多="ic_dehaze_outline" 更多图标颜色="#3574F0">
                            <项目 文本="关于软件" />
                            <项目 文本="检查更新" />
                            <!--在item标签中还可以嵌套使用item作为子标签-->
                            <项目 文本="更多选项">
                                <项目 文本="关于软件11" />
                                <项目 文本="检查更新22" />
                            </项目>
                        </菜单>
                    </应用条>
                </应用条布局>
                <!--设置标题-->
                <文本 可选择="是" 文本="设置标题 标题=标题" 重力="中间"="50" />
                <应用条布局="最大">
                    <应用条="最大" 标题="标题" />
                </应用条布局>
                <!--设置副标题-->
                <文本 可选择="是" 文本="设置副标题 副标题=副标题" 重力="中间"="50" />
                <应用条布局="最大">
                    <应用条 副标题="副标题"="最大" 标题="标题" />
                </应用条布局>
                <!--设置标题颜色-->
                <文本 可选择="是" 文本="设置标题颜色 标题颜色=标题颜色" 重力="中间"="50" />
                <应用条布局="最大">
                    <应用条="最大" 标题="标题" 标题颜色="#C94F4F" />
                </应用条布局>
                <!--设置副标题颜色-->
                <文本 可选择="是" 文本="设置副标题颜色 副标题颜色=副标题颜色" 重力="中间"="50" />
                <应用条布局="最大">
                    <应用条 副标题="设置副标题颜色" 副标题颜色="#C94F4F"="最大" 标题="应用条" />
                </应用条布局>
                <!--设置显示返回按钮-->
                <文本 可选择="是" 文本="设置显示返回按钮 返回=是" 重力="中间"="50" />
                <应用条布局="最大">
                    <应用条 副标题="设置显示返回按钮"="最大" 标题="应用条" 返回="是" />
                </应用条布局>
                <!--设置显示返回按钮颜色-->
                <文本 可选择="是" 文本="设置显示返回按钮颜色 返回图标颜色=颜色" 重力="中间"
="50" />
                <应用条布局="最大">
                    <应用条 副标题="设置显示返回按钮颜色"="最大" 标题="应用条" 返回="是"
                        返回图标颜色="#C94F4F" />
                </应用条布局>
                <!--设置图标-->
                <文本 可选择="是" 文本="设置图标 图标=图标" 重力="中间"="50" />
                <应用条布局="最大">
                    <应用条 副标题="设置图标" 图标="ic_message_outline"="最大" 标题="应用条" />
                </应用条布局>
                <!--设置图标颜色-->
                <文本 可选择="是" 文本="设置图标颜色 图标颜色=颜色" 重力="中间"="50" />
                <应用条布局="最大">
                    <应用条 副标题="设置图标颜色" 图标="ic_message_outline" 图标颜色="#C94F4F"
="最大" 标题="应用条" />
                </应用条布局>
                <!--设置背景颜色-->
                <文本 可选择="是" 文本="设置背景颜色 背景颜色=颜色" 重力="中间"="50" />
                <应用条布局="最大">
                    <应用条 副标题="设置背景颜色" 副标题颜色="#C94F4F"="最大" 标题="应用条"
                        背景颜色="#5557965C" />
                </应用条布局>
                <!--设置背景图片-->
                <文本 可选择="是" 文本="设置背景图片 背景图片=图片地址" 重力="中间"="50" />
                <应用条布局="最大">
                    <应用条 副标题="副标题" 副标题颜色="#C94F4F"="最大" 标题="标题"
                        背景图片="example/$ui - 交互界面/01.appbar-应用条/img/bg-appbar.png" />
                </应用条布局>
            </线性布局>
        </滑动布局>
    </锚点布局>
</界面>

JS代码

定义 界面 = $界面.解析布局("example/$ui - 交互界面/01.appbar-应用条/appbar.xml");
//绑定标题栏返回按钮
界面.找控件("appbar").监听返回(()=>{
    界面.结束();
});
定义 我的标题栏 = 界面.找控件("mAppbar");
//设置返回按钮点击事件
我的标题栏.监听返回(()=>{
    吐司("点击了:返回按钮");
});
//设置菜单选项点击事件
我的标题栏.监听菜单((文本)=>{
    吐司("点击了:"+文本);
});
//显示界面
界面.显示();