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.

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