Home / ubuntu / Questions / 428008
Accepted
andrewsomething
Asked: 2014-03-02 08:30:31 +0800 CST

How to change the color of *just* the header?

  • 772

Is there a non-hacky way to change the color of just the header in an app using the Ubuntu SDK? MainView has a headerColor property, but that is used as the first step of gradient. Currently, I'm just putting a colored rectangle up there:

Rectangle {
    id: headerBackground
    height: header.height
    width: header.width
    anchors.top: parent.top
    color: "#288369"
}

But this causes a number of issues, most notably it is incomparable with a ListView that fills an entire page. A full example can be found in this gist.

application-development

2 Answers

  1. Try setting anchors.fill: header, that way it always stays within the bounds of the Header component.

    You can also check out a more detailed implementation from KarmaMachine:

    At the bottom here the developer creates a new HeaderArea component that is a child of pageStack.header https://github.com/brianrobles204/Karma-Machine/blob/master/KarmaMachine.qml#L489

    using the QML Component.createObject() method from: http://developer.ubuntu.com/api/qml/sdk-14.04/QtQml.Component/#createObject-method

    Then in the HeaderArea he sets the anchors to fill the parent, which is pageStack.header: https://github.com/brianrobles204/Karma-Machine/blob/master/HeaderArea.qml#L19

    He also does a lot more to add functionality to the header, but it should give you an idea of how to do it.

    • 2
  2. Best Answer

    Michael's pointer to Karma Machine's implementation did indeed point me in the right direction. The key is injecting the rectangle into the header so that it is a proper child. This can be done with the createObject() method that Michael mentioned if you have the rectangle in a separate qml file, or you can use createQmlObject with a string of QML.

    Below is a much simplified example (using Tabs but the same thing is possible with a PageStack):

    import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    id: mainView

    width: units.gu(40)
    height: units.gu(60)

    Tabs {
        id: tabs

        Tab {
            title: i18n.tr("Colored Header")
            page: Page {
            }
        }
    }

    Component.onCompleted: {
        tabs.tabBar.__styleInstance.headerTextSelectedColor = "white";
        var component = Qt.createQmlObject(
            'import QtQuick 2.0; Rectangle { anchors.fill: parent; z: -1; color: "#288369"; }',
            tabs.header);
    }
}
    • 0