从父组件访问并修改子组件节点的技术问题求助

问题根源 #

1. 错误访问子组件字段：父组件中直接通过m.zoomRowList.detailsTest访问子组件字段无效，ZoomRowList的子项是动态实例化的，列表组件本身没有该字段，必须通过获取具体焦点子项操作。
2. 颜色值格式错误：代码中"0x0xE55539"是重复的十六进制前缀，正确格式应为"0xE55539"。
3. 焦点逻辑错误：focusChanged方法中尝试给ZoomRowList设置焦点后修改不存在的字段，逻辑完全错误。
4. rowItemFocused访问风险：rowItemFocused字段可能为invalid，直接访问rowItemFocused[0]会抛出无效表达式错误。

修复步骤 #

1. 修正子组件定义 #

调整字段类型为字符串（颜色值为字符串类型），并新增内部焦点监听逻辑：

<component name="SimpleGridItem" extends="Group">

<interface>
  <field id="width" type="float" alias="itemPoster.width" />
  <field id="height" type="float" alias="itemPoster.height" /> 
  <!-- 修正字段类型为string，绑定矩形颜色属性 -->
  <field id="detailsColor" type="string" alias="details.color" defaultValue="0x373B3E"/> 
  <field id="itemContent" type="node" onChange="itemContentChanged"/> 
</interface>

<script type="text/brightscript" >
<![CDATA[
    function itemContentChanged()
        m.itemPoster.uri = m.top.itemContent.HDPOSTERURL
    end function

    function init()
        m.itemPoster = m.top.findNode("itemPoster")
        // 子组件内部监听自身焦点变化，自动切换颜色
        m.top.observeField("hasFocus", "onFocusChanged")
    end function

    function onFocusChanged()
        if m.top.hasFocus() then
            m.top.detailsColor = "0xE55539"
        else
            m.top.detailsColor = "0x373B3E"
        end if
    end function
]]>
</script>

<children>
<Poster id="itemPoster" />
<Rectangle 
  id="details"
  width="575"
  height="80"
  color="0x373B3E"
>
  <LayoutGroup
    vertAlignment="center"
    horizAlignment="center"
    translation="[80, 40]"
  >
    <Label
      id="title"
      text="lets go"
      width="364" 
      horizAlign="center"
      wrap="true"
      lineSpacing="-2" 
    />
  </LayoutGroup>
</Rectangle>
</children>

</component>

2. 修正父组件逻辑 #

修复焦点项获取方式，增加空值判断，移除无效逻辑：

<component name="ZoomRowListTestScene" extends="Scene">

<script type="text/brightscript" >
<![CDATA[
    function init()
        print "in ZoomRowListTestScene init()"
        
        m.zoomRowList = m.top.findNode("theZoomRowList")
        m.zoomRowList.translation = [193, 110]

        m.zoomRowList.observeField("scrollingStatus", "scrollingStatusChanged")
        m.zoomRowList.observeField("rowItemFocused", "rowItemFocusedChanged")
        m.zoomRowList.observeField("rowFocused", "rowFocusedChanged")

        m.scrollingStatusLabel = m.top.findNode("scrollingStatusLabel")
        m.rowItemFocusedLabel = m.top.findNode("rowItemFocusedLabel")
        m.rowFocusedLabel = m.top.findNode("rowFocusedLabel")

        m.top.visible = true

        m.readerTask = createObject("roSGNode", "RowListContentTask")
        m.readerTask.observeField("content", "gotContent")
        m.readerTask.control = "RUN"

        m.zoomRowList.visible = false
        m.zoomRowList.setFocus(true)
    end function

    function gotContent()
        if m.readerTask.content=invalid
            print "invalid readerTask.content"
        else
            m.zoomRowList.content = m.readerTask.content
            m.zoomRowList.visible = true
        end if
    end function

    function scrollingStatusChanged()
        m.scrollingStatusLabel.text = "scrollingStatus is: " + m.zoomRowList.scrollingStatus.toStr()
    end function

    function rowItemFocusedChanged()
        // 先判断rowItemFocused是否有效
        if isValid(m.zoomRowList.rowItemFocused) and m.zoomRowList.rowItemFocused.count() = 2 then
            m.rowItemFocusedLabel.text = "rowItemFocused is: " + m.zoomRowList.rowItemFocused[0].toStr() + " " + m.zoomRowList.rowItemFocused[1].toStr()
            
            // 获取焦点对应的子项组件
            focusedItem = m.zoomRowList.getRowItem(m.zoomRowList.rowItemFocused[0], m.zoomRowList.rowItemFocused[1])
            if isValid(focusedItem) then
                focusedItem.detailsColor = "0xE55539"
            end if
        else
            m.rowItemFocusedLabel.text = "rowItemFocused: invalid"
        end if
    end function

    function rowFocusedChanged()
        m.rowFocusedLabel.text = "rowFocused is: " + m.zoomRowList.rowFocused.toStr()
    end function
]]>
</script>

<children>
<ZoomRowList 
    id="theZoomRowList"
    itemComponentName="SimpleGridItem"
/>
<Label id="scrollingStatusLabel" text="scrollingStatus: false" translation="[100,20]"/>
<Label id="rowItemFocusedLabel" text="rowItemFocused: 0, 0" translation="[500,20]" />
<Label id="rowFocusedLabel" text="rowFocused: 0" translation="[900, 20]"/>
</children>

</component>

关键修复点说明 #

• 子组件内部处理焦点：通过监听自身hasFocus字段自动切换颜色，逻辑独立清晰，无需父组件额外干预。
• 正确获取焦点子项：使用getRowItem(rowIdx, itemIdx)方法获取ZoomRowList中的具体子项，避免直接访问不存在的字段。
• 颜色值格式修正：去掉重复的0x前缀，使用标准十六进制颜色字符串。
• 空值安全判断：在访问rowItemFocused前先校验有效性，避免无效表达式错误。

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