QML ListView 多选

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

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

，

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

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

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

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


}

Answer 4

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