AIGame
API英文文档
API中文文档
UI英文文档
UI中文文档
API英文文档
API中文文档
UI英文文档
UI中文文档

应用条

  • 更新时间:2025-12-02 10:12:45

应用条-appbar

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

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

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

一、常用属性

title - 标题

设置标题

<ui>
    <!-- 状态栏 -->
    <statusbar/>
    <!-- 应用条需要配合此布局才能生效 -->
    <appbar-layout w="max">
        <appbar title="我是标题" w="max" />
    </appbar-layout>
</ui>

subTitle - 副标题

设置副标题

<ui>
    <!-- 状态栏 -->
    <statusbar/>
    <!-- 应用条需要配合此布局才能生效 -->
    <appbar-layout w="max">
        <appbar subTitle="副标题" title="我是标题" w="max" />
    </appbar-layout>
</ui>

titleColor - 标题颜色

设置标题颜色

<ui>
    <!-- 状态栏 -->
    <statusbar/>
    <!-- 应用条需要配合此布局才能生效 -->
    <appbar-layout w="max">
        <appbar titleColor="#B44A4A" title="我是标题" w="max" />
    </appbar-layout>
</ui>

subTitleColor - 副标题颜色

设置副标题颜色

<ui>
    <!-- 状态栏 -->
    <statusbar />
    <!-- 应用条需要配合此布局才能生效 -->
    <appbar-layout w="max">
        <appbar subTitle="副标题" subTitleColor="#B44A4A" title="我是标题" w="max" />
    </appbar-layout>
</ui>

bg - 背景颜色

设置背景颜色

<ui>
    <!-- 状态栏 -->
    <statusbar />
    <!-- 应用条需要配合此布局才能生效 -->
    <appbar-layout w="max">
        <appbar subTitle="副标题" bg="#345de6ff" title="我是标题" w="max" />
    </appbar-layout>
</ui>

bgImg - 背景图片

设置背景图片

<ui>
    <!-- 状态栏 -->
    <statusbar />
    <!-- 应用条需要配合此布局才能生效 -->
    <appbar-layout w="max">
        <appbar titleColor="#FFFFFF" bgImg="/res/appbar-bg.png" title="我是标题" w="max" />
    </appbar-layout>
</ui>

menu - 菜单节点

菜单节点

menu节点中拥有如下属性：

  • text {string} 设置文本
  • icon {string} 设置图标
  • iconTint {string} 设置图标颜色
  • showAction {string} 菜单显示方式(always:总是显示;ifRoom:如果有空间才显示;never:从不显示;withtext:携带文本显示)
  • item {xml} 子菜单节点

item节点拥有如下属性：

  • text {string} 设置文本
  • item {xml} 为子菜单设置子菜单节点(因此item节点中可以嵌套写自己的item子菜单节点)
<!--[用法一]只用主菜单-->
<appbar back="true" bg="#F1F0FA" subTitle="安卓自动化平台..." title="主菜单"
    w="max">
    <menu icon="ic_menu_line" iconTint="#000000" text="菜单" />
    <menu icon="ic_home_fill" iconTint="#000000" text="主页" />
    <menu icon="ic_3d" iconTint="#000000" text="转换" />
</appbar>
<!--[用法二]多级子菜单-->
<appbar back="true" bg="#F1F0FA" subTitle="可设置多级子菜单" title="子菜单" w="max">
    <menu>
        <item text="菜单1" />
        <item text="菜单2" />
        <item text="菜单3">
            <!--item中还允许添加item子菜单-->
            <item text="菜单3-1" />
            <item text="菜单3-2">
                <item text="菜单3-2-1" />
                <item text="菜单3-2-2" />
                <item text="菜单3-2-3" />
            </item>
            <item text="菜单3-3" />
        </item>
    </menu>
</appbar>

示例：主菜单

<ui>
    <!-- 状态栏 -->
    <statusbar />
    <!-- 应用条需要配合此布局才能生效 -->
    <appbar-layout w="max">
        <appbar title="我是标题" w="max">
            <menu icon="ic_menu_line" iconTint="#000000" text="菜单" />
            <menu icon="ic_home_fill" iconTint="#000000" text="主页" />
            <menu icon="ic_3d" iconTint="#000000" text="转换" />
        </appbar>
    </appbar-layout>
</ui>

示例：多级子菜单

<ui>
    <!-- 状态栏 -->
    <statusbar />
    <!-- 应用条需要配合此布局才能生效 -->
    <appbar-layout w="max">
        <appbar title="我是标题" w="max">
            <menu icon="ic_menu_line" iconTint="#000000" text="菜单" />
            <menu icon="ic_home_fill" iconTint="#000000" text="主页" />
            <menu icon="ic_more" iconTint="#000000" text="更多">
                <item text="菜单1-1" />
                <item text="菜单1-2" />
                <item text="菜单1-3">
                    <!-- item 中还可以继续嵌套子item -->
                    <item text="菜单2-1" />
                    <item text="菜单3-2" />
                </item>
            </menu>
        </appbar>
    </appbar-layout>
</ui>

back - 启用返回按钮

设置启用返回按钮

<ui>
    <!-- 状态栏 -->
    <statusbar />
    <!-- 应用条需要配合此布局才能生效 -->
    <appbar-layout w="max">
        <appbar back="true" title="我是标题" w="max" />
    </appbar-layout>
</ui>

padding - 内边距

设置内边距

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

二、常用函数

setTitle(title)

设置标题

  • 参数 : title {string} 标题

//解析布局,获得ui对象
let ui = $ui.layout("./mUI.xml");
//拿到控件
let appbar = ui.id("appbar");
//设置标题
appbar.setTitle("标题");

setSubTitle(subTitle)

设置副标题

  • 参数 : subTitle {string} 副标题

//解析布局,获得ui对象
let ui = $ui.layout("./mUI.xml");
//拿到控件
let appbar = ui.id("appbar");
//设置副标题
appbar.setSubTitle("副标题");

setTitleColor(color)

设置标题颜色

  • 参数 : color {int} 颜色值

//解析布局,获得ui对象
let ui = $ui.layout("./mUI.xml");
//拿到控件
let appbar = ui.id("appbar");
//设置标题颜色
appbar.setTitleColor($color.RED);

setTitleColor(color)

设置标题颜色

  • 参数 : color {string} 颜色值

//解析布局,获得ui对象
let ui = $ui.layout("./mUI.xml");
//拿到控件
let appbar = ui.id("appbar");
//设置标题颜色
appbar.setTitleColor("#1E1F22");

setSubTitleColor(color)

设置副标题颜色

  • 参数 : color {int} 颜色值

//解析布局,获得ui对象
let ui = $ui.layout("./mUI.xml");
//拿到控件
let appbar = ui.id("appbar");
//设置副标题颜色
appbar.setSubTitleColor($color.RED);

setSubTitleColor(color)

设置副标题颜色

  • 参数 : color {string} 颜色值

//解析布局,获得ui对象
let ui = $ui.layout("./mUI.xml");
//拿到控件
let appbar = ui.id("appbar");
//设置副标题颜色
appbar.setSubTitleColor("#1E1F22");

setBg(color)

设置背景颜色

  • 参数 : color {int} 颜色值

//解析布局,获得ui对象
let ui = $ui.layout("./mUI.xml");
//拿到控件
let appbar = ui.id("appbar");
//设置背景颜色
appbar.setBg($color.RED);

setBg(color)

设置背景颜色

  • 参数 : color {string} 颜色值

//解析布局,获得ui对象
let ui = $ui.layout("./mUI.xml");
//拿到控件
let appbar = ui.id("appbar");
//设置背景颜色
appbar.setBg("#1E1F22");

back(callback)

监听返回事件

  • 参数 : callback {(view)=>{}} 返回按钮点击事件

//解析布局,获得ui对象
let ui = $ui.layout("./mUI.xml");
//拿到控件
let appbar = ui.id("appbar");
//返回按钮点击事件
appbar.back((view)=>{
    //一般标题的返回按钮就是退出界面:
    ui.finish();
});

menu(callback)

监听菜单事件

  • 参数 : callback {(title)=>{}} 菜单点击事件

//解析布局,获得ui对象
let ui = $ui.layout("./mUI.xml");
//拿到控件
let appbar = ui.id("appbar");
//返回菜单点击事件
appbar.menu((title)=>{
    if(title == "菜单1"){
          //菜单1点击事件
    }
});

bind(drawer)

绑定drawer

  • 参数 : drawer {drawer}

//解析布局,获得ui对象
let ui = $ui.layout("./mUI.xml");
//拿到控件
let appbar = ui.id("appbar");
let drawer = ui.id("drawer");
//让appbar与drawer联动
appbar.bind(drawer);
ON THIS PAGE