2014年6月10日 星期二

在QML使用TextInput原件 ( TextInput Element In QML )

介紹:
  • 如何使用QML的TextInput原件
Introduction:
  • How to used TextInput element in QML 

開發環境:
  • QT 5.2
  • QtQuick 2.1

import QtQuick 2.0

Rectangle {
    id      : root
    width   : 300
    height  : 300
    color   : "#D8D8D8"


    TextInput {
        id      : input
        text    : "Text Input"
        x       : 8
        y       : 36
        width   : 96
        height  : 20
        font.family : "Ubuntu"
        //字型
        font.italic : false
        //斜體
        font.letterSpacing : 5
        //空格寬度
        font.pixelSize : 15
        //字體大小
        font.strikeout : false
        //刪除線
        font.underline : false
        //底線
        autoScroll  : false
        //當輸入字元超過TextInput寬度,則自動縮放
        color   : "red"
        //文字顏色
        cursorVisible : true
        //是否顯示游標
        echoMode : TextInput.Normal
        //TextInput.Normal-顯示字元
        //TextInput.Password-不顯示字元
        //TextInput.NoEcho-不顯示任何資訊
        //TextInput.PasswordEchoOnEdit-輸入時顯示,輸入完畢隱藏資訊
        font.bold : true

        maximumLength : 10
        //最大字元數

        mouseSelectionMode :TextInput.SelectCharacters

        selectByMouse : true
        //是否可用滑鼠圈選字元
        selectedTextColor : "green"
        //被圈選字元highlighted
        selectionColor : "red"
        //被圈選字元的底色
        validator: IntValidator{
            locale: "zh_TW"
            bottom: 1
            top: 99
        }
        //限制輸入數字的最小值與最大值(1~99)

        font.capitalization: Font.Capitalize
        //Font.MixedCase-顯示原本輸入字元形態
        //Font.AllUppercase-將輸入字元轉成大寫
        //Font.AllLowercase-將輸入字元轉成小寫
        //Font.SmallCaps-將輸入字元轉成大寫,但縮小比例
        //Font.Capitalize-單字第一個字母自動轉成大寫
        onAccepted: {
            //輸入完成按下Enter鍵時調用
            console.log("Accepted")
        }
    }
}


0 意見:

張貼留言