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

 

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組件的示例。（譯者：好吧這裏也沒有鏈接，我找到有關教程會貼在這裏）