QML中ListView配合ScrollView实现列表功能

        ListView在QML界面开发中主要用于列表的显示，往往配合ScrollView使用，ScrollView主要作用是给ListView增加右侧滚动条功能，用于ListView显示不下时，进行滚动。

        具体的实现代码如下：

import Material 0.1
import QtQuick 2.4
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    property int dpi: 1
    property string name:"姓名"
    width : 300 *dpi
    height: 300 * dpi

    ListModel {
        id: listModel
        ListElement { name: "Apple" }
        ListElement { name: "Orange" }
        ListElement { name: "Banana" }
        ListElement {name: "Computer1"}
        ListElement {name: "Computer2"}
        ListElement {name: "Computer3"}
        ListElement {name: "Computer4"}
        ListElement {name: "Computer5"}
        ListElement {name: "Computer6"}
        ListElement {name: "Computer7"}
        ListElement {name: "Computer8"}
    }

    ScrollView {
        anchors.fill: parent
        ListView {
            id:left_list

            model:listModel

            clip:true
            orientation:  ListView.Vertical
            snapMode   :  ListView.SnapToItem       //停靠在列表的最开始
            cacheBuffer:  20
            anchors.fill: parent

            delegate: Rectangle{
                id:delegate_list
                // color: "red"
                height: 40*dpi
                width: 300*dpi
                signal signalShowMenu(var id,int x,int y)

                //高亮
                MouseArea{
                    id:mouse_delegate

                    acceptedButtons: Qt.RightButton|Qt.LeftButton
                    hoverEnabled: true
                    propagateComposedEvents: true
                    enabled:true
                    anchors.fill: parent
                    onEntered:{
                        delegate_list.color = "#DCDCDC"
                        btn_del.visible     = true
                        //  console.log("in")
                    }
                    onExited:{
                        delegate_list.color = "white"
                        btn_del.visible     = false
                        //  console.log("out")
                    }
                    onClicked: {
                        mouse.accepted = false;
                        console.log("item click.");
                    }
                    onDoubleClicked: {
                        mouse.accepted = false;
                        console.log("item double click.");
                    }
                }
                RowLayout{

                    spacing: 20 *dpi

                    anchors{
                        left: parent.left
                        leftMargin: 12*dpi
                        right: parent.right
                        rightMargin: 12*dpi
                    }
                    //用于将该行显示在矩形垂直居中
                    anchors.verticalCenter: parent.verticalCenter

                    Label{
                        id:left_list_user

                        anchors {
                            leftMargin: 12*dpi
                            left: left_list_photo.right
                        }

                        text:name
                        color:"#333333"
                        font.pixelSize: 15 * dpi
                        font.family: qsTr("微软雅黑")
                    }


                    //删除按钮
                    Button{
                        id:btn_del

                        anchors.right: parent.right
                        anchors.rightMargin: 15*dpi
                        iconSource:"./image/del.png"
                        width   : 20*dpi
                        height  : width
                        visible:false
                        enabled:true

                        style  : ButtonStyle{
                            background:Image {
                                width: sourceSize.width * dpi
                                height: sourceSize.height * dpi
                                source:control.iconSource
                            }
                            label:Item {}
                        }
                        onHoveredChanged: {
                            hovered ? delegate_list.color = "#DCDCDC" : delegate_list.color = "white"
                            hovered ? btn_del.visible = true : btn_del.visible = true
                        }

                        onClicked: {
                            console.log("del item")
                        }
                    }
                }
            }
        }
    }
}

在如上的代码中，鼠标的进入和退出某个区域，都要进行相应的界面变换，因此，会将鼠标区域的hoverEnabled: true，这样才能接受onEntered和onExited事件，同事，如果要进行鼠标事件的传输，即上层接受到鼠标的点击或双击时，他的父控件也想对鼠标事件进行相应的处理，则要在单击或双击事件中设置mouse.accepted = false;这样，鼠标事件就可以层层传递下去。
        另外，如果两个MouseArea区域重合，则上层的MouseArea会覆盖下层的事件，所以，如果在上面的Button里面也设置了MouseArea，则会覆盖Rectangle里面的MouseArea，导致出了按钮区域后，矩形框不能处于选中状态，因此可以考虑Button的hovered属性，该属性是一个只读属性，可以监测他的改变状态，如下：

onHoveredChanged: {
           hovered ? delegate_list.color = "#DCDCDC" : delegate_list.color = "white"
           hovered ? btn_del.visible = true : btn_del.visible = true
                  }

然后对鼠标进入和退出时做相应的处理，其做的事情和onEntered与onExited中做同样的事情，鼠标进入代理矩形区和进入关闭按钮时，都会对背景颜色进行改变，从而实现了预期的效果。