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

来源：互联网发布：ubuntu terminator 编辑：程序博客网时间：2024/05/29 01:54

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

具体的实现代码如下：

import Material 0.1import QtQuick 2.4import QtQuick.Layouts 1.2import QtQuick.Controls 1.4import QtQuick.Controls.Styles 1.4Window {    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中做同样的事情，鼠标进入代理矩形区和进入关闭按钮时，都会对背景颜色进行改变，从而实现了预期的效果。

0 0