Search code examples
qtcolorsbackgroundqmltransparency

QML SwipeView has a opaque background. How can I make it transparent?

In QML I have implemented a simple application with a SwipeView like this:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.2

Window {
    visible: true
    Rectangle{
        id: bg
        anchors.fill: parent
        color: "red"
    }

    SwipeView {
        id: swipeView
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: tabBar.top
        currentIndex: tabBar.currentIndex

       Page{
        // Empty
       }

        Page{
            Rectangle{
                anchors.fill: parent
                color:"purple"
            }
        }
    }

    TabBar {
        id: tabBar
        width: parent.width;
        height: 30;
        anchors.bottom: parent.bottom
        currentIndex: swipeView.currentIndex
        TabButton {
            text: qsTr("Empty")
        }
        TabButton {
            text: qsTr("Purple")
        }
    }
}

If I remove the SwipeView the red background Rectangle shows, but as long as the SwipeView is present it is either white or purple depending on the page that is shown.

With purple page selected:

With purple page selected

With empty page selected:

With empty page selected

With swipeview and tabbar commented out:

With swipeview and tabbar commented out

So, how can I make the red background shine through (i.e. make the SwipeView transparent)?

Solution

  • SwipeView by default is transparent. Page is not actually "empty". Because it inherits Control, it has a background property. By default, Page has a Rectangle set as a background. That is why you see white for the empty tab. Page.qml Sourcecode

    So you can do this:

       Page { background: null }

    or:

        Page {
        background: Rectangle{                
            color:"transparent"
        }
    }