如何在Roku中创建顶部水平菜单并实现分层显隐？

一、水平菜单实现方法 #

Roku默认垂直列表无法直接实现水平布局，推荐使用RowList组件（Roku Scene Graph官方提供的水平滚动列表），它天然支持水平排列，适配全机型屏幕，无需手动计算坐标。

实现步骤： #

1. 自定义菜单项组件
   创建HorizontalMenuItem.xml文件，定义菜单项的默认样式与选中高亮样式：

<component name="HorizontalMenuItem" extends="Label">
  <script type="text/brightscript">
    sub init()
      m.top.focusable = true
      m.top.color = "#FFFFFF" ' 默认文本颜色
      m.top.selectedColor = "#FFA500" ' 选中时的高亮颜色（替换为你需要的特定颜色）
    end sub
  </script>
</component>

2. 在主场景中集成RowList
   在场景XML中添加RowList，绑定菜单项组件与数据：

<component name="MainScene" extends="Scene">
  <children>
    <RowList
      id="topMenu"
      itemComponentName="HorizontalMenuItem"
      itemSize="[200, 60]" ' 菜单项宽高
      rowItemSpacing="20" ' 菜单项间距
      focusAnimationStyle="fixedFocus"
      translation="[50, 30]" ' 菜单位置
    />
  </children>
  <script type="text/brightscript">
    sub init()
      ' 菜单数据
      menuItems = [
        {title: "首页"},
        {title: "分类"},
        {title: "我的"},
        {title: "设置"}
      ]
      m.top.findNode("topMenu").content = menuItems
    end sub
  </script>
</component>

适配说明 #

无需特定模板，基于Roku的Scene Graph框架即可实现，所有支持Scene Graph的Roku应用都能直接复用该逻辑。

二、分层显隐功能实现 #

通过监听焦点切换或页面跳转事件，控制菜单的显示/隐藏：

方案1：监听焦点变化 #

当焦点从菜单移至内容区域时隐藏菜单，回到菜单时重新显示：

sub init()
  ' 获取菜单和内容区域组件
  m.topMenu = m.top.findNode("topMenu")
  m.contentArea = m.top.findNode("contentArea")
  
  ' 监听内容区域获焦事件
  m.contentArea.observeField("focused", "onContentFocused")
  ' 监听菜单获焦事件
  m.topMenu.observeField("focused", "onMenuFocused")
end sub

sub onContentFocused()
  if m.contentArea.focused then
    m.topMenu.visible = false
  end if
end sub

sub onMenuFocused()
  if m.topMenu.focused then
    m.topMenu.visible = true
  end if
end sub

方案2：页面路由切换 #

如果是多场景架构，进入内容场景时隐藏菜单，返回主场景时显示：

' 主场景中切换到内容场景的逻辑
sub onMenuItemSelected(event as Object)
  ' 隐藏菜单
  m.topMenu.visible = false
  ' 导航到内容场景
  sceneManager = CreateObject("roSceneManager")
  sceneManager.showScene("ContentScene")
end sub

' 返回主场景时显示菜单
sub onSceneBack()
  m.topMenu.visible = true
end sub

内容的提问来源于stack exchange，提问作者Rahul Rathod