Rectangle in Scrollview is not visible

Question

I've created a new project and added a scrollview with a rectangle. When I start the project the rectangle is not displayed but if I add an other control it appears. I'm not sure what I'm doing wrong, I want to see the rectangle always.

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    id: mainWindow
    ScrollView{
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.topMargin: 0
        anchors.bottomMargin: 0
        width: 289
        Rectangle{
            anchors.fill: parent
            color: "blue"
            MouseArea
            {
                anchors.fill: parent
                onClicked: console.log("Click")
            }
        }
    }
}

With this code I get the following window (rectangle is not visible):

However if I add a button to this ScrollView...

 ScrollView{
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.topMargin: 0
        anchors.bottomMargin: 0
        width: 289
        Rectangle{
            anchors.fill: parent
            color: "blue"
            MouseArea
            {
                anchors.fill: parent
                onClicked: console.log("Click")
            }
        }
        Button{
            text:"Test"
        }
    }

The rectangle appears:

What's wrong with my first code (without the button)?

Tim · Accepted Answer · 2016-11-07T00:50:53.257

2

The ScrollView has two sizes, the size of the control view in the UI, and the size of the content of the ScrollView.

When you add the Rectangle without the Button, you instruct the Rectangle to fill its parent. The parent in this case is the content of the ScrollView. By default that content is empty, and you've instructed the Rectangle to fill this empty space. Therefore there is nothing displayed.

When you add the Button which has an explicit size, it forces the content of the ScrollView to be non-empty, so now the Rectangle has something to fill, thus you see it.

edited Nov 07 '16 at 00:50

answered Nov 07 '16 at 00:45

Tim

4,560
2
40
64

So I can't make the rectangle visible without adding an other control to the scrollview? It is really weird. – Abdelilah El Aissaoui Nov 07 '16 at 18:10
No, you can make the `Rectangle` visible if you give it a size. In your sample you configured the `Rectangle` to fill the content of the `ScrollView`. If the `ScrollView` has no content, then the size of that content is 0x0. Therefore the size of the `Rectangle` is 0x0. – Tim Nov 07 '16 at 18:20

Rectangle in Scrollview is not visible

1 Answers1