我正面临使用Loaders加载动态模型动态委托的问题。我能够看到相应模型的委托,但该委托中的数据未显示。单击按钮时,将错误设置为“ReferenceError:”:name未定义“ 我在下面发布了完整的例子。任何人都可以建议我是否遗漏任何东西。
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
}
}
}
}
}
答案 0 :(得分:1)
我认为在设置Loader
时使用delegate
并不是一个好主意。尝试更改此内容:
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
}
}
如果这对您没有帮助,请编辑您的答案并附上完整的示例代码。您提供的示例包含错误,我不知道由于示例太短而发生了哪些错误,而且实际上是错误。
答案 1 :(得分:0)
需要使模型中的数据对委托的范围可见。您可以在similar way as Qt Quick Controls does it:
中执行此操作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
}
}
}
}
}