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

本文主要是介绍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.0Text {color: "lightsteelblue"font { family: 'Courier'; pixelSize: 20; bold: true; capitalization: Font.SmallCaps }
}

·
Using the Text

Column {spacing: 20MyText { text: 'I am the very model of a modern major general!' }MyText { text: 'I\'ve information vegetable, animal and mineral.' }MyText {width: root.widthwrapMode: Text.WordWraptext: '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.0Rectangle {id: container// The caption property is an alias to the text of the Text element, so Button users can set the textproperty alias caption: txt.text// The clicked signal is emitted whenever the button is clicked, so Button users can respondsignal clicked// The button is set to have rounded corners and a thin black borderradius: 4border.width: 1// This button has a fixed size, but it could resize based on the textwidth: 160height: 40// A SystemPalette is used to get colors from the system settings for the backgroundSystemPalette { id: sysPalette }gradient: Gradient {// The top gradient is darker when 'pressed', all colors come from the system paletteGradientStop { 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 propertytext: "Button"font.bold: truefont.pixelSize: 16anchors.centerIn: parent}MouseArea {id: maanchors.fill: parent// This re-emits the clicked signal on the root item, so that Button users can respond to itonClicked: container.clicked()}
}

·
Using the button

import QtQuick 2.0Item {width: 320height: 480Rectangle {color: "#272822"width: 320height: 480}Column {width: childrenRect.widthanchors.centerIn: parentspacing: 8// Each of these is a Button as styled in Button.qmlButton { 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");}}
}