[Marek]

Hi,

I’m using NavigationStack to organize the pages. I would like to have common backgrouond (an image) for page and the navigationBar or tabBar. That’s mean to put an image as a background and make tabBar and navigationBar backgroundColor transparent. However when I do that (set transparent for navigationBar and tabBar) image below is not visible and navigationBar and tabBar has black background. Below is snippet of code from my app. How can I achieve that and is this possible ?

 

Best Regards

Marek

App {

    licenseKey: "my_key";

    onInitTheme: {
        Theme.tabBar.backgroundColor="transparent"
        Theme.navigationBar.backgroundColor="transparent";
    }
    id: main_app

    Image {
        anchors.fill: parent
        source: Qt.resolvedUrl("qrc:/images/background.jpg");
    }

    NavigationStack {
        id: cfgNaviStack
        visible: true

        Cfg2Page {
            id: cfg2Page
        }
        Cfg3Page {
            id: cfg3Page
            visible: false
        }
        Cfg4Page {
            id: cfg4Page
            visible: false
        }
    }
}

 

 

 

[GüntherFelgo Team]

Hi Marek!

The background color settings only changes the color, but does not make the navigation bar translucent. The actual pages do not cover the full area below the NavigationBar by default. They are shown below the navigation bar, which is why you see a black background.

You can set a translucent navigation bar for your pages with the Page::navigationBarTranslucency setting.

Best,
Günther from Felgo

[Marek]

 

excellent, thank you.