轨道

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

轨道-rail

这个控件和nav导航栏控件很像,只不过是竖向排列的

原生类型:{com.google.android.material.navigationrail.NavigationRailView}

一、常用属性

iconTint - 图标颜色

设置图标颜色

<rail iconTint="#FF0000" />

textColor - 文本颜色

设置文本颜色

<rail textColor="#FF0000" />

checkColor - 选中后图标颜色

设置选中后图标颜色

<rail checkColor="#FF0000" />

padding - 内边距

设置内边距

<!--padding顺序是:左,上,右,下-->
<!--padding只设置一个值:则设置所有方向的内边距-->
<!--padding只设置两个值:则设置左右和上下方向的内边距-->
<rail padding="20" text="内边距" />

gravity - 重力

设置重力

<rail gravity="start" h="100" margin="20" text="重力:start" w="max" />

bg - 背景颜色

设置背景颜色

<rail bg="#1E1F22" text="背景颜色" />

bgImg - 背景图片

设置背景图片

<rail bgImg="./img.png" text="背景图片" />

二、常用函数

setBg(color)

设置背景颜色

  • 参数 : color {int} 颜色值

  • 版本 : 1.8.2

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

setBg(color)

设置背景颜色

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

  • 版本 : 1.8.2

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

setIconTint(color)

设置图标颜色

  • 参数 : color {int} 颜色值

  • 版本 : 1.8.2

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

setIconTint(color)

设置图标颜色

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

  • 版本 : 1.8.2

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

setTextColor(color)

设置文本颜色

  • 参数 : color {int} 颜色值

  • 版本 : 1.8.2

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

setTextColor(color)

设置文本颜色

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

  • 版本 : 1.8.2

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

setCheckColor(color)

设置选中颜色

  • 参数 : color {int} 颜色值

  • 版本 : 1.8.2

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

setCheckColor(color)

设置选中颜色

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

  • 版本 : 1.8.2

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

check(index)

选中指定菜单

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

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

监听菜单事件

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

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