QML官方系列教程——Use Case - Style And Theme Support

附网址：http://qt-project.org/doc/qt-5/qtquick-usecase-styling.html

Use Case - Style And Theme Support—— 用例 - 风格和主题支持

Qt Quick模块提供的类型并不能独立地覆盖用户界面所需要的所有组件。一个常见的做法是通过Qt
Quick的基本模块开发一套自定义样式的用户界面组件。通过可复用组件我们很容易做到这一点。

通过使用可复用组件的方式，你可以定义该组件在程序中需要呈现的外观，并直接为它设计一个风格。然后你可以使用它来代替那些没有风格的类型。例如，你可以创建一个MyText.qml，假设它的属性已经被你明确设置好，然后你就可以使用MyText来代替你的应用程序中的所有Text。

Example Themed Text —— 主题文本示例

Button Definition

import QtQuick 2.0

Text {
    color: "lightsteelblue"
    font { family: 'Courier'; pixelSize: 20; bold: true; capitalization: Font.SmallCaps }
}

·

Using the Text

Column {
        spacing: 20

        MyText { text: 'I am the very model of a modern major general!' }

        MyText { text: 'I\'ve information vegetable, animal and mineral.' }

        MyText {
            width: root.width
            wrapMode: Text.WordWrap
            text: 'I know the kings of England and I quote the fights historical:'
        }

        MyText { text: 'From Marathon to Waterloo in order categorical.' }
    }

·

由于MyText.qml中的根项目是一个Text，因此它的行为类似一个Text项目，并且其属性可以被重写以适合特殊的用途。然而，与Text不同的是，当MyText第一次生成时这些属性值就被明确设定，因此程序默认应用了你的风格。

对于预置风格的用户界面组件，可以查看Qt Components add-on(译者：这里应该是有一个连接的，但是官网上没有)，它提供了一系列组件。要了解系统主题，可以参考SystemPalette类型文档。

Example Themed Button —— 主题按钮示例

Button Definition

import QtQuick 2.0

Rectangle {
    id: container
    // The caption property is an alias to the text of the Text element, so Button users can set the text
    property alias caption: txt.text
    // The clicked signal is emitted whenever the button is clicked, so Button users can respond
    signal clicked

    // The button is set to have rounded corners and a thin black border
    radius: 4
    border.width: 1
    // This button has a fixed size, but it could resize based on the text
    width: 160
    height: 40

    // A SystemPalette is used to get colors from the system settings for the background
    SystemPalette { id: sysPalette }

    gradient: Gradient {

        // The top gradient is darker when 'pressed', all colors come from the system palette
        GradientStop { position: 0.0; color: ma.pressed ? sysPalette.dark : sysPalette.light }

        GradientStop { position: 1.0; color: sysPalette.button }
    }

    Text {
        id: txt
        // This is the default value of the text, but most Button users will set their own with the caption property
        text: "Button"
        font.bold: true
        font.pixelSize: 16
        anchors.centerIn: parent
    }

    MouseArea {
        id: ma
        anchors.fill: parent
        // This re-emits the clicked signal on the root item, so that Button users can respond to it
        onClicked: container.clicked()
    }
}

·

Using the button

import QtQuick 2.0

Item {
    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Column {
        width: childrenRect.width
        anchors.centerIn: parent
        spacing: 8
        // Each of these is a Button as styled in Button.qml
        Button { caption: "Eeny"; onClicked: console.log("Eeny");}
        Button { caption: "Meeny"; onClicked: console.log("Meeny");}
        Button { caption: "Miny"; onClicked: console.log("Miny");}
        Button { caption: "Mo"; onClicked: console.log("Mo");}
    }
}

·

参考有关教程以了解更多创建QML定制UI组件的示例。（译者：好吧这里也没有连接，我找到有关教程会贴在这里）

QML官方系列教程——Use Case - Style And Theme Support,布布扣,bubuko.com