Forums

OverviewFelgo 2 Support (Qt 5) › How to overwrite navigationbar background color?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #21524

    jrrobles79

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

    #21534

    Günther
    Felgo 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

    #21578

    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.

    #21581

    Alex
    Felgo 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

    #21584

    NgapWei

    Any plan to support this property in future version?

    #21585

    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.

    #21602

    Günther
    Felgo 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

     

Viewing 7 posts - 1 through 7 (of 7 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support