☰

如何更改*仅*标题的颜色？

tag-icon • tag-icon application-development ubuntu-sdk qml
如何更改*仅*标题的颜色？

有没有一种非黑客的方式来改变颜色只是使用 Ubuntu SDK 的应用程序中的标题？MainView有一个headerColor属性，但该属性用作渐变的第一步。目前，我只是在那里放了一个彩色矩形：

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

但这会导致一些问题，最明显的是它与ListView填满整个页面的无法比较。完整的示例可以在这个要点。

答案1

尝试设置anchors.fill: header，这样它总是保持在 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

他还做了很多工作来为标题添加功能，但这应该能让您了解如何去做。

答案2

Michael 指出的 Karma Machine 实现确实为我指明了正确的方向。关键是将矩形注入到标题中，使其成为合适的子项。这可以通过createObject() 方法Michael 提到如果你有一个单独的 qml 文件中的矩形，或者你可以使用创建QmlObject带有 QML 字符串。

下面是一个非常简单的例子（使用 Tabs，但是使用 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);
    }
}

相关内容