ScrollView and adding scrollbars to app window



  • 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?



  • 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
    }
    }
    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.