CODEWITHSUNDEEP
qtcolorsbackgroundqmltransparency
Mr. Developerdude
Mr. Developerdude

Reputation: 9698

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

Upvotes: 2

Views: 1918

Answers (1)

Tony Clifton
Tony Clifton

Reputation: 537

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"
        }
    }

Upvotes: 2

Related Questions