QML官方系列教程——Use Case

附网址：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

 

1. import QtQuick 2.0

2.  

3. Text {

4. color: "lightsteelblue"

5. font { family: 'Courier'; pixelSize: 20; bold: true; capitalization: Font.SmallCaps }

6. }

·
Using the Text

 

 

1. Column {

2. spacing: 20

3.  

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

5.  

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

7.  

8. MyText {

9. width: root.width

10. wrapMode: Text.WordWrap

11. text: 'I know the kings of England and I quote the fights historical:'

12. }

13.  

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

15. }

·
 

 

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

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

 

Example Themed Button —— 主题按钮示例

Button Definition

 

1. import QtQuick 2.0

2.  

3. Rectangle {

4. id: container

5. // The caption property is an alias to the text of the Text element, so Button users can set the text

6. property alias caption: txt.text

7. // The clicked signal is emitted whenever the button is clicked, so Button users can respond

8. signal clicked

9.  

10. // The button is set to have rounded corners and a thin black border

11. radius: 4

12. border.width: 1

13. // This button has a fixed size, but it could resize based on the text

14. width: 160

15. height: 40

16.  

17. // A SystemPalette is used to get colors from the system settings for the background

18. SystemPalette { id: sysPalette }

19.  

20. gradient: Gradient {

21.  

22. // The top gradient is darker when 'pressed', all colors come from the system palette

23. GradientStop { position: 0.0; color: ma.pressed ? sysPalette.dark : sysPalette.light }

24.  

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

26. }

27.  

28. Text {

29. id: txt

30. // This is the default value of the text, but most Button users will set their own with the caption property

31. text: "Button"

32. font.bold: true

33. font.pixelSize: 16

34. anchors.centerIn: parent

35. }

36.  

37. MouseArea {

38. id: ma

39. anchors.fill: parent

40. // This re-emits the clicked signal on the root item, so that Button users can respond to it

41. onClicked: container.clicked()

42. }

43. }

·
Using the button

 

 

1. import QtQuick 2.0

2.  

3. Item {

4. width: 320

5. height: 480

6.  

7. Rectangle {

8. color: "#272822"

9. width: 320

10. height: 480

11. }

12.  

13. Column {

14. width: childrenRect.width

15. anchors.centerIn: parent

16. spacing: 8

17. // Each of these is a Button as styled in Button.qml

18. Button { caption: "Eeny"; onClicked: console.log("Eeny");}

19. Button { caption: "Meeny"; onClicked: console.log("Meeny");}

20. Button { caption: "Miny"; onClicked: console.log("Miny");}

21. Button { caption: "Mo"; onClicked: console.log("Mo");}

22. }

23. }

·

 

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

来源：oschina

链接：https://my.oschina.net/u/4000302/blog/3108318