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