[jrrobles79]

is there a way to overwrite the property ‘Theme.navigationBar.backgroundColor’ for a specific Page?

[GüntherFelgo Team]

Hi,

that is not possible at the moment. You can, however, set the Page::navigationBarTranslucency to 1.0.

This allows to create a fully custom Header-design within the Page.

Best,
Günther from Felgo

[jrrobles79]

Thank you for your answerd, I tried this, but still having a lot of problems, I added this to my Page:

 

 

Page {
    id: register
    navigationBarTranslucency: 1.0
    title:""
    backgroundColor: Theme.secondaryBackgroundColor
    titleItem: NavigationBarRow {
          Text {
              text: "Regístrate"
              font.family: roboto.name
              font.pixelSize: dp(20)
              font.bold:true
              font.weight: Font.Bold
              color: "black"
              anchors.centerIn: parent
          }
      }
...
...
}

However, in one page works, but on the next dosen’t, I new on QML, so I don’t know what Im doing wrong

 

first page:
https://pasteboard.co/IckdkFs.png

second page:
https://pasteboard.co/Ickczqhw.png

Same code for the header on both pages, just different id and content

What Im doing wrong?

 

EDIT: I also getting this error on the page where this works:

qrc:/qml/VPlayApps/navigation/NavigationBarRow.qml:292: QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.

[AlexFelgo Team]

Hi,

please note that using the navigationBarTranslucency property causes the Page to fill the whole screen (because the navigation bar blends through), so your page layout must handle the top offset.

Your error indicates that you are using wrong anchoring within a layout component. For example, you cannot use horizontal anchoring within a Row, because the Row tries to handle the horizontal layout. You can still use vertical anchoring (e.g. anchors.verticalCenter, or anchors.top) but not horizontal (e.g. anchors.left). Using such wrong anchoring breaks the layout (error message: “Row will not function.”)

Cheers,
Alex

[NgapWei]

Any plan to support this property in future version?

[jrrobles79]

Thank you for your answer, I fixed, like this, but I feel like cheating:

Page {

    id: registerByPhonePage
    navigationBarTranslucency: 1.0
    title: "Regístrate"
    backgroundColor: Theme.secondaryBackgroundColor

    property bool error: false
    width: parent.width

    titleItem: Row {
        spacing: dp(6)
        AppText {
            id: titleText
            anchors.verticalCenter: parent.verticalCenter
            text: registerPage.title
            font.family: roboto.name
            font.pixelSize: dp(Theme.navigationBar.titleTextSize)        
            font.bold: true
            font.weight: Font.Bold
            color: "black"
        }
    }
..
.
.

    Column {
        id: contentCol
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.margins: contentPadding
        spacing: contentPadding

        Rectangle {
            id: headerSpacer
            height: titleItem.height
            width: parent.width
            color:"transparent"
        }

...
...
}

 

First I change the for NavigationBarRow for only Row, for an example I saw on the documentation (https://felgo.com/doc/apps-howto-use-app-navigation/#push-a-page-on-the-navigationstack),

then to fix, the navigationBarTranslucency, I added an invisible Rectangle, to take the space that the navigationbar should have.

[GüntherFelgo Team]

For pages that step away from the default look, developers will need a custom implementation in any case. Same goes for other Theme properties that affect the NavigationBar. This would require some bigger changes in the SDK. Due to the current setup of how Theming and the NavigationStack / Page implementation work, we do not have planned to add a property for this at the moment.

Best,
Günther