RDK LightningJS如何向子组件动态传递数据并实现刷新

1. 支持动态更新的子组件定义 #

import { Lightning } from '@lightningjs/core'

export default class Tile extends Lightning.Component {
  static _template() {
    return {
      w: 200,
      h: 120,
      rect: true,
      color: 0xff1a1a1a,
      Label: {
        x: 10,
        y: 10,
        text: { fontSize: 20, text: '' }
      }
    }
  }

  // 监听传入的data属性变化，自动更新视图
  set data(val) {
    this._data = val
    this.patch({
      Label: { text: val.title },
      color: val.isFocused ? 0xff2563eb : 0xff1a1a1a
    })
  }

  get data() {
    return this._data
  }
}

2. 动态数据版ColumnWithRows实现 #

import { FocusManager } from '@lightningjs/ui-components'
import Tile from './Tile.js'

export default class DynamicColumnRows extends Lightning.Component {
  static _template() {
    return {
      w: 1920,
      h: 1080,
      FocusManager: {
        type: FocusManager,
        direction: 'column',
        // 初始可以为空数组，无需初始化时就传入数据
        items: []
      }
    }
  }

  _init() {
    // 模拟异步接口请求场景，2秒后加载数据
    setTimeout(() => {
      this.loadDynamicData()
    }, 2000)
  }

  loadDynamicData() {
    // 模拟接口返回的行列数据
    const rowDataList = [
      { rowTitle: '推荐内容', tiles: [{ title: '内容1' }, { title: '内容2' }, { title: '内容3' }] },
      { rowTitle: '热门内容', tiles: [{ title: '内容4' }, { title: '内容5' }, { title: '内容6' }] }
    ]

    // 构造行列嵌套的FocusManager结构
    const rowItems = rowDataList.map(row => {
      return {
        type: FocusManager,
        direction: 'row',
        w: 1920,
        h: 140,
        items: row.tiles.map(tile => {
          return {
            type: Tile,
            data: tile
          }
        })
      }
    })

    // 调用patch方法更新FocusManager的子元素，自动触发渲染
    this.tag('FocusManager').patch({
      items: rowItems
    })
  }

  // 增量更新单行数据的方法
  updateSingleRow(rowIndex, newTileList) {
    const targetRow = this.tag('FocusManager').items[rowIndex]
    if(targetRow) {
      targetRow.patch({
        items: newTileList.map(tile => ({
          type: Tile,
          data: tile
        }))
      })
    }
  }

  _getFocused() {
    return this.tag('FocusManager')
  }
}

核心注意点 #

• 所有动态更新都通过patch方法触发，不要直接修改组件的items数组属性，Lightning不会监听原生数组的变化
• 子组件通过自定义属性的setter监听传入数据的变化，收到新值后主动更新内部视图即可
• FocusManager本身支持items的动态覆盖，更新后会自动保留原焦点逻辑，不需要额外重置焦点状态
• 如果是单条Tile数据更新，不需要重刷整个行，直接拿到对应Tile实例调用tile.data = newData即可触发刷新

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