QML ListView 和 ListModel 索引

Question

我对 ListModel 和 ListView 有一点问题，特别是关于 ListModel 的移动功能。我将向您展示 SDK 中包含的 DynamicList 示例中的代码 sn-ps，并进行一些修改以进行调试： 代码：

  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/pics/arrow-up.png”时，模型中的一项将向上移动一个位置，现在，在示例中按顺序有四个项：“Apple”- “Banana”-“Cumqat”-“Durian”，如果我在“Banana”上单击“向上”将该项目移动到第一个位置，这是 consol.log 的结果：

在模型 1 移动之前的名称：Banana 移入列表 1 之前的名称：Apple 移入型号 1 后的名称：Apple 移入列表 1 后的名称：Apple

如果我点击 Apple（现在位于第 2 位）将其移动到第 1 位，就会发生这种情况：

搬入模型前的名称 1：Apple 移入列表 1 之前的名称：Apple 移入模型 1 后的名称：香蕉 移入列表 1 后的名称：Apple

所以，首先很明显ListModel的第一个索引是0，而ListView的第一个索引是1，那么很明显模型中的项目已经被移动了，而列表中的项目没有。 现在，这是我的问题：想象“名称”是 TextEdit 的文本，因此 ListView 委托包含一个 TextEdit，它可以由用户编辑。如果我想接受该文本，我知道我可以这样做： 代码：

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

但问题是，在我的 ListView 中，也可以使用 ListModel 的移动功能移动项目，但如果我移动项目并使用前一个周期取“名称”，似乎没有任何改变（与 DynamicList 示例中的完全相同）。 另一方面，如果我使用“名称”：

  myName= myListModel.get(i).name

然后，当我在 TextEdit 中修改文本并尝试使用“名称”时，似乎没有任何变化，

那么，我必须做些什么才能获得一个带有 TextEdit 的 ListView 并可以移动我可以记录任何变化的项目？

我希望我已经清楚了，非常感谢， 贾马尔科

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;
    }
}