如何在Roku中制作自定义按钮？求图中样式按钮的实现方案

根据你提供的圆角矩形、区分选中/未选中状态的按钮样式，可通过以下两种方式实现：

1. 基于内置Button组件快速自定义 #

Roku内置Button组件支持直接通过属性配置外观，适合快速实现基础样式：

<Button
    id="StyledButton"
    text="按钮文本"
    width="220"
    height="65"
    cornerRadius="12"  <!-- 匹配图中圆角弧度 -->
    backgroundColor="#F0F0F0"  <!-- 未选中背景色 -->
    borderColor="#444444"
    borderWidth="2"
    textColor="#444444"        <!-- 未选中文字色 -->
    focusedBackgroundColor="#2D2D2D"  <!-- 选中/聚焦背景色 -->
    focusedBorderColor="#FFFFFF"
    focusedTextColor="#FFFFFF"
    font="font:MediumBoldSystemFont"
/>

• 若需要渐变、纹理等复杂背景，可准备默认/聚焦两张状态图，通过bitmapUri和focusBitmapUri属性设置：

  <Button
      bitmapUri="pkg:/images/button_default.png"
      focusBitmapUri="pkg:/images/button_focused.png"
      text="按钮文本"
      ...
  />
  

2. 完全自定义按钮组件（灵活扩展） #

如果需要更复杂的布局（如带图标）或自定义交互，可通过Group组合Rectangle和Label实现：

自定义组件代码 #

<Component name="CustomRoundButton" extends="Group">
    <interface>
        <field id="text" type="string" title="按钮文字" />
        <field id="onClick" type="assocarray" title="点击回调" />
    </interface>
    <children>
        <Rectangle
            id="BtnBg"
            width="100%"
            height="100%"
            cornerRadius="12"
            color="#F0F0F0"
            borderColor="#444444"
            borderWidth="2"
            focusable="true"
            onKeyEvent="handleKeyEvent"
        />
        <Label
            id="BtnLabel"
            text="[m.text]"
            width="100%"
            height="100%"
            horizontalAlignment="center"
            verticalAlignment="center"
            textColor="#444444"
            font="font:MediumBoldSystemFont"
        />
    </children>
    <script type="text/brightscript">
        sub init()
            m.bg = m.top.findNode("BtnBg")
            m.label = m.top.findNode("BtnLabel")
            m.bg.observeField("focused", "onFocusChange")
        end sub

        sub onFocusChange()
            if m.bg.focused then
                m.bg.color = "#2D2D2D"
                m.bg.borderColor="#FFFFFF"
                m.label.textColor="#FFFFFF"
            else
                m.bg.color="#F0F0F0"
                m.bg.borderColor="#444444"
                m.label.textColor="#444444"
            end if
        end sub

        sub handleKeyEvent(key as string, press as boolean) as boolean
            if press and key = "OK" then
                m.top.onClick?.callFunc()
                return true
            end if
            return false
        end sub
    </script>
</Component>

使用自定义组件 #

<CustomRoundButton
    text="自定义按钮"
    width="220"
    height="65"
    onClick="onButtonClicked"
/>

• 可在组件中添加Image节点，实现图标+文字的复合按钮样式
• 所有颜色、圆角、尺寸参数均可根据需求调整

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