附网址: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组件的示例。(译者:好吧这里也没有连接,我找到有关教程会贴在这里)