Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Setting the color of toolbar
Forum Updated to NodeBB v4.3 + New Features

Setting the color of toolbar

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 470 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • SandebsS Offline
    SandebsS Offline
    Sandebs
    wrote on last edited by
    #1

    Hi

    I am developing a mobile application that uses a toolbar and a "side menu"/ drawer, and i simply need to set the color of these items.

    I have already tried using Material style and Material.primary: "#002855". At first glance, this solved my problem, but it has side effects that alter the appearance of many of my custom components! E.g. some images gets skewed, text-input boxes changes shape, and some text becomes unaligned. This issue appears when i set the style to material. If I revert to the default style, these side-effect-problems goes away, but i remain unable to alter the color of the toolbar...

    I need a way to change the color of the toolbar without making too much changes to the style. Is this possible?

    1 Reply Last reply
    0
    • M Offline
      M Offline
      Mammamia
      wrote on last edited by
      #2

      @Sandebs have you tried this https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-toolbar ?

      1 Reply Last reply
      1
      • SandebsS Offline
        SandebsS Offline
        Sandebs
        wrote on last edited by
        #3

        I tried it now. Your proposed solution lets me set the color, thank you @Mammamia !

        If anyone else has the same problem, here is what i did next to get the same shadow effect as you get by doing the setstyle("Material")-solution. Use Dropshadow:

           header: ToolBar {
        
                id: idToolBar
                anchors.left: parent.left
                anchors.right: parent.right
                contentHeight: toolButton.implicitHeight
        //        A solution that works, but gives me some side effects to my program..
        //        Material.primary: "#002855" //"#003877"
        
                //Alternative solution
                //Set color to the toolbar
                background: Rectangle{
                    id: idToolbarColor
                    color: JotronStyle.jDarkBlue
        
                    //shadow beneath the toolbar
                    DropShadow {
                        anchors.fill: idToolbarColor
                        verticalOffset: 1
                        radius: 8.0
                        samples: 16
                        source: idToolbarColor
                        color: "#80000000"
                    }
                }
        
        
        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved