Flickable.clip interferes with margin setting
-
Hi all -
I need to create a display with this general structure:
import QtQuick import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window Window { id: mainWindow width: 640 height: 480 visible: true Pane { id: pane anchors.fill: parent padding: 8 background: Rectangle { color: 'pink' } Flickable { id: flickable height: pane.availableHeight width: pane.width clip: true ColumnLayout { id: columnLayout anchors.fill: parent Label { text: "I want this text to respect the padding" } // I want the rectangle below to ignore the padding. Rectangle { implicitHeight: 1 implicitWidth: pane.width Layout.leftMargin: pane.leftPadding * (-1) // doesn't work with clipping enabled. color: 'black' } } } } }
My ColumnLayout will have several entries with text, radio buttons, and other stuff. All of these must be contained within the available width of the Pane. BUT: the customer also wants separator lines that span the entire Pane (ignoring padding). When I enable clipping on my Flickable, this doesn't work. (I do need clipping for the vertical containment.)
I can set the Pane's padding to 0 and individually set margins on all the stuff in the ColumnLayout (except the separator lines), but I'm wondering whether there's a better way to do this.
Thanks for any ideas...
-
Hi,
I think the problem is the padding in pane, when clipping you don't see the line but is there hidden, the best approach is removing the padding from pane and your Flickable expand in all width, and pass the padding to inside of content
import QtQuick import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window Window { id: mainWindow width: 640 height: 480 visible: true Pane { id: pane anchors.fill: parent padding: 0 background: Rectangle { color: 'pink' } Flickable { id: flickable height: pane.availableHeight width: pane.width clip: true ColumnLayout { id: columnLayout anchors.fill: parent Label { text: "I want this text to respect the padding" Layout.leftMargin: 8 } Rectangle { implicitHeight: 1 implicitWidth: pane.width color: 'black' } } } } }
-
M mzimmers has marked this topic as solved on