如何在Roku的Rowlist/ZoomRowlist中实现可聚焦切换的双按钮

要在Rowlist或ZoomRowlist的行内添加可切换焦点的按钮，核心是自定义行组件，把按钮作为行的子元素并配置好焦点导航逻辑，以下是具体实现步骤：

1. 自定义行组件（RowItem） #

创建包含横幅和按钮的自定义行组件，给按钮设置焦点属性和导航规则：

<?xml version="1.0" encoding="utf-8"?>
<component name="CustomRowItem" extends="Group">
  <script type="text/brightscript">
    sub init()
      ' 初始化组件，可根据传入数据设置按钮文字、横幅地址
      data = m.top.data
      m.top.bannerPoster.uri = data.bannerUrl
      m.top.btn1.text = data.btn1Text
      m.top.btn2.text = data.btn2Text
    end sub
  </script>
  <children>
    ' 横幅海报
    <Poster
      id="bannerPoster"
      width="800"
      height="450"
      focusable="true"
      downFocusId="btn1"
    />
    ' 按钮容器
    <Group
      id="buttonGroup"
      width="800"
      height="80"
      y="460"
    >
      ' 按钮1
      <Button
        id="btn1"
        width="300"
        height="60"
        x="50"
        focusable="true"
        rightFocusId="btn2"
        upFocusId="bannerPoster"
      />
      ' 按钮2
      <Button
        id="btn2"
        width="300"
        height="60"
        x="450"
        focusable="true"
        leftFocusId="btn1"
        upFocusId="bannerPoster"
      />
    </Group>
  </children>
</component>

2. 配置Rowlist/ZoomRowlist #

在主页面中使用Rowlist，指定自定义行组件，并处理行聚焦逻辑：

<?xml version="1.0" encoding="utf-8"?>
<component name="MainScreen" extends="Scene">
  <children>
    <Rowlist
      id="mainRowlist"
      width="1920"
      height="1080"
      itemComponentName="CustomRowItem"
      itemSize="[800, 550]" ' 需覆盖横幅+按钮的总高度
      focusable="true"
      onItemFocused="onRowItemFocused"
    />
  </children>
  <script type="text/brightscript">
    sub init()
      ' 构造行数据
      rowData = []
      for i = 0 to 4
        rowData.push({
          bannerUrl: "your_banner_url_here",
          btn1Text: "操作A",
          btn2Text: "操作B"
        })
      end for
      m.top.mainRowlist.content = rowData
    end sub

    sub onRowItemFocused(evt as Object)
      ' 行聚焦时自动把焦点移到第一个按钮（可选，按需开启）
      rowItem = evt.getRoSGNode()
      rowItem.btn1.setFocus(true)
    end sub
  </script>
</component>

3. 核心注意事项 #

• 所有需要聚焦的元素必须设置focusable="true"，并通过leftFocusId/rightFocusId/upFocusId/downFocusId配置焦点跳转关系。
• Rowlist的itemSize要足够容纳行内所有元素，避免按钮被裁剪。
• 若使用ZoomRowlist，替换组件标签即可，缩放属性不影响按钮的焦点导航逻辑。

内容的提问来源于stack exchange，提问作者Nijil Raj