Как изменить цвет * просто * заголовка?

Question 1

Есть ли нехакерский способ изменить цвет , просто заголовок в приложении, использующем Ubuntu SDK? MainView имеет свойство headerColor, но оно используется в качестве первого шага градиента. В настоящее время я просто помещаю туда цветной прямоугольник:

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

Но это вызывает ряд проблем, в особенности это несопоставимо с ListView, который заполняет всю страницу. Полный пример можно найти в этой сущности .

Question 2

Попробуйте установку anchors.fill: header, тот способ, которым это всегда остается в границах компонента Заголовка.

можно также проверить более подробную реализацию от KarmaMachine:

В нижней части здесь разработчик создает новый компонент HeaderArea, который является ребенком pageStack.header https://github.com/brianrobles204/Karma-Machine/blob/master/KarmaMachine.qml#L489

с помощью QML Component.createObject () метод от: http://developer.ubuntu.com/api/qml/sdk-14.04/QtQml.Component/#createObject-method

Тогда в HeaderArea он устанавливает привязки для заполнения родителя, который является pageStack.header: https://github.com/brianrobles204/Karma-Machine/blob/master/HeaderArea.qml#L19

Он также делает намного больше для добавления функциональности к заголовку, но это должно дать Вам общее представление о том, как сделать это.

Question 3

Question 4

Указатель Michael на реализацию Машины Кармы действительно указывал на меня в правильном направлении. Ключ вводит прямоугольник в заголовок так, чтобы это был надлежащий ребенок. Это может быть сделано с createObject () метод , который упомянул Michael, есть ли у Вас прямоугольник в отдельном qml файле, или можно использовать createQmlObject со строкой QML.

Ниже очень упрощенный пример (использующий Вкладки, но то же самое возможно с 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);
    }
}

mhall119 · Answer 1 · 1 March 2014 в 22:06