Qt5 QML：Loader组件作为参数传入不生效问题求助

问题根源 #

你调用addItem时传入的是redRect.createObject()——这是已实例化的Item对象，但Loader.sourceComponent要求的是Component类型，而非已创建好的实例，所以赋值无效，Loader始终使用默认的绿色矩形。

解决方案1：直接传递Component（推荐） #

调整调用逻辑，传入Component而非实例，让Loader自行处理实例化：

修改CustomSplitView.qml

// CustomSplitView.qml
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14

Pane {
  function addItem(text, contentComponent) {
    splitView.addItem(template.createObject(null, {"headerText": text, "content": contentComponent}))
  }
  Component {
    id: template
    Pane {
      property alias headerText: label.text
      property alias content: loader.sourceComponent
      ColumnLayout { anchors.fill: parent
        Label { id: label }
        Loader {
          id: loader
          Layout.fillWidth: true; Layout.fillHeight: true
          sourceComponent: Rectangle { color: "Green" }
        }
      }
    }
  }
  SplitView { 
    id: splitView
    anchors.fill: parent
  }
}

修改调用代码

// Usage
Pane {
  Component {
    id: redRect
    Rectangle { color: "Red" }
  }
  Column { anchors.fill: parent
    Button {
      text: "add"
      // 直接传Component，无需调用createObject()
      onClicked: customSplitView.addItem("RED", redRect)
    }
    CustomSplitView { id: customSplitView }
  }
}

解决方案2：传递实例，替换Loader为容器 #

如果必须传递已实例化的Item，可去掉Loader，用一个Item作为容器直接承载实例：

修改CustomSplitView.qml

// CustomSplitView.qml
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14

Pane {
  function addItem(text, itemInstance) {
    let newPane = template.createObject(null, {"headerText": text})
    // 将实例添加到内容容器中
    newPane.contentContainer.children = [itemInstance]
    splitView.addItem(newPane)
  }
  Component {
    id: template
    Pane {
      property alias headerText: label.text
      // 用Item作为内容容器
      property Item contentContainer: contentHolder
      ColumnLayout { anchors.fill: parent
        Label { id: label }
        Item {
          id: contentHolder
          Layout.fillWidth: true; Layout.fillHeight: true
        }
      }
    }
  }
  SplitView { 
    id: splitView
    anchors.fill: parent
  }
}

调用代码保持不变

// Usage
Pane {
  Component {
    id: redRect
    Rectangle { color: "Red" }
  }
  Column { anchors.fill: parent
    Button {
      text: "add"
      onClicked: customSplitView.addItem("RED", redRect.createObject())
    }
    CustomSplitView { id: customSplitView }
  }
}

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