ScrollViewStyle and ListView Issue



  • Hi there,
    I ran into a styling issue when designing a ListView in a ScrollView:
    I have a border and a title field in the color of the border, it looks like the border is seamlessly extended. The handle of the scrollview is in the same color and slides along the border.
    The problem now is that the listview is not as wide as the scrollview, and so the highlighgt delegate doesn't touch the right side of the border, it misses about 3 pixels.
    here is the full code:

    import QtQuick 2.0
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Layouts 1.1
    import QtQuick.Dialogs 1.2
    
    Item {
        id: clist
    
        property alias model: list.model
        property alias title: titleText.text
        property bool selectable: true
    
        Layout.minimumWidth: 100
        Layout.minimumHeight: 100
        Layout.preferredWidth: 180
        Layout.preferredHeight: 200
        Layout.fillWidth: true
        Layout.fillHeight: true
    
        Rectangle {
            id: titleRect
            width: parent.width
            height: title == "" ? 0 : 25
            color: "#333333"
    
            Text {
                id: titleText
                anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                color: "#f0f0f0"
                font.bold: true
            }
        }
    
        Rectangle {
            anchors.top: titleRect.bottom
            width: parent.width
            anchors.bottom: parent.bottom
    
            border.color: "#333333"
            border.width: 1
    
            ScrollView {
                anchors.fill: parent
                anchors.margins: 1
                anchors.rightMargin: 4
    
                style: ScrollViewStyle {
                    scrollBarBackground: Rectangle {
                        width: 0
                        height: 0
                    }
                    incrementControl: Rectangle {
                        width: 0
                        height: 0
                    }
                    decrementControl: Rectangle {
                        width: 0
                        height: 0
                    }
                    handle: Rectangle {
                        implicitWidth: 5
                        color: "#333333"
                    }
                }
    
                ListView {
                    id: list
                    //anchors.fill: parent
                    width: parent.width + 4
                    height: parent.height
    
                    highlightMoveDuration: 200
                    highlightMoveVelocity: -1
                    currentIndex: selectable ? 0 : -1
    
                    delegate: Item {
                        width: parent.width
                        height: 25
    
                        Text {
                            anchors.fill: parent
                            anchors.leftMargin: 10
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignLeft
                            text: value
                            color: "#222222"
                        }
    
                        MouseArea {
                            id: mouse_area1
                            z: 1
                            hoverEnabled: false
                            anchors.fill: parent
    
                            onClicked: {
                                list.currentIndex = selectable ? index : -1
                            }
                        }
                    }
    
                    highlight: Rectangle {
                        width: parent.width
                        height: 25
                        color: "#cc0000"
    
                        Rectangle {
                            width: parent.width - 4
                            height: parent.height
                            anchors.right: parent.right
                            color: "#e0e0e0"
                        }
                    }
                }
            }
        }
    }
    

    And besides the width of the highlight, why doesn't work the scroll handle with the mouse, but just with the scroll wheel?

    Thanks


Log in to reply
 

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