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