Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Forums

OverviewFelgo 2 Support (Qt 5) › Change color background status bar in iOS

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #18141

    Gabrielle

    I need to change color on statusbar in iOS. Please help me out, thanks you.

    #18142

    Günther
    Felgo Team

    Hi,

    you can configure the status-bar with the statusBarStyle setting of Theme.colors.

    Eg.

    App {
    
      onInitTheme: {
        Theme.colors.statusBarStyle = Theme.colors.statusBarStyleWhite
      }
    
    }

    Best,
    Günther

    #18151

    Felgo User

    Thanks you, I need to change background color, it only change text color

    #18152

    Günther
    Felgo Team

    The background color of the navigation bar can be changed with:

     Theme.navigationBar.backgroundColor = "green"
    

    Best,
    Günther

    #18158

    Felgo User

    don’t work 🙁

    #18159

    Günther
    Felgo Team

    Hi,

    the status bar on iOS uses a translucent / transparent background, so you will see your QML items below shining through.

    If you create your app with Navigation components by Felgo, they use a default background color, which can be changed with the Theme setting, e.g.:

    import Felgo 3.0
    import QtQuick 2.0
    import Felgo 3.0
    
    App {
      id: app
    
      onInitTheme: {
        Theme.navigationBar.backgroundColor = "green"
      }
    
      NavigationStack {
        Page { title: "My Page" }
      }
    }
    

    This example creates a simple app layout with a single page and a green NavigationBar and thus also status bar.

    #18166

    Felgo User

    thanks you, but i want to full color in time bar

    #18214

    Günther
    Felgo Team

    As mentioned, the statusbar with time etc … is transparent, so you see your UI items placed within App { }.

    The example above already colours the statusbar along with the NavigationBar, as it simply shines through. Of course you can also add a custom item to fill only the statusbar area if you wish so, e.g. with a Rectangle:

    import Felgo 3.0
    import QtQuick 2.0
    
    App {
      id: app
    
      Rectangle {
        width: parent.width
        height: Theme.statusBarHeight
        color: "green"
        z: 99 // place above other items below
      }
    
    
      // other items of your app
    }
    

     

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

RSS feed for this thread

You must be logged in to reply to this topic.