QML 列表视图和列表模型索引

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)
                        }
                    }
                }
....

因此，当单击图像"内容/图片/向上箭头.png"时，模型中的一个项目将向上移动一个位置，现在，在示例中，依次有四个项目："苹果"-"香蕉"-"Cumqat"-"榴莲"，这是我在"香蕉"上单击"向上"将该项目移动到第一个位置的结果.log这是安慰的结果：

1 岁搬入模型前的名称：香蕉移入列表前的名称 1：苹果1 搬入模型后的名称：苹果移入列表 1 后的名称：苹果

如果我单击Apple(现在位于第二位(将其移动到第1位，就会发生这种情况：

1 岁搬入模型前的名称：苹果移入列表前的名称 1：苹果1 岁时搬入模型后的名称：香蕉移入列表 1 后的名称：苹果

因此，首先很明显，ListModel 的第一个索引是 0，而 ListView 的第一个索引是 1，那么很明显模型中的项目已被移动，但列表中的项目没有。现在，这是我的问题：假设"name"是文本编辑的文本，因此 ListView 委托包含一个文本编辑，并且可以由用户编辑。如果我想接受该文本，我知道我可以这样做：法典：

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

但问题是，在我的 ListView 中，还可以使用 ListModel 的移动功能移动项目，但是如果我移动项目并使用上一个循环来获取"名称"，则似乎没有任何变化(与 DynamicList 示例中完全相同(。另一方面，如果我使用以下"名称"：

  myName= myListModel.get(i).name

然后，当我修改文本编辑中的文本并尝试使用"名称"时，似乎没有任何变化，

那么，我必须做什么才能获得带有文本编辑的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;
    }
}