Unsolved White Areas Outside of Flickable(?)
-
Hello guys, i am trying to make an ui. I chosed my colour and tried it literally every where (creating rectangles at everywhere to set colour ) to get rid of white areas around days. I could not find the reason what causing this, do you know anything about it?Here is my main code (i believe the problem is here).
import QtQuick 2.12 import QtQuick.Controls 2.5 import QtQml 2.12 import QtQuick 2.7 import QtQuick.Layouts 1.3 import QtQuick.Controls.Material 2.2 import "components" ApplicationWindow { id: applicationWindow visible: true width: 960 height: 540 title: qsTr("App") Column { id: mission width: 2*parent.width/5 height: parent.height anchors.left: parent.left anchors.top: parent.top anchors.bottom: parent.bottom ScrollView { id: scrollView anchors.fill: parent ListView { width: parent.width model: Missioninfo{} delegate: Missiondelegate{} } } } Column { id: weather width: 3*parent.width/5 height: parent.height anchors.right: parent.right anchors.top: parent.top anchors.bottom: parent.bottom ScrollView{ id:deneme anchors.fill: parent Flickable { id: flickable anchors.fill: parent contentHeight: root.implicitHeight boundsBehavior: Flickable.OvershootBounds Pane { id: root width: weather.width height: weather.height anchors.fill: parent clip: true Column { // anchors.right: parent.right anchors.fill: parent anchors.verticalCenter: parent.verticalCenter // Label { // anchors { left: parent.left; right: parent.right } // topPadding: 10 // bottomPadding: 10 // font.pixelSize: 20 // horizontalAlignment: Qt.AlignHCenter // text: qsTr("Example") // } Repeater { model: Weatherinfo{} delegate: Column { property bool showList: false anchors.left: parent.left anchors.right: parent.right Rectangle{ property bool showList: false color: "#232A3B" width:parent.width height: applicationWindow.height/7 anchors.left: parent.left anchors.right: parent.right Label{ text:qsTr(model.day) anchors.centerIn: parent color:"white" } MouseArea{ anchors.fill: parent onClicked: paneSettingsList.shown = !paneSettingsList.shown } } Pane { id: paneSettingsList // ## relevant part ## property bool shown: false visible: height > 0 height: shown ? implicitHeight : 0 Behavior on height { NumberAnimation { easing.type: Easing.InOutQuad } } clip: true // ## relevant part ## Material.background: "#293145" padding: 0 anchors.left: parent.left anchors.right: parent.right Column { anchors.right: parent.right anchors.left: parent.left Repeater { id: listSettings1 model:details delegate: Weatherdelegate{} } } } } } } } } ScrollIndicator.vertical: ScrollIndicator { } } } }
-
I think your
Flickable
does nothing... it's contents are the same size as the Flickable (because you haveanchors.fill: parent
in yourroot
Pane. So it will never scroll. What actually does the scrolling in your case is theScrollView
.I don't see any reason for the white padding in your code. Perhaps all those
Pane
components insert some platform-dependent padding? Try overriding theirbackground
property with a customRectangle
. -
@sierdzio Thanks for answering, overriding worked. Also for your information, i am a beginner so may be wrong but without ScrollView, it still can be scrolled.