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/pics/arrow-up.png"时,模型中的一个项目向上移动一个位置,现在,在示例中按顺序有四个项目:"Apple" - "Banana" - "Cumqat" - "榴莲",这是consol.log的结果,如果我点击"香蕉"上的"向上"将该项目移动到第一个位置:

在模型中移动前的名称1:在列表中移动前的香蕉名称1:在模型中移动后的Apple名称1:在列表中移动后的Apple名称1:Apple

如果我点击Apple(现在位于第二位)将其移动到第一个位置会发生这种情况:

在模型中移动前的名称为1:在列表中移动前的Apple名称为1:在模型中移动后的Apple名称为1:移动到列表中的香蕉名称为1:Apple

因此,首先很明显ListModel的第一个索引是0而ListView的第一个索引是1,那么很明显模型中的项已被移动但列表中的项没有.现在,这是我的问题:想象一下"name"是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并且可以移动我可以记录任何变换的项目？

我希望我很清楚,非常感谢,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;
    }
}