listview实现点击选中



Rectangle {

        x:10

        y:20

    width: 200; height: 300

    anchors.rightMargin: 4

    anchors.bottomMargin: 4

    anchors.leftMargin: 4

    anchors.topMargin: 4

    anchors.fill: parent

    ColumnLayout

    {

        //clip: true

        spacing: 2

        anchors.fill: parent

        Rectangle

        {

            //color:"yellow"

            Layout.fillWidth: true

            Layout.fillHeight: true

            RowLayout {

                anchors.fill: parent

                Rectangle

                {

                    Layout.fillWidth: true

                    Layout.fillHeight: true

                    ListView {

                        id:idLogListView

                        focus:true

                        //Keys.enabled: true

                        //highlightRangeMode: ListView.ApplyRange

                        anchors.fill: parent

                        highlight: Rectangle { color: "#00CED1" }

                        model: idListModle

                        delegate: Component

                        {

                        RowLayout {

                            id:idlistElemnet

                            height: 20

                            width: 250

                            spacing: 20

                            Layout.fillWidth: true

                            Rectangle {height: 16

                                width: 16

                                radius: 5

                                color:getListEleHeadColor(type)

                                Text{ anchors.centerIn: parent}

                            }

                            Text { text: time; font.bold: true}

                            Text { text:type }

                            Text { text:descripe; color:"blue" ; Layout.fillWidth: true}

                           //states,transitions主要用于特效的效果

                            states: State {

                                name: "Current"

                                when: idlistElemnet.ListView.isCurrentItem

                                PropertyChanges { target: idlistElemnet; x: 20 }

                            }

                            transitions: Transition {

                                NumberAnimation { properties: "x"; duration: 200 }

                            }

                            MouseArea {

                                anchors.fill: parent

                                  //这里实现的的点击选中

                                onClicked: 

{

idlistElemnet.ListView.view.currentIndex = index

                            getItem(descripe);//这里调用js函数将选定对象的值传给js函数                       

}

                            }

                        }

                    }

                //界面完成时设置listview的值

                    Component.onCompleted:

                    {

                        for(var idx=0;idx<10;idx++)

                        {

                            var newType=parseInt((Math.random(Math.random())*100+1)%3);

                            //idListModle.append( { "descripe": idRootPriv.m_vm.m_str[idx],"time": "2017-1-24"});

                        }

                    }

                }

                ListModel {

                    id:idListModle

                    ListElement {

                        descripe: "项目."

                        time: "2017-1-24"

                    }

                }

            }

            Rectangle

            {

                Layout.fillHeight: true

                // 滚动条

                id: scrollbar

                width: 10;

                height: 200

                color: "#D9D9D9"

                radius: 10

                // 按钮

                Rectangle {

                    id: button

                    x: 0

                    y: idLogListView.visibleArea.yPosition * scrollbar.height

                    width: 10

                    height: idLogListView.visibleArea.heightRatio * scrollbar.height;

                    color: "#979797"

                    radius: 10

                    // 鼠标区域

                    MouseArea {

                        id: mouseArea

                        anchors.fill: button

                        drag.target: button

                        drag.axis: Drag.YAxis

                        drag.minimumY: 0

                        drag.maximumY: scrollbar.height - button.height

                        // 拖动

                        onMouseYChanged: {

                            idLogListView.contentY = button.y / scrollbar.height * idLogListView.contentHeight

                        }

                    }

                }

            }

        }

    }

    Rectangle

    {

        Layout.preferredHeight: 40

        Layout.fillWidth: true

        Layout.minimumHeight:40

    }

}

function getListEleHeadColor(ntype)

{

    switch(ntype)

    {

    case 0:

        return "lightblue"

    case 1:

        return "red";

    case 2:

        return "yellow";

    case 3:

        return "green";

    default:

        return "black";

    }

}

    }

//这里加载的数据。自己定义了一个按钮来调用这个函数将数据加载到listview中

    function add_list_text() {
    for(var i=0;i<14;i++)
    {
        var newType=parseInt((Math.random(Math.random())*100+1)%3);
        idListModle.append( { "descripe": idRootPriv.m_vm.get_m_str(i),"time": "2017-1-24"});
    }
    }