QML ListView多选

Question

如何在QML ListView中选择一些元素并将其索引发送到C ++代码？

Answer 1

执行类似的操作：如果单击某个元素，则选择其属性（或者您调用它），并在委托中设置如果selected为true，则应该采用不同的格式。另外，将其添加到某个列表中，以便使用它。

Answer 2

我很确定没有办法让QML ListView可以多选。 Qt Declarative专注于触摸屏使用，并且没有有意义的方法在纯触摸UI中进行多选。

Answer 3

您可以尝试获取ListItem的数据并在奇数点击时将其存储到数组中，并在偶数点击时从数组中删除ListItem的数据。可能是一个简单的锻炼，而不是创建像项目一样的复选框列表。

Answer 4

我遇到了同样的问题，我发现实现它的最佳方法是为listview创建一个新角色。假设它是名字并被选中。您需要同时使用onCurrentIndexChanged和onClicked，因为如果滚动，这将更改项目，但不是单击。在这两种情况下，都可以将选择的角色更改为true，或者根据需要进行调整，这可能是因为您不需要滚动选择，因此仅使用onClicked。单击后，您可以将所选角色更改为true

onCurrentIndexChanged:
{
mListModel.append({"firstName": newEntry,"selected":true})
}

和

onClicked:
{
mListModel.append({"firstName": newEntry,"selected":true})
}

然后您可以在修饰符中使用突出显示，这将根据所选状态更改颜色。

这是经过测试可以正常工作的完整代码

//copyright: Dr. Sherif Omran
//licence: LPGL (not for commercial use)

import QtQuick 2.12
import QtQuick.Layouts 1.12

Item {
    property string addnewitem:""
    property int removeitemindex: -1
    property string appenditemstring: ""
    property int appenditemindx:-1
    property int fontpoint: 20
    property int radiuspoint: 14
    property int spacingvalue: 0
    property string delegate_color:"beige"
    property string delegate_border_color:"yellowgreen"
    property string highlight_color:"deeppink"
    signal selectedvalueSignal (string iTemstring, string stateval)
    property string sv: ""
    property int indexcopy:0
    id:lstmodelitem
    width: parent.width
    height: parent.height



    ListModel {
        id : mListModel

        //        ListElement {
        //            firstName : "John"
        //        }


    }
    ColumnLayout {
        anchors.fill: parent
        ListView{
            id : mListViewId
            model:mListModel
            delegate :delegateId
            Layout.fillWidth : true
            Layout.fillHeight: true
            clip: true


            snapMode: ListView.SnapToItem //this stops the view at the boundary
            spacing: spacingvalue

            highlight: Rectangle
            {
                id: highlightid
                width: parent.width
                color: mListModel.selected==="true"?"blue":highlight_color
                border.color: "beige"
                z:3
                opacity: 0.2

            }
            highlightRangeMode: ListView.StrictlyEnforceRange
            highlightFollowsCurrentItem:true
            onCurrentIndexChanged:
            {
                console.log("olistdynamic Indexchanged" + currentIndex)
                mListViewId.currentIndex=currentIndex
                lstmodelitem.selectedvalueSignal(currentIndex, mListModel.selected)
                indexcopy=currentIndex

            }


        }
    }

    function getindex()
    {
        console.log("current index = " + indexcopy)
        return mListViewId.currentIndex
    }

    function setindex(index)
    {
        //console.log("olistdynamic set index"+index)
        mListViewId.currentIndex=index
    }

    function add2Item(newEntry,statev){
        console.log("added item with value = " + newEntry + "state " + statev)
        mListModel.append({"firstName": newEntry,"selected":statev})
    }


    function deleteItem(index){
        mListModel.remove(index,1)
    }

    function appendIdem(index,valueEntry,newselectedsate)
    {
        console.log("append item")
        mListModel.set(index,{"firstName": valueEntry,"selected":newselectedsate})
    }

    Component {
        id : delegateId
        Rectangle {
            id : rectangleId
            width : parent.width  // Remember to specify these sizes or you'll have problems
            height: textId.implicitHeight*1.2
            color: selected==="true"?"blue":delegate_color
            border.color: delegate_border_color
            radius: radiuspoint

            Text {
                id : textId
                anchors.centerIn: parent
                text : firstName
                font.pointSize: fontpoint
            }


            MouseArea {
                anchors.fill: parent
                onClicked: {
                    lstmodelitem.selectedvalueSignal(mListModel.firstName,mListModel.selected)
                    mListViewId.currentIndex=index
                    console.log("current index = " + index)
                    indexcopy=index
                    appendIdem(index,firstName,"true")

                }

                onClipChanged:
                {
                    //console.log("a")
                }





            }

        }
    }


    //if the item has been changed from null to text
    onAddnewitemChanged: {
        console.log("added item" + addnewitem)
        add2Item(addnewitem)
    }
    //remove item with index
    onRemoveitemindexChanged: {
        console.log("remove item")
        deleteItem(removeitemindex)
    }

    //to change the item, change the index first then the string
    onAppenditemstringChanged: {
        appendIdem(appenditemindx,appenditemstring)
    }


}