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

导航栏

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

导航栏-nav

原生类型:{com.google.android.material.bottomnavigation.BottomNavigationView}

导航栏：一般用于与多页布局(pager)联动，实现界面的跳转

<ui>
    <statusbar />
    <!-- 我习惯性把导航栏放在底部因此设置重力 gravity="bottom" -->
    <linear w="max" h="max" dir="v" gravity="bottom">
        <nav w="max">
            <menu text="主页" icon="ic_home" />
            <menu text="设置" icon="ic_set" />
            <menu text="菜单" icon="ic_menu" />
        </nav>
    </linear>
</ui>

一、基础用法

<ui>
    <statusbar />
    <!-- 我习惯性把导航栏放在底部因此设置重力 gravity="bottom" -->
    <linear w="max" h="max" dir="v" gravity="bottom">
        <!-- 给导航栏设置id id="mNav" -->
        <nav id="mNav" w="max">
            <menu text="菜单1" icon="ic_home" />
            <menu text="菜单2" icon="ic_search" />
            <menu text="菜单3" icon="ic_set" />
        </nav>
    </linear>
</ui>
//解析布局
let ui = $ui.layout("ui.xml");
ui.show();//显示界面
//获取控件
let nav = ui.id("mNav");
//监听菜单事件
nav.menu((title)=>{
    toast(title);
});

二、常用属性

菜单 - 菜单

设置菜单

<!--显示方式:
    有空间:如果有空间,则显示
    总是:总是显示
    从不:从不显示
    带文本:与文本一起显示
    -->
<导航栏 宽="最大">
    <菜单 文本="菜单1" 图标="ag_logo" 图标颜色="#FF0000" 显示方式="有空间" />
    <菜单 文本="菜单2" 显示方式="有空间" />
    <菜单 文本="菜单3" 显示方式="总是" />
    <菜单 文本="菜单3" 显示方式="从不" />
    <菜单 文本="菜单3" 显示方式="带文本" />
</导航栏>

图标颜色 - 图标颜色

设置图标颜色

<导航栏 图标颜色="#FF0000" />

文本颜色 - 文本颜色

设置文本颜色

<导航栏 文本颜色="#FF0000" />

选中颜色 - 选中后图标颜色

设置选中后图标颜色

<导航栏 选中颜色="#FF0000" />

背景颜色 - 背景颜色

设置背景颜色

<导航栏 背景颜色="#1E1F22" 文本="背景颜色" />

背景图片 - 背景图片

设置背景图片

<导航栏 背景图片="./资源/图片01.png" 文本="背景图片" />

三、常用函数

设置背景颜色(颜色)

设置背景颜色

  • 参数 : 颜色 {数字} 文本颜色值

  • 版本 : 1.8.2

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//获取控件
定义 导航栏 = 界面.找控件("我的导航栏");
//设置背景颜色
导航栏.设置背景颜色($颜色.红色);

设置背景颜色(颜色)

设置背景颜色

  • 参数 : 颜色 {字符串} 颜色字符串

  • 版本 : 1.8.2

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//获取控件
定义 导航栏 = 界面.找控件("我的导航栏");
//设置背景颜色
导航栏.设置背景颜色("#1E1F22");

设置图标颜色(颜色)

设置图标颜色

  • 参数 : 颜色 {数字} 文本颜色值

  • 版本 : 1.8.2

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//获取控件
定义 导航栏 = 界面.找控件("我的导航栏");
//设置图标颜色
导航栏.设置图标颜色($颜色.红色);

设置图标颜色(颜色)

设置图标颜色

  • 参数 : 颜色 {字符串} 颜色字符串

  • 版本 : 1.8.2

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//获取控件
定义 导航栏 = 界面.找控件("我的导航栏");
//设置图标颜色
导航栏.设置图标颜色("#1E1F22");

设置文本颜色(颜色)

设置文本颜色

  • 参数 : 颜色 {数字} 文本颜色值

  • 版本 : 1.8.2

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//获取控件
定义 导航栏 = 界面.找控件("我的导航栏");
//设置文本颜色
导航栏.设置文本颜色($颜色.红色);

设置文本颜色(颜色)

设置文本颜色

  • 参数 : 颜色 {字符串} 颜色字符串

  • 版本 : 1.8.2

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//获取控件
定义 导航栏 = 界面.找控件("我的导航栏");
//设置文本颜色
导航栏.设置文本颜色("#1E1F22");

设置选中颜色(颜色)

设置选中颜色

  • 参数 : 颜色 {数字} 文本颜色值

  • 版本 : 1.8.2

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//获取控件
定义 导航栏 = 界面.找控件("我的导航栏");
//设置选中颜色
导航栏.设置选中颜色($颜色.红色);

设置选中颜色(颜色)

设置选中颜色

  • 参数 : 颜色 {字符串} 颜色字符串

  • 版本 : 1.8.2

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//获取控件
定义 导航栏 = 界面.找控件("我的导航栏");
//设置选中颜色
导航栏.设置选中颜色("#1E1F22");

选中(索引)

选中指定菜单

  • 参数 : 索引 {int} 菜单索引

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./主界面.xml");
//获取控件
定义 导航栏 = 界面.找控件("我的导航栏");
//选中指定菜单
导航栏.选中(0);

菜单(回调)

监听菜单事件

  • 参数 : 回调 {(标题)=>{}} 菜单点击事件回调

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./主界面.xml");
//获取控件
定义 导航栏 = 界面.找控件("我的导航栏");
//监听菜单事件
导航栏.菜单((标题)=>{
    土司(标题);
});
ON THIS PAGE