qml demo分析 text 字型展示

1、淡出

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

圖1 淡出

**如下所示

1
//hello world字樣  3000ms淡出並伴隨著字母間距增大  之後文字框位置瞬間重置 進行下乙個3000淡出
2 import qtquick 2.034
rectangle //
3000ms將字母間距從0變到50
25                 scriptaction 30}
31}32//
! [letterspacing]
3334             sequentialanimation on opacity //
淡出效果
37                 pauseanimation //
暫停400ms  加上該動畫之前動畫2600ms 總共3000ms  同letterspacing序列動畫剛好構成乙個並行動畫38}
39}40}
41 }

2、字型樣式

qml有內建fontloader可以載入系統字型、本地字型和遠端字型，效果如圖2所示

圖2 字型樣式

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

1 import qtquick 2.023
rectangle //
載入系統字型courier
11//
! [fontloader]
12//
! [fontloaderlocal]
13     fontloader //
載入本地字型
14//
! [fontloaderlocal]
15//
! [fontloaderremote]
16     fontloader //
載入遠端字型
17//
! [fontloaderremote]
1819
column 
21         spacing: 15
2223
text 
33text 44}
45text 57}
58text 69}
70text 80}
81text 
87             color: "
lightsteelblue"88
width: parent.width
89wrapmode: text.wordwrap
90             font.family: webfont.name;//
設定遠端字型名稱
91             font.pixelsize: 2092}
93}94 }

3、系統字型

圖3 系統字型

如圖3所示，使用了listview展示了當前系統支援的所有字型，文字項所使用的字型樣式就是文字內容，**如下

1
//展示當前系統所有字型
2 import qtquick 2.034
rectangle 24}
25}26 }

4、跑馬燈

示例**中banner.qml元件實現了跑馬燈效果，不過個人感覺效果不是特別好，因此這裡就不細說，如果感興趣的同學可自行到qt5.7.0_vs2013\examples\qt-5.7\quick\text目錄下查詢，該檔案**量比較少

5、**混用

qml對css支援的相對來說還可以，css已經發展到3.0版本，具體qml友好的支援到哪一版本感興趣的同學可自行上網上查詢

圖4 **混合

1 import qtquick 2.023
rectangle 
25textwithimage 
28textwithimage 
31textwithimage 
34             textwithimage 
37textwithimage 
40             textwithimage 
43textwithimage 
46textwithimage 51}
52}5354     keys.onuppressed: main.halign = text.alignhcenter//
水平居中
55     keys.onleftpressed: main.halign = text.alignleft//
水平居左
56     keys.onrightpressed: main.halign = text.alignright//
水平居右
57 }

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

6、文字布局

之前一直用qtextedit做文字顯示功能，一直很羨慕html的文字布局功能，現在不用擔心了，qml也可以在文字布局時做自己想做的一些事情，主要還是處理linelaidout訊號，如圖5所示，該文字顯示在視窗左半側進行展示，當展示不下時，從右半側視窗開始展示

圖5 text自定義布局

當視窗進行放大縮小時，這個靈活布局才能更有好多的展示，感興趣的同學可以自己執行qt示例，要實現這個友好的功能其實**量很少，**如下所示

1
//複雜文字顯示
2 import qtquick 2.034
rectangle 33}
34//
! [layout]35}
36 }

好啦。。。qml簡單的文字展示就這麼些了，其實應該還有很多，只是這個示例程式就這麼些，那我們暫時也就說這麼多吧。

qml demo分析 text 字型展示

text 預設系統字型

text 替換Android預設的漢字字型

unity ugui自定義Text字型描邊優化效能

qml demo分析 text 字型展示

text 預設系統字型

text 替換Android預設的漢字字型

unity ugui自定義Text字型描邊優化效能

相關推薦