QML TableView control add MouseArea Mouse click on the item can not be selected



  • Customize the QML TableView style, add the MouseArea event to the rowDelegate, Mouse click on the item can not be selected.

    Thanks soo much to everyone :-)

    import QtQuick 2.6
    import QtQuick.Controls 2.2 as Control2
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Layouts 1.1
    import QtQuick.Controls.Private 1.0
    
    
    ApplicationWindow {
        id: mainWindow
        width: 1080
        height: 676
        color: "#00000000"
        title: "QML TableView Sample"
        visible: true
    
        ListModel {
            id: fileListModel
            ListElement {
                fileName: "test.txt"
                modifyTime: "2017-10-19"
                fileType: "txt file"
                fileSize: "45627K"
            }
            ListElement {
                fileName: "test.txt"
                modifyTime: "2017-10-19"
                fileType: "txt file"
                fileSize: "45627K"
            }
            ListElement {
                fileName: "test.txt"
                modifyTime: "2017-10-19"
                fileType: "txt file"
                fileSize: "45627K"
            }
        }
    
        TableView {
            id: tableView
            anchors.fill: parent
            sortIndicatorVisible: true//sortEnabled
            selectionMode: SelectionMode.ExtendedSelection
            alternatingRowColors: false
            Keys.enabled: true
            enabled: true
            model: fileListModel
    
            /*! The background color. */
            property color backgroundColor: tableView.backgroundVisible ? "#FFFFFF" : "transparent"
    
            /*! The alternate background color. */
            property color alternateBackgroundColor: "#FFFFFF"
    
    
            style: TableViewStyle {
    
                rowDelegate: Rectangle {
                    id: delegateRect
                    height: 30
                    property color selectedColor: styleData.hasActiveFocus ? "#07c" : "#4DA6FF"
                    color: styleData.selected ? selectedColor :
                                                !styleData.alternate ? tableView.alternateBackgroundColor : tableView.backgroundColor
    
                    Rectangle {
                        id: hoverRect
                        anchors.fill: parent
                        color: "#00000000"
    
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            propagateComposedEvents: true
    
                            onClicked: {
                                //hoverRect.color = "#4DA6FF"
                                //hoverRect.opacity = 0.5
                                mouse.accepted = false
                            }
    
                            onEntered: {
                                hoverRect.color = "#4DA6FF"
                                hoverRect.opacity = 0.1
                                //mouse.accepted = false
                            }
    
                            onExited: {
                                hoverRect.color = "#00000000"
                                hoverRect.opacity = 1.0
                                //mouse.accepted = false
                            }
    
                        }
    
                    }
                }
    
                itemDelegate: Item {
                    id: delegateItem
                    height: Math.max(30, label.implicitHeight * 1.2)
                    property int implicitWidth: label.implicitWidth + 20
    
                    Text {
                        id: label
                        objectName: "label"
                        width: parent.width
                        anchors.leftMargin: 26
                        anchors.left: parent.left
                        anchors.right: parent.right
                        horizontalAlignment: styleData.textAlignment
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.verticalCenterOffset: 1
                        elide: styleData.elideMode
                        text: styleData.value !== undefined ? styleData.value : ""
                        color: styleData.textColor
                        renderType: Text.NativeRendering
                        visible: true
    
                    }
                }
    
            }
    
            TableViewColumn {
                title: qsTr("Name")
                role: "fileName"
                width: 275
            }
    
            TableViewColumn {
                title: qsTr("Modify time")
                role: "modifyTime"
                width: 140
            }
    
            TableViewColumn {
                title: qsTr("Type")
                role: "fileType"
                width: 140
            }
    
            TableViewColumn {
                title: qsTr("Size")
                role: "fileSize"
                width: 80
            }
    
        }
    
    }
    
    
    

    alt text

    0_1508724478214_2.png


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.