qml demo分析(text-字體展現)

　　上一篇文章分析了一個小遊戲，使用qml編寫界面+js進行復雜邏輯控制，算是一個比較完整的qml示例代碼了，今天就不那麼繼續變態啦，來看一個簡單的字體示例程序吧，該示例代碼比較簡單，主要是展現了幾個簡單的使用場景，下邊我將逐個進行分析

一、淡出

　　如圖1所示是一個文本淡出並伴隨字母間距增大的效果，該組件使用了兩個序列動畫，一個用於將字母間距放大，另外一個用於改變文字透明度

圖1 淡出

　　代碼以下所示

 1 //Hello world字樣  3000ms淡出並伴隨着字母間距增大  以後文本框位置瞬間重置 進行下一個3000淡出
 2 import QtQuick 2.0
 3 
 4 Rectangle {
 5     id: screen
 6 
 7     width: 320; height: 480
 8     color: "black"
 9 
10     Item {//文本框
11         id: container
12         x: screen.width / 2; y: screen.height / 2
13 
14         Text {
15             id: text
16             anchors.centerIn: parent
17             color: "white"
18             text: "Hello world!"
19             font.pixelSize: 32
20 
21 //! [letterspacing]
22             SequentialAnimation on font.letterSpacing {//字母間距
23                 loops: Animation.Infinite;//無限循環
24                 NumberAnimation { from: 0; to: 50; easing.type: Easing.InQuad; duration: 3000 }//3000ms將字母間距從0變到50
25                 ScriptAction {//動畫結束後  使用腳本動做  重置該文本框位置
26                     script: {
27                         container.y = (screen.height / 4) + (Math.random() * screen.height / 2)
28                         container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
29                     }
30                 }
31             }
32 //! [letterspacing]
33 
34             SequentialAnimation on opacity {//應用於透明度上的序列動畫
35                 loops: Animation.Infinite;//無限循環
36                 NumberAnimation { from: 1; to: 0; duration: 2600 }//淡出效果
37                 PauseAnimation { duration: 400 }//暫停400ms  加上該動畫以前動畫2600ms 總共3000ms  同letterSpacing序列動畫恰好構成一個並行動畫
38             }
39         }
40     }
41 }

二、字體樣式

　　qml有內置FontLoader能夠加載系統字體、本地字體和遠端字體，效果如圖2所示

圖2 字體樣式

　　改變字體樣式和字體顯示風格都使用了font屬性組

 1 import QtQuick 2.0
 2 
 3 Rectangle {
 4     property string myText: "The quick brown fox jumps over the lazy dog."//各Text將顯示文本
 5 
 6     width: 320; height: 480
 7     color: "steelblue"
 8 
 9 //! [fontloader]
10     FontLoader { id: fixedFont; name: "Courier" }//加載系統字體Courier
11 //! [fontloader]
12 //! [fontloaderlocal]
13     FontLoader { id: localFont; source: "content/fonts/tarzeau_ocr_a.ttf" }//加載本地字體
14 //! [fontloaderlocal]
15 //! [fontloaderremote]
16     FontLoader { id: webFont; source: "http://www.princexml.com/fonts/steffmann/Starburst.ttf" }//加載遠端字體
17 //! [fontloaderremote]
18 
19     Column {
20         anchors { fill: parent; leftMargin: 10; rightMargin: 10; topMargin: 10 }
21         spacing: 15
22 
23         Text {
24             text: myText//指定文本顯示內容
25             color: "lightsteelblue"//指定文本顏色
26             width: parent.width
27             wrapMode: Text.WordWrap//一行顯示不下時 換行模式  按字換行  保證換行時一個單詞不會被顯示在兩行
28 //! [name]
29             font.family: "Times"//經過字體名稱指定字體  
30 //! [name]
31             font.pixelSize: 20//字體像素大小
32         }
33         Text {
34             text: myText
35             color: "lightsteelblue"
36             width: parent.width
37             wrapMode: Text.WordWrap
38             horizontalAlignment: Text.AlignHCenter//水平方向居中
39             font { //經過font指定字體各項屬性 也能夠經過font.attribute來單個設置
40                 family: "Times"; 
41                 pixelSize: 20; 
42                 capitalization: Font.AllUppercase//設置字母都大寫
43             }
44         }
45         Text {
46             text: myText
47             color: "lightsteelblue"
48             width: parent.width
49             horizontalAlignment: Text.AlignRight//文本右對齊
50             wrapMode: Text.WordWrap
51             font { 
52                 family: fixedFont.name; //經過字體加載器設置字體
53                 pixelSize: 20; 
54                 weight: Font.Bold; //字體加粗
55                 capitalization: Font.AllLowercase//設置字母都小寫
56             }
57         }
58         Text {
59             text: myText
60             color: "lightsteelblue"
61             width: parent.width
62             wrapMode: Text.WordWrap
63             font { 
64                 family: fixedFont.name; 
65                 pixelSize: 20; 
66                 italic: true; 
67                 capitalization: Font.SmallCaps//以小寫字母的大小寫大寫字母  首字母依然是正常大寫
68             }
69         }
70         Text {
71             text: myText
72             color: "lightsteelblue"
73             width: parent.width
74             wrapMode: Text.WordWrap
75             font { 
76                 family: localFont.name; 
77                 pixelSize: 20; 
78                 capitalization: Font.Capitalize//每一個單詞的首字母大寫
79             }
80         }
81         Text {
82             text: {
83                 if (webFont.status == FontLoader.Ready) myText
84                 else if (webFont.status == FontLoader.Loading) "Loading..."
85                 else if (webFont.status == FontLoader.Error) "Error loading font"
86             }
87             color: "lightsteelblue"
88             width: parent.width
89             wrapMode: Text.WordWrap
90             font.family: webFont.name;//設置遠端字體名稱
91             font.pixelSize: 20
92         }
93     }
94 }

三、系統字體

圖3 系統字體

 　　如圖3所示，使用了ListView展現了當前系統支持的全部字體，文本項所使用的字體樣式就是文本內容，代碼以下

 1 //展現當前系統全部字體
 2 import QtQuick 2.0
 3 
 4 Rectangle {
 5     width: 320; height: 480; color: "steelblue"
 6 
 7     ListView {
 8         anchors.fill: parent
 9 //! [model]
10         model: Qt.fontFamilies()//數據源是全部的qt字體
11 //! [model]
12 
13         delegate: Item {
14             height: 40; width: ListView.view.width
15             Text {
16                 anchors.centerIn: parent
17                 text: modelData//文本內容顯示字體名稱
18 //! [delegate]
19                 font.family: modelData//設置字體名稱
20 //! [delegate]
21                 font.pixelSize: 20//字體像素大小
22                 color: "white"//字體顏色
23             }
24         }
25     }
26 }

四、跑馬燈

　　示例代碼中banner.qml組件實現了跑馬燈效果，不過我的感受效果不是特別好，所以這裏就不細說，若是感興趣的同窗可自行到Qt5.7.0_vs2013\Examples\Qt-5.7\quick\text目錄下查找，該文件代碼量比較少

五、圖文混用

　　qml對css支持的相對來講還能夠，css已經發展到3.0版本，具體qml友好的支持到哪一版本感興趣的同窗可自行上網上查找

圖4 圖文混合

　　如圖4所示是簡單的圖文混用，其實代碼也比較簡單，主要仍是使用了web技術中的一些關鍵字，好比<b>：加粗，<img>:遠端圖片等。代碼以下

 1 import QtQuick 2.0
 2 
 3 Rectangle {
 4     id: main
 5     width: 320; height: 480
 6     focus: true
 7     color: "#dedede"
 8 
 9     property var hAlign: Text.AlignLeft
10 
11     Flickable {//可滑動區域
12         anchors.fill: parent
13         contentWidth: parent.width
14         contentHeight: col.height + 20
15 
16         Column {
17             id: col
18             x: 10; y: 10
19             spacing: 20
20             width: parent.width - 20
21 
22             TextWithImage {
23                 text: "This is a <b>happy</b> face<img src=\"images/face-smile.png\">"//誰用css語法  設置happy字體加粗  並使用img關鍵字導入圖片
24             }
25             TextWithImage {
26                 text: "This is a <b>very<img src=\"images/face-smile-big.png\" align=\"middle\"/>happy</b> face vertically aligned in the middle."//使用middle屬性將圖片置於中間位置
27             }
28             TextWithImage {
29                 text: "This is a tiny<img src=\"images/face-smile.png\" width=\"15\" height=\"15\">happy face."//使用width和height屬性設置圖片大小
30             }
31             TextWithImage {
32                 text: "This is a<img src=\"images/starfish_2.png\" width=\"50\" height=\"50\" align=\"top\">aligned to the top and a<img src=\"images/heart200.png\" width=\"50\" height=\"50\">aligned to the bottom."
33             }
34             TextWithImage {//連續導入3張圖片 並設置其大小 位置居中
35                 text: "Qt logos<img src=\"images/qtlogo.png\" width=\"55\" height=\"60\" align=\"middle\"><img src=\"images/qtlogo.png\" width=\"37\" height=\"40\" align=\"middle\"><img src=\"images/qtlogo.png\" width=\"18\" height=\"20\" align=\"middle\">aligned in the middle with different sizes."
36             }
37             TextWithImage {
38                 text: "Some hearts<img src=\"images/heart200.png\" width=\"20\" height=\"20\" align=\"bottom\"><img src=\"images/heart200.png\" width=\"30\" height=\"30\" align=\"bottom\"> <img src=\"images/heart200.png\" width=\"40\" height=\"40\"><img src=\"images/heart200.png\" width=\"50\" height=\"50\" align=\"bottom\">with different sizes."
39             }
40             TextWithImage {//從遠端加載圖片
41                 text: "Resized image<img width=\"48\" height=\"48\" align=\"middle\" src=\"http://qt-project.org/images/qt13a/Qt-logo.png\">from the internet."
42             }
43             TextWithImage {
44                 text: "Image<img align=\"middle\" src=\"http://qt-project.org/images/qt13a/Qt-logo.png\">from the internet."
45             }
46             TextWithImage {
47                 height: 120
48                 verticalAlignment: Text.AlignVCenter
49                 text: "This is a <b>happy</b> face<img src=\"images/face-smile.png\"> with an explicit height."
50             }
51         }
52     }
53 
54     Keys.onUpPressed: main.hAlign = Text.AlignHCenter//水平居中
55     Keys.onLeftPressed: main.hAlign = Text.AlignLeft//水平居左
56     Keys.onRightPressed: main.hAlign = Text.AlignRight//水平居右
57 }

　　如上代碼54-56行，對鍵盤事件進行了簡單處理，向上鍵：文本水平居中，向左鍵：水平居左，向右鍵：水平居中

六、文本佈局

　　以前一直用QTextEdit作文本顯示功能，一直很羨慕html的文本佈局功能，如今不用擔憂了，qml也能夠在文本佈局時作本身想作的一些事情，主要仍是處理lineLaidOut信號，如圖5所示，該文本顯示在窗口左半側進行展現，當展現不下時，從右半側窗口開始展現

圖5 Text自定義佈局

　　當窗口進行放大縮小時，這個靈活佈局才能更有好多的展現，感興趣的同窗能夠本身運行qt示例，要實現這個友好的功能其實代碼量不多，代碼以下所示

 1 //複雜文本顯示
 2 import QtQuick 2.0
 3 
 4 Rectangle {
 5     id: main
 6     width: 320; height: 480
 7     focus: true
 8 
 9     property real offset: 0
10     property real margin: 8
11 
12     Text {
13         id: myText
14         anchors.fill: parent
15         anchors.margins: 10
16         wrapMode: Text.WordWrap
17         font.family: "Times New Roman"
18         font.pixelSize: 14
19         textFormat: Text.StyledText
20         horizontalAlignment: Text.AlignJustify
21         
22         //css關鍵字 <a  <br <ul <ol <li  <p
23         text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at ante dui <a href=\"http://www.digia.com\">www.digia.com</a>.<br/>Curabitur ante est, pulvinar quis adipiscing a, iaculis id ipsum. Nunc blandit condimentum odio vel egestas.<br><ul type=\"bullet\"><li>Coffee<ol type=\"a\"><li>Espresso<li>Cappuccino<li>Latte</ol><li>Juice<ol type=\"1\"><li>Orange</li><li>Apple</li><li>Pineapple</li><li>Tomato</li></ol></li></ul><p><font color=\"#434343\"><i>Proin consectetur <b>sapien</b> in ipsum lacinia sit amet mattis orci interdum. Quisque vitae accumsan lectus. Ut nisi turpis, sollicitudin ut dignissim id, fermentum ac est. Maecenas nec libero leo. Sed ac leo eget ipsum ultricies viverra sit amet eu orci. Praesent et tortor risus, viverra accumsan sapien. Sed faucibus eleifend lectus, sed euismod urna porta eu. Quisque vitae accumsan lectus. Ut nisi turpis, sollicitudin ut dignissim id, fermentum ac est. Maecenas nec libero leo. Sed ac leo eget ipsum ultricies viverra sit amet eu orci."
24 
25 //! [layout]
26         onLineLaidOut: {
27             line.width = width / 2  - (margin)//每一行的寬度只有當前根窗口寬度一半
28 
29             if (line.y + line.height >= height) {//當文字顯示越過窗口底部時
30                 line.y -= height - margin//y值將去窗口高度
31                 line.x = width / 2 + margin//x值向右移動根窗口寬度一半    即從由半側窗口顯示剩餘文本
32             }
33         }
34 //! [layout]
35     }
36 }

 

好啦。。。qml簡單的文本展現就這麼些了，其實應該還有不少，只是這個示例程序就這麼些，那咱們暫時也就說這麼多吧。