Roku LabelList中HDListItemIconSelectedUrl图片左侧被裁剪如何完整显示？

针对你遇到的LabelList列表项图片左侧被裁剪的问题，可通过以下两种方式解决：

方法一：自定义ListItem组件（推荐） #

默认的LabelList列表项布局可能限制了图标区域的空间，自定义组件能完全控制元素位置和尺寸，避免裁剪：

1. 创建名为CustomListItem.xml的组件文件：

<?xml version="1.0" encoding="utf-8"?>
<component name="CustomListItem" extends="RowListItem">
  <children>
    <!-- 外层容器确保元素排版 -->
    <Group id="ItemContainer" translation="[0,0]">
      <!-- 图标设置固定尺寸，左侧留边避免裁剪 -->
      <Image id="ItemIcon" width="16" height="16" translation="[8, 0]" />
      <!-- 文本与图标保持合适间距，同时居中对齐 -->
      <Label id="ItemLabel" width="220" height="40" translation="[32, 0]" horizontalAlignment="center" />
    </Group>
  </children>
  <script type="text/brightscript">
    <![CDATA[
      sub init()
        // 监听数据字段更新图标和文本
        m.top.observeField("iconSelectedUrl", "updateIcon")
        m.top.observeField("title", "updateLabel")
      end sub

      sub updateIcon()
        m.top.findNode("ItemIcon").uri = m.top.iconSelectedUrl
      end sub

      sub updateLabel()
        m.top.findNode("ItemLabel").text = m.top.title
      end sub
    ]]>
  </script>
</component>

2. 在你的主场景中，将LabelList的itemComponentName指定为这个自定义组件：

<LabelList id="MyLabelList" itemComponentName="CustomListItem" width="300" height="400">
  <content>
    <Array>
      <ContentNode title="选项1" iconSelectedUrl="pkg:/images/your-icon.png" />
      <ContentNode title="选项2" iconSelectedUrl="pkg:/images/another-icon.png" />
    </Array>
  </content>
</LabelList>

方法二：修改默认ListItem模板 #

如果不想自定义组件，可直接在LabelList的itemTemplate里调整图标和文本的布局参数：

<LabelList id="MyLabelList" width="300" height="400">
  <itemTemplate>
    <RowListItem>
      <!-- 给图标设置左侧边距，确保不被容器裁剪 -->
      <Image id="ListItemIcon" width="16" height="16" left="8" />
      <!-- 文本与图标拉开间距，保持居中对齐 -->
      <Label id="ListItemLabel" horizontalAlignment="center" left="32" />
    </RowListItem>
  </itemTemplate>
  <content>
    <Array>
      <ContentNode title="选项1" iconSelectedUrl="pkg:/images/your-icon.png" />
    </Array>
  </content>
</LabelList>

核心要点：默认布局中图标可能紧贴容器左边缘，导致被裁剪，通过给图标添加左侧边距（比如left="8"或translation="[8,0]"），同时调整文本的偏移量，就能让16x16的图片完整显示。

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