Question

0

How to change the color of just the header?

rated 0 times [ 0] [ 0] / answers: 1 / hits: 715 / 2 Years ago, sun, september 18, 2022, 8:05:10

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

enefiama

Add To Favorites

Follow

Total Points: 43

Total Questions: 125

Total Answers: 102

Location: Gabon

Member since Sat, Jul 25, 2020

4 Years ago

enefiama questions

1 Cannot use Python 3.10 as interpreter on Pycharm

Sat, Jun 19, 21, 01:27, 3 Years ago

1 Risks of replacing .bashrc file from one computer to another

Wed, Aug 3, 22, 12:34, 2 Years ago

1 replace text with part of text using regex with bash perl

Mon, May 23, 22, 09:15, 2 Years ago

1 wifi keeps dropping in 20.04

Mon, Aug 8, 22, 03:41, 2 Years ago

1 Ubuntu 20.04: Why does turning off "wi-fi can be turned off to save power" turn my wi-fi off?

Sat, Nov 27, 21, 20:36, 2 Years ago

View All

answered 2 Years ago urvedcaly · Accepted 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);

    }

}

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

Answers

enefiama

How to change the color of just the header?