我在使用Loaders加载具有动态模型的动态委托时遇到问题。我可以看到相应模型的委托，但该委托中的数据没有显示。单击按钮时，将错误获取为"ReferenceError:"：未定义名称我在下面发布了完整的例子。如果我遗漏了什么，有人能建议我吗。
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
id: mainWindow
property int value: 0
property variant m_Model: modelData
visible: true
height: 600
width: 700
Row{
id: mainButtons
spacing: 5
anchors.top: parent.top
anchors.left: parent.left
anchors.margins: 6
Rectangle{
id: b1
height: 50
width: 90
border.width: 1
radius: 3
color: "skyblue"
Text{
anchors.centerIn: parent
text: "Button1"
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onClicked:{
listView.model=button1Model
value=1
}
}
}
Rectangle{
id: b2
height: 50
width: 90
border.width: 1
radius: 3
color: "skyblue"
Text{
anchors.centerIn: parent
text: "Button2"
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onClicked: {
listView.model=button2Model
//listView.delegate=b2Delegate
//loader.sourceComponent=b2Delegate
value=2
}
}
}
Rectangle{
id: b3
height: 50
width: 90
border.width: 1
radius: 3
color: "skyblue"
Text{
anchors.centerIn: parent
text: "Button3"
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onClicked: {
listView.model=button3Model
value = 3
}
}
}
}
ListView{
id: listView
anchors.top: mainButtons.bottom
anchors.left:parent.left
anchors.margins: 3
height: 500
width: 600
model: modelData
delegate: Component{
id: loader
Loader{
id: loader
sourceComponent: {
switch(value)
{
case 1: {
return b1Delegate
}
case 2:{
return b2Delegate
}
case 3:{
return b3Delegate
}
default:
return listDelegate
}
}
}
}
}
Component{
id: listDelegate
Row{
spacing: 5
Rectangle{
width: 100
height: 50
border.width: 1
Text{
anchors.centerIn: parent
text: name
}
}
Rectangle{
width: 100
height: 50
radius: 50
border.width: 1
Text{
anchors.centerIn: parent
text: number
}
}
}
}
ListModel{
id: modelData
ListElement{
name: "abc"
number: "1"
}
ListElement{
name: "def"
number: "2"
}
ListElement{
name: "ghi"
number: "3"
}
ListElement{
name: "jkl"
number: "4"
}
}
Component{
id: b1Delegate
Row{
spacing: 5
anchors.margins: 5
Rectangle{
height: 50
width: 100
border.width: 1
Text{
anchors.centerIn: parent
text: SerialNO
}
}
Rectangle{
height: 50
width: 100
border.width: 1
Text{
anchors.centerIn: parent
text: Name
}
}
Rectangle{
height: 50
width: 100
border.width: 1
Text{
anchors.centerIn: parent
text: Marks
}
}
}
}
ListModel{
id: button1Model
ListElement{
SerialNO: "1"
Name: "Mathametics"
Marks: "100"
}
ListElement{
SerialNO: "2"
Name: "Science"
Marks: "75"
}
ListElement{
SerialNO: "3"
Name: "Social"
Marks: "80"
}
ListElement{
SerialNO: "4"
Name: "Hindi"
Marks: "80"
}
ListElement{
SerialNO: "5"
Name: "English"
Marks: "75"
}
}
ListModel{
id: button2Model
ListElement{
Name: "ABC"
}
ListElement{
Name: "XYZ"
}
ListElement{
Name: "PQR"
}
ListElement{
Name: "IJK"
}
}
ListModel{
id: button3Model
ListElement{
University: "AAAAAA"
Address: "111111"
}
ListElement{
University: "BBBBBB"
Address: "111111"
}
ListElement{
University: "CCCCCC"
Address: "111111"
}
ListElement{
University: "DDDDDD"
Address: "111111"
}
}
Component
{
id: b2Delegate
Row{
spacing: 5
anchors.margins: 5
Rectangle{
height: 50
width: 100
border.width: 1
Text{
anchors.centerIn: parent
text: Name
}
}
}
}
Component
{
id: b3Delegate
Row{
spacing: 5
anchors.margins: 5
Rectangle{
height: 50
width: 100
border.width: 1
Text{
anchors.centerIn: parent
text: University
}
}
Rectangle{
height: 50
width: 100
border.width: 1
Text{
anchors.centerIn: parent
text: Address
}
}
}
}
}
我认为在设置delegate的同时使用Loader不是一个好主意。尝试更改：
delegate: Component{
id: loader
Loader{
id: loader
sourceComponent: {
switch(value)
{
case 1: {
return b1Delegate
}
case 2:{
return b2Delegate
}
case 3:{
return b3Delegate
}
default:
return listDelegate
}
}
}
}
对此：
delegate: {
switch(value)
{
case 1: {
return b1Delegate
}
case 2:{
return b2Delegate
}
case 3:{
return b3Delegate
}
default:
return listDelegate
}
}
如果这对您没有帮助，请编辑您的答案并附上完整的示例代码。您提供的示例包含错误，我不知道其中哪些是因为示例太短而发生的，哪些实际上是错误。
模型中的数据需要对委托的作用域可见。你可以用类似于Qt Quick Controls的方式做到这一点：
delegate: Loader {
property string nameData: name
property int numberData: number
sourceComponent: {
switch (value) {
case 1:
return b1Delegate
case 2:
return b2Delegate
case 3:
return b3Delegate
default:
return listDelegate
}
}
}
然后，listDelegate将变为：
Component {
id: listDelegate
Row {
spacing: 5
Rectangle {
width: 100
height: 50
border.width: 1
Text {
anchors.centerIn: parent
text: nameData
}
}
Rectangle {
width: 100
height: 50
radius: 50
border.width: 1
Text {
anchors.centerIn: parent
text: numberData
}
}
}
}
以下是正确的代码（我简化了其中的一些）：
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
id: mainWindow
property int value: 0
property variant m_Model: modelData
visible: true
height: 600
width: 700
Row {
id: mainButtons
spacing: 5
anchors.top: parent.top
anchors.left: parent.left
anchors.margins: 6
Rectangle {
id: b1
height: 50
width: 90
border.width: 1
radius: 3
color: "skyblue"
Text {
anchors.centerIn: parent
text: "Button1"
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: {
listView.model = button1Model
value = 1
}
}
}
Rectangle {
id: b2
height: 50
width: 90
border.width: 1
radius: 3
color: "skyblue"
Text {
anchors.centerIn: parent
text: "Button2"
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: {
listView.model = button2Model
//listView.delegate=b2Delegate
//loader.sourceComponent=b2Delegate
value = 2
}
}
}
Rectangle {
id: b3
height: 50
width: 90
border.width: 1
radius: 3
color: "skyblue"
Text {
anchors.centerIn: parent
text: "Button3"
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: {
listView.model = button3Model
value = 3
}
}
}
}
ListView {
id: listView
anchors.top: mainButtons.bottom
anchors.left: parent.left
anchors.margins: 3
height: 500
width: 600
model: modelData
delegate: Loader {
property string nameData: name
property int numberData: number
sourceComponent: {
switch (value) {
case 1:
return b1Delegate
case 2:
return b2Delegate
case 3:
return b3Delegate
default:
return listDelegate
}
}
}
}
Component {
id: listDelegate
Row {
spacing: 5
Rectangle {
width: 100
height: 50
border.width: 1
Text {
anchors.centerIn: parent
text: nameData
}
}
Rectangle {
width: 100
height: 50
radius: 50
border.width: 1
Text {
anchors.centerIn: parent
text: numberData
}
}
}
}
ListModel {
id: modelData
ListElement {
name: "abc"
number: "1"
}
ListElement {
name: "def"
number: "2"
}
ListElement {
name: "ghi"
number: "3"
}
ListElement {
name: "jkl"
number: "4"
}
}
Component {
id: b1Delegate
Row {
spacing: 5
anchors.margins: 5
Rectangle {
height: 50
width: 100
border.width: 1
Text {
anchors.centerIn: parent
text: SerialNO
}
}
Rectangle {
height: 50
width: 100
border.width: 1
Text {
anchors.centerIn: parent
text: Name
}
}
Rectangle {
height: 50
width: 100
border.width: 1
Text {
anchors.centerIn: parent
text: Marks
}
}
}
}
ListModel {
id: button1Model
ListElement {
SerialNO: "1"
Name: "Mathametics"
Marks: "100"
}
ListElement {
SerialNO: "2"
Name: "Science"
Marks: "75"
}
ListElement {
SerialNO: "3"
Name: "Social"
Marks: "80"
}
ListElement {
SerialNO: "4"
Name: "Hindi"
Marks: "80"
}
ListElement {
SerialNO: "5"
Name: "English"
Marks: "75"
}
}
ListModel {
id: button2Model
ListElement {
Name: "ABC"
}
ListElement {
Name: "XYZ"
}
ListElement {
Name: "PQR"
}
ListElement {
Name: "IJK"
}
}
ListModel {
id: button3Model
ListElement {
University: "AAAAAA"
Address: "111111"
}
ListElement {
University: "BBBBBB"
Address: "111111"
}
ListElement {
University: "CCCCCC"
Address: "111111"
}
ListElement {
University: "DDDDDD"
Address: "111111"
}
}
Component {
id: b2Delegate
Row {
spacing: 5
anchors.margins: 5
Rectangle {
height: 50
width: 100
border.width: 1
Text {
anchors.centerIn: parent
text: Name
}
}
}
}
Component {
id: b3Delegate
Row {
spacing: 5
anchors.margins: 5
Rectangle {
height: 50
width: 100
border.width: 1
Text {
anchors.centerIn: parent
text: University
}
}
Rectangle {
height: 50
width: 100
border.width: 1
Text {
anchors.centerIn: parent
text: Address
}
}
}
}
}