QML ListView和ListModel索引

Question

我对ListModel和ListView有一点问题，特别是关于ListModel的移动功能。我将向您展示SDK中包含的DynamicList示例的代码片段，只是为了调试它而做了一些修改：

  Item {     
   property alias nameText:  nameTextBox.text
        id: delegateItem
        width: listView.width; height: 55
        clip: true
        Row {
            anchors.verticalCenter: parent.verticalCenter
            spacing: 10
            Column {
                Image {
                    source: "content/pics/arrow-up.png"  
                    MouseArea {
                        anchors.fill: parent;

                        onClicked: {

                            var voice
                            var nameInModel
                            var nameInView

                            voice = listView.contentItem.children[1]
                            nameInModel = fruitModel.get(1).name

                            nameInView = voice.nameText

                            console.log("name before move in model at 1: "+nameInModel)
                            console.log("name before move in list at 1: "+nameInView)

                             fruitModel.move(index, index-1, 1)

                            voice = listView.contentItem.children[1]

                            nameInView = voice.nameText

                            nameInModel = fruitModel.get(1).name
                            console.log("name after move in model at 1: "+nameInModel)
                            console.log("name after move in list at 1: "+nameInView)

                        }
                    }
                }
....

因此，当单击图像“content/ image /arrow-up.png”时，模型中的一个项目被向上移动了一个位置，现在，在示例中有四个项目按顺序排列：“苹果”-“香蕉”-“Cumqat”-“榴莲”，这是如果我单击“香蕉”上的“向上”将该项目移动到第一个位置时的consol.log结果：

移入模型前的名称为1:移入列表前的香蕉名称1:移入模型后的苹果名称1:移入列表1后的苹果名称1:苹果

这是如果我点击Apple (现在是第二位)把它移到第一位会发生什么：

移入模型前的名称为1:移入列表前的苹果名称为1:移入模型后的苹果名称为1:移入列表后的香蕉名称为1:苹果

因此，首先很明显，ListModel的第一个索引是0，而ListView的第一个索引是1，那么很明显，模型中的项已经移动，但列表中的项没有移动。现在，这是我的问题:假设"name“是一个TextEdit的文本，那么ListView委托包含一个TextEdit，用户可以对其进行编辑。如果我想获取文本，我知道我可以这样做: Code：

for (var i = 0; i <= myListView.count; i++){
     myItem= myListView.contentItem.children[i]
     myName = myListView.name

但问题是，在我的ListView中，也可以使用ListModel的move函数来移动项目，但如果我移动项目，并使用前一个循环来获取“名称”，似乎什么都没有改变(与DynamicList示例中完全一样)。另一方面，如果我使用以下命令获取"name“：

  myName= myListModel.get(i).name

然后，当我修改TextEdit中的文本并尝试获取"name“时，似乎没有任何变化。

那么，我必须做什么才能用TextEdit获得一个ListView，并有可能移动项目，我可以记录其中的任何更改？

我希望我已经说清楚了，非常感谢，Giammarco

Answer 1

您这样做是错误的，只需使用以下命令：

import QtQuick 2.0;

Rectangle {
    width: 400;
    height: 300;

    ListView {
        id: listTest;
        clip: true;
        currentIndex: -1;
        model: ListModel {
            id: modelTest;

            ListElement { name: "Banana"; }
            ListElement { name: "Apple";  }
            ListElement { name: "Orange"; }
            ListElement { name: "Pear";   }
        }
        delegate: Item {
            id: item;
            height: 60;
            anchors {
                left: parent.left;
                right: parent.right;
            }

            property bool isCurrent : (model.index === listTest.currentIndex);
            onIsCurrentChanged: {
                if (isCurrent) {
                    input.forceActiveFocus ();
                }
                else {
                    input.focus = false;
                }
            }

            Text {
                id: label;
                font.pixelSize: 14;
                text: model.name;
                visible: !item.isCurrent;
                anchors {
                    left: parent.left;
                    right: btnUp.left;
                    margins: 20;
                    verticalCenter: parent.verticalCenter;
                }
            }
            TextInput {
                id: input;
                text: model.name;
                visible: item.isCurrent;
                onTextChanged: { modelTest.setProperty (model.index, "name", text); }
                anchors {
                    left: parent.left;
                    right: btnUp.left;
                    margins: 20;
                    verticalCenter: parent.verticalCenter;
                }

                Rectangle {
                    z: -1;
                    radius: 5;
                    antialiasing: true;
                    border {
                        width: 1;
                        color: "blue";
                    }
                    anchors {
                        fill: parent;
                        margins: -5;
                    }
                }
            }
            MouseArea {
                id: clicker;
                anchors.fill: parent;
                visible: !item.isCurrent;
                onClicked: { listTest.currentIndex = model.index; }
            }
            MouseArea {
                id: btnUp;
                width: height;
                anchors {
                    top: parent.top;
                    right: parent.right;
                    bottom: parent.verticalCenter;
                }
                onClicked: {
                    if (model.index > 0) {
                        modelTest.move (model.index, model.index -1, 1);
                    }
                }

                Text {
                    text: "V";
                    color: "gray";
                    rotation: -180;
                    anchors.centerIn: parent;
                }
            }
            MouseArea {
                id: btnDown;
                width: height;
                anchors {
                    top: parent.verticalCenter;
                    right: parent.right;
                    bottom: parent.bottom;
                }
                onClicked: {
                    if (model.index < modelTest.count -1) {
                        modelTest.move (model.index, model.index +1, 1);
                    }
                }

                Text {
                    text: "V";
                    color: "gray";
                    anchors.centerIn: parent;
                }
            }
            Rectangle {
                height: 1;
                color: "lightgray";
                anchors {
                    left: parent.left;
                    right: parent.right;
                    bottom: parent.bottom;
                }
            }
        }
        anchors.fill: parent;
    }
}