ScrollView and adding scrollbars to app window

teemo10

I am trying to add scrollbars to my app's main window using the following code:

@import QtQuick 2.0
import QtQuick.Controls 1.0

ScrollView {
Rectangle {
id: mainWindow
width: 360; height: 360
gradient: Gradient {
GradientStop { position: 0.0; color: "red"}
GradientStop { position: 1.0; color: "blue" }
}

    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }
}

}@

I'm trying to:

Give the window a gradient background, regardless of the window size.

Be able to specify a virtual size of for my window(e.g. 360x360). So that the scrollbars show up if the window size becomes smaller than the virtual size, otherwise they disappear.

The code above satisfies the second part, but not the first. So the scrollbars show up and disappear correctly. However the gradient only shows up for part of the screen, resizing it beyond the virtual size shows white. Using anchors.fill: parent breaks things completely.

Is using ScrollView the right way to go? If so what am I missing?

Jens

This is straight forward actually. ScrollView itself is not visible. All you have to do is to make the gradient rectangle the background, parent the scrollView inside it and create an invisible content item in the scroll Area:

@
import QtQuick 2.0
import QtQuick.Controls 1.0

Rectangle {
id: mainWindow
gradient: Gradient {
GradientStop { position: 0.0; color: "red"}
GradientStop { position: 1.0; color: "blue" }
}
Text {
anchors.centerIn: parent
text: "Hello World"
}
ScrollView {
anchors.fill: parent
Item {
width: 360
height: 360
}
}
}
@