2014年6月5日 星期四

在QML使用Text原件 ( Displaying Text In QML )

介紹:
  • 如何使用QML的Text原件
Introduction:
  • How to display Text in QML 

開發環境:
  • QT 5.2
  • QtQuick 2.1

Text {
 id      : label     //ID
 x       : 0         //Text起始位置X
 y       : 0         //Text起始位置Y
 width   : 240       //文字區域寬度
 height  : 240       //文字區域長度
 property int spacePresses: 0    //自定變數
 text: "Space.. " + spacePresses //顯示文字

 font.family     : "Ubuntu"  //字型
 font.pixelSize  : 15        //字體大小
 font.bold       : true      //字體粗細
 font.italic     : true      //斜體
 font.strikeout  : false     //刪除線
 font.underline  : true      //底線
 font.wordSpacing: 10        //空隔的寬度
 font.letterSpacing : 1      //間距
 font.capitalization: Font.AllUppercase  //字型大小寫


 style       : Text.Outline    //字體型態
 styleColor  : "red"           //字體型態顏色
 focus       : true
 clip    : true      //文字是否可被裁切
 color   : "black"   //文字顏色
 horizontalAlignment : Text.AlignHCenter//文字水平位置
 verticalAlignment   : Text.AlignVCenter//文字垂直位置

 onTextChanged: {            //文字變換執行該動作
  console.log("text :", text)     
 }

 Keys.onSpacePressed: {      //按下空白鍵執行該函式
  increment()
 }

 Keys.onEscapePressed: {     //按下ESC鍵執行該函式
  label.text = 'ESC'
 }

 function increment() {      //自訂函式
  spacePresses = spacePresses + 1
 }
}

0 意見:

張貼留言