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);
});

二、常用属性

menu - 菜单

设置菜单

<ui>
    <statusbar />
    <!-- 我习惯性把导航栏放在底部因此设置重力 gravity="bottom" -->
    <linear w="max" h="max" dir="v" gravity="bottom">
        <!--
        menu中的showAction属性:
        ifroom:如果有空间,则显示
        always:总是显示
        never:从不显示
        withtext:与文本一起显示
        -->
        <nav w="max">
            <menu text="菜单1" icon="ic_home" showAction="ifroom" />
            <menu text="菜单2" icon="ic_search" showAction="ifroom" />
            <menu text="菜单3" icon="ic_set" showAction="always" />
            <!-- 虽然设置了 showAction="never" 但是对于导航栏来说依旧会显示 对于应用条(toolbar)就不一定显示了-->
            <menu text="菜单4" icon="ic_logger" showAction="never" />
            <menu text="菜单5" icon="ic_menu" showAction="withtext" />
        </nav>
    </linear>
</ui>

iconTint - 图标颜色

设置图标颜色

<ui>
    <statusbar />
    <!-- 我习惯性把导航栏放在底部因此设置重力 gravity="bottom" -->
    <linear w="max" h="max" dir="v" gravity="bottom">
        <!-- 设置图标的填充颜色 iconTint="#FF0000"
        当图标被选中时会自动设置这个颜色，没有被选中的会被设置成这个颜色较浅的色彩(通过这个颜色计算得到的)
         -->
        <nav w="max" iconTint="#FF0000">
            <menu text="菜单1" icon="ic_home" showAction="ifroom" />
            <menu text="菜单2" icon="ic_search" showAction="ifroom" />
            <menu text="菜单3" icon="ic_set" showAction="always" />
            <!-- 虽然设置了 showAction="never" 但是对于导航栏来说依旧会显示 对于应用条(toolbar)就不一定显示了-->
            <menu text="菜单4" icon="ic_logger" showAction="never" />
            <menu text="菜单5" icon="ic_menu" showAction="withtext" />
        </nav>
    </linear>
</ui>

textColor - 文本颜色

设置文本颜色

<ui>
    <statusbar />
    <!-- 我习惯性把导航栏放在底部因此设置重力 gravity="bottom" -->
    <linear w="max" h="max" dir="v" gravity="bottom">
        <!-- 设置文本颜色 textColor="#FF0000" -->
        <nav w="max" textColor="#FF0000">
            <menu text="菜单1" icon="ic_home" />
            <menu text="菜单2" icon="ic_search" />
            <menu text="菜单3" icon="ic_set" />
        </nav>
    </linear>
</ui>

checkColor - 选中后图标颜色

设置选中后图标颜色

<ui>
    <statusbar />
    <!-- 我习惯性把导航栏放在底部因此设置重力 gravity="bottom" -->
    <linear w="max" h="max" dir="v" gravity="bottom">
        <!-- 设置选中颜色 checkColor="#FF0000" -->
        <nav w="max" checkColor="#FF0000">
            <menu text="菜单1" icon="ic_home" />
            <menu text="菜单2" icon="ic_search" />
            <menu text="菜单3" icon="ic_set" />
        </nav>
    </linear>
</ui>

bg - 背景颜色

设置背景颜色

<ui>
    <statusbar />
    <!-- 我习惯性把导航栏放在底部因此设置重力 gravity="bottom" -->
    <linear w="max" h="max" dir="v" gravity="bottom">
        <!-- 设置背景颜色 bg="#518855" -->
        <nav w="max" bg="#518855">
            <menu text="菜单1" icon="ic_home" />
            <menu text="菜单2" icon="ic_search" />
            <menu text="菜单3" icon="ic_set" />
        </nav>
    </linear>
</ui>

bgImg - 背景图片

设置背景图片

<ui>
    <statusbar />
    <!-- 我习惯性把导航栏放在底部因此设置重力 gravity="bottom" -->
    <linear w="max" h="max" dir="v" gravity="bottom" padding="5">
        <!-- 设置背景图片 bgImg="/res/bg_nav.png" -->
        <nav w="max" bgImg="/res/bg_nav.png" h="90">
            <menu text="菜单1" icon="ic_home" />
            <menu text="菜单2" icon="ic_search" />
            <menu text="菜单3" icon="ic_set" />
        </nav>
    </linear>
</ui>

三、常用函数

setBg(color)

设置背景颜色

  • 参数 : color {int} 颜色值

  • 版本 : 1.8.2

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

setBg(color)

设置背景颜色

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

  • 版本 : 1.8.2

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

setIconTint(color)

设置图标颜色

  • 参数 : color {int} 颜色值

  • 版本 : 1.8.2

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let nav = ui.id("mNav");
//设置图标颜色
nav.setIconTint($color.RED);

setIconTint(color)

设置图标颜色

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

  • 版本 : 1.8.2

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let nav = ui.id("mNav");
//设置图标颜色
nav.setIconTint("#1E1F22");

setTextColor(color)

设置文本颜色

  • 参数 : color {int} 颜色值

  • 版本 : 1.8.2

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let nav = ui.id("mNav");
//设置文本颜色
nav.setTextColor($color.RED);

setTextColor(color)

设置文本颜色

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

  • 版本 : 1.8.2

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let nav = ui.id("mNav");
//设置文本颜色
nav.setTextColor("#1E1F22");

setCheckColor(color)

设置选中颜色

  • 参数 : color {int} 颜色值

  • 版本 : 1.8.2

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let nav = ui.id("mNav");
//设置选中颜色
nav.setCheckColor($color.RED);

setCheckColor(color)

设置选中颜色

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

  • 版本 : 1.8.2

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let nav = ui.id("mNav");
//设置选中颜色
nav.setCheckColor("#1E1F22");

check(index)

选中指定菜单

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

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let nav = ui.id("mNav");
//选中指定菜单
nav.check(0);

menu(callback)

监听菜单事件

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

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let nav = ui.id("mNav");
//监听菜单事件
nav.menu((title)=>{
    toast(title);
});
ON THIS PAGE