Como mudar a cor de * apenas * o cabeçalho?

Question

Existe uma maneira não hacky de alterar a cor do apenas cabeçalho de um aplicativo usando o Ubuntu SDK? MainView tem uma propriedade headerColor , mas isso é usado como o primeiro passo do gradiente. Atualmente, estou colocando um retângulo colorido por aí:

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

Mas isso causa vários problemas, principalmente porque é incomparável com um ListView que preenche uma página inteira. Um exemplo completo pode ser encontrado em esta essência .

    

Answer 1

O ponteiro de Michael para a implementação do Karma Machine realmente me apontou na direção certa. A chave é injetar o retângulo no cabeçalho para que ele seja um filho adequado. Isso pode ser feito com o método createObject () que Michael mencionou se você tiver o retângulo em um arquivo qml separado, ou você pode usar createQmlObject com uma string de QML.

Abaixo está um exemplo muito simplificado (usando Tabs, mas a mesma coisa é possível com um 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);
    }
}

    

Answer 2

Tente definir anchors.fill: header , para que ele permaneça sempre dentro dos limites do componente Cabeçalho.

Você também pode verificar uma implementação mais detalhada do KarmaMachine:

Na parte inferior, o desenvolvedor cria um novo componente HeaderArea que é filho de pageStack.header link

usando o método QML Component.createObject () de: link

Em seguida, no HeaderArea ele define as âncoras para preencher o pai, que é pageStack.header: link

Ele também faz muito mais para adicionar funcionalidade ao cabeçalho, mas deve dar uma ideia de como fazê-lo.