应用条

  • 更新时间:2026-03-14 11:41:51

应用条-appbar

原生类型:{com.google.android.material.appbar.MaterialToolbar}

在使用的时候最好配合[appbar-layout]组件一起使用

应用条是一个软件的顶部条,用来显示标题、操作按钮等。

一、常用属性

标题 - 标题

设置标题

<界面>
    <状态条 />
    <应用条布局="最大">
        <应用条="最大" 标题="标题" />
    </应用条布局>
</界面>

副标题 - 副标题

设置副标题

<界面>
    <状态条 />
    <应用条布局="最大">
        <应用条 副标题="副标题"="最大" 标题="标题" />
    </应用条布局>
</界面>

标题颜色 - 标题颜色

设置标题颜色

<界面>
    <状态条 />
    <应用条布局="最大">
        <应用条="最大" 标题="标题" 标题颜色="#C94F4F" />
    </应用条布局>
</界面>

副标题颜色 - 副标题颜色

设置副标题颜色

<界面>
    <状态条 />
    <应用条布局="最大">
        <应用条 副标题="设置副标题颜色" 副标题颜色="#C94F4F"="最大" 标题="应用条" />
    </应用条布局>
</界面>

图标 - 图标

设置图标

<界面>
    <状态条 />
    <应用条布局="最大">
        <应用条 副标题="设置图标" 图标="ic_message_outline"="最大" 标题="应用条" />
    </应用条布局>
</界面>

图标颜色 - 图标颜色

设置图标颜色

<界面>
    <状态条 />
    <应用条布局="最大">
        <应用条 副标题="设置图标颜色" 图标="ic_message_outline" 图标颜色="#C94F4F"
="最大" 标题="应用条" />
    </应用条布局>
</界面>

背景颜色 - 背景颜色

设置背景颜色

<界面>
    <状态条 />
    <应用条布局="最大">
        <应用条 副标题="设置背景颜色" 副标题颜色="#C94F4F"="最大" 标题="应用条"
            背景颜色="#5557965C" />
    </应用条布局>
</界面>

背景图片 - 背景图片

设置背景图片

<界面>
    <状态条 />
    <应用条布局="最大">
        <应用条 副标题="副标题" 副标题颜色="#C94F4F"="最大" 标题="标题"
            背景图片="example/$ui - 交互界面/01.appbar-应用条/img/bg-appbar.png" />
    </应用条布局>
</界面>

菜单 - 菜单节点

菜单节点

menu节点中拥有如下属性:

  • text/文本/文字: 设置文本
  • icon/图标: 设置图标
  • iconTint/iconColor/图标颜色: 设置图标颜色
  • showAction/显示方式: 设置菜单显示方式(always/一直:总是显示;ifroom/有空间:如果有空间才显示;never/从不:从不显示;withtext/带文字:携带文本显示)
  • item {xml} 子菜单节点
  • more/moreIcon/更多/更多图标: 用来指定多级菜单图标(默认图标是三个点样式)
  • moreTint/moreIconTint/moreColor/moreIconColor/更多颜色: 指定多级子菜单图标的颜色

item节点拥有如下属性:

  • text/文本/文字: 设置选项文本
  • item/menu/选项/项目/菜单: {标签} 为子菜单设置子菜单节点(因此item节点中可以嵌套写自己的item子菜单节点)
属性提示

例如:“moreTint/moreIconTint/moreColor/moreIconColor/更多颜色”指的是在该标签中可以使用其中任何一个属性名称来表达设置更多图标的颜色。

例如:moreTint="#C94F4F" 或者 moreIconColor="#C94F4F" 或者 更多颜色="#C94F4F" 都是等价的表达方式。

<界面>
    <状态条 />
    <!--设置主菜单-->
    <应用条布局="最大">
        <应用条 副标题="副标题"="最大" 标题="应用条">
            <!-- 菜单、项目、选项 都可以作为标签 -->
            <菜单 图标="ic_settings_fill" 文本="设置" />
            <选项 图标="ic_share_fill" 文本="分享" />
            <项目 图标="ic_article_fill" 文本="日志" />
        </应用条>
    </应用条布局>
</界面>

设置主菜单颜色

<界面>
    <状态条 />
    <!--设置主菜单颜色-->
    <应用条布局="最大">
        <应用条 副标题="副标题"="最大" 标题="应用条">
            <!-- 菜单、项目、选项 都可以作为标签 -->
            <菜单 图标="ic_settings_fill" 图标颜色="#3574F0" 文本="设置" />
            <项目 图标="ic_share_fill" 图标颜色="#C94F4F" 文本="分享" />
            <选项 图标="ic_article_fill" 图标颜色="#57965C" 文本="日志" />
        </应用条>
    </应用条布局>
</界面>

设置多级菜单

<界面>
    <状态条 />
    <!--设置多级菜单-->
    <应用条布局="最大">
        <!--
        在应用条(appbar)中所有的标签中的文本(text)属性值不能重复
        因为在监听菜单的时候只会根据(text)文本属性值进行匹配
        -->
        <应用条 副标题="副标题"="最大" 标题="应用条">
            <菜单 图标="ic_settings_fill" 文本="设置" />
            <!-- menu标签也等价于item标签 -->
            <项目 图标="ic_share_fill" 文本="分享" />
            <!--在一级标签中还可以设置多级菜单-->
            <菜单 文本="更多">
                <!-- 菜单、项目、选项 都可以作为标签 -->
                <选项 文本="关于软件" />
                <选项 文本="检查更新" />
                <!--在item标签中还可以嵌套使用item作为子标签-->
                <选项 文本="更多选项">
                    <选项 文本="关于软件11" />
                    <选项 文本="检查更新22" />
                </选项>
            </菜单>
        </应用条>
    </应用条布局>
</界面>

设置多级菜单图标

<界面>
    <状态条 />
    <!--设置多级菜单图标-->
    <应用条布局="最大">
        <!--
        在应用条(appbar)中所有的标签中的文本(text)属性值不能重复
        因为在监听菜单的时候只会根据(text)文本属性值进行匹配
        -->
        <应用条 副标题="副标题"="最大" 标题="应用条">
            <!--设置多级菜单的图标
            更多=图标 (或者 更多图标)
            更多颜色=图标颜色 (或者 更多颜色、更多图标颜色)
            -->
            <菜单 文本="更多" 更多="ic_dehaze_outline" 更多图标颜色="#3574F0">
                <项目 文本="关于软件" />
                <项目 文本="检查更新" />
                <!--在item标签中还可以嵌套使用item作为子标签-->
                <项目 文本="更多选项">
                    <项目 文本="关于软件11" />
                    <项目 文本="检查更新22" />
                </项目>
            </菜单>
        </应用条>
    </应用条布局>
</界面>

返回 - 启用返回按钮

设置启用返回按钮

<界面>
    <状态条 />
    <应用条布局="最大">
        <应用条 副标题="设置显示返回按钮"="最大" 标题="应用条" 返回="是" />
    </应用条布局>
</界面>

返回颜色 - 返回按钮颜色

设置返回按钮颜色

<界面>
    <状态条 />
    <应用条布局="最大">
        <应用条 副标题="设置显示返回按钮颜色"="最大" 标题="应用条" 返回="是"
            返回图标颜色="#C94F4F" />
    </应用条布局>
</界面>

内边距 - 内边距

设置内边距

参数顺序:左,上,右,下(单位:dp)

<ui>
    <!-- 状态栏 -->
    <状态栏 />
    <!-- 应用条需要配合此布局才能生效 -->
    <应用条布局="最大">
        <应用条 副标题="我没有内边距"="最大" 标题="我是标题" />
    </应用条布局>
    <!-- 分割线 -->
    <分割线 />
    <应用条布局="最大">
        <!--内边距 顺序是:左,上,右,下-->
        <!--内边距 只设置一个值:则设置所有方向的内边距-->
        <!--内边距 只设置两个值:则设置左右和上下方向的内边距-->
        <应用条 内边距="50" 副标题="我有内边距"="最大" 标题="我是标题" />
    </应用条布局>
</ui>

二、常用函数

设置标题(标题)

设置标题

  • 参数 : 标题 {string} 标题内容
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置标题
应用条.设置标题("新标题");

设置副标题(副标题)

设置副标题

  • 参数 : 副标题 {string} 副标题内容
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置副标题
应用条.设置副标题("新副标题");

设置标题颜色(颜色)

设置标题颜色

  • 参数 : 颜色 {int} 颜色值
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置标题颜色
应用条.设置标题颜色($颜色.红色);

设置标题颜色(颜色)

设置标题颜色

  • 参数 : 颜色 {string} 颜色值
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置标题颜色
应用条.设置标题颜色("#1E1F22");

设置副标题颜色(颜色)

设置副标题颜色

  • 参数 : 颜色 {int} 颜色值
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置副标题颜色
应用条.设置副标题颜色($颜色.红色);

设置副标题颜色(颜色)

设置副标题颜色

  • 参数 : 颜色 {string} 颜色值
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置副标题颜色
应用条.设置副标题颜色("#1E1F22");

设置返回(显示返回按钮)

设置显示返回按钮

  • 参数 : 显示返回按钮 {布尔值} 是否显示返回按钮
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置显示返回按钮
应用条.设置返回(是);

设置返回按钮颜色(返回按钮颜色)

设置显示返回按钮

  • 参数 : 返回按钮颜色 {布尔值} 返回按钮颜色
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置显示返回按钮
应用条.设置返回按钮颜色("#C94F4F");

设置图标(图标)

设置图标

  • 参数 : 图标 {字符串} 图标
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置图标
应用条.设置图标("ic_person_outline_fill");

设置图标颜色(图标颜色)

设置图标颜色

  • 参数 : 图标颜色 {字符串} 颜色
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置图标颜色
应用条.设置图标颜色("#B54747");

设置图标点击事件(监听事件)

设置图标点击事件

  • 参数 : 监听事件 {()=>{}} 图标点击事件
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置图标点击事件
应用条.设置图标点击事件(()=>{
    信息("我被点击了");
});

设置背景颜色(颜色)

设置背景颜色

  • 参数 : 颜色 {int} 颜色值
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置背景颜色
应用条.设置背景颜色($颜色.红色);

设置背景颜色(颜色)

设置背景颜色

  • 参数 : 颜色 {string} 颜色值
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置背景颜色
应用条.设置背景颜色("#1E1F22");

监听返回(回调)

监听返回事件

  • 参数 : 回调 {(视图)=>{}} 返回按钮点击事件
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//返回按钮点击事件
应用条.监听返回((视图)=>{
    //一般标题的返回按钮就是退出界面:
    界面.结束();
});

监听菜单(回调)

监听菜单事件

  • 参数 : 回调 {(标题)=>{}} 菜单点击事件
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//返回菜单点击事件
应用条.监听菜单((标题)=>{
    如果(标题 == "菜单1"){
          //菜单1点击事件
    }
});

绑定(抽屉)

绑定抽屉

  • 参数 : 抽屉 {drawer}
//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
定义 抽屉 = 界面.找控件("我的抽屉");
//让应用条与抽屉联动
应用条.绑定(抽屉);