14.Quick QML-TextInput詳解

1.TextInput屬性
用來編輯一行文字,對應QLineEdit,除了正常輸入外,我們還可以設定echoMode屬性改為密碼顯示狀態,也可以通過validator屬性和inputMask屬性來設定驗證器或輸入掩碼,來限制文字輸入內容.也可以設定selectByMouse為true,讓滑鼠支援編輯選中的文字區域....等等.它的屬性是非常非常的多,要想熟練使用該元件,我們還是有必要過濾一遍.
TextInput的屬性如下所示:

• acceptableInput : bool,只讀屬性,用來獲取當前輸入的內容是否合法的輸入,預設始終為true,如果我們設定了validator屬性和inputMask屬性,那麼該值則為false,除非當前文字框內容滿足輸入的要求才會為true
• inputMask : string,用來設定輸入掩碼，限制允許的文字輸入,具體參考QLineEdit::inputMask,比如:
  • A:必須輸入A-Z,a-z
  • a:可以輸入A-Z,a-z,或者也可以忽略
  • N:必須輸入A-Z,a-z,0-9
  • n:可以輸入A-Z,a-z,0-9,或者也可以忽略
  • X:支援任何字元
  • x:可以輸入任何字元,或者也可以忽略
  • 9:只能輸入數字0-9
  • 0:可以輸入數字0-9,或者也可以忽略
  • B:只能輸入二進位制數0或者1
• 比如:
  • inputMask: "0000.00.00": 此時acceptableInput始終為true,因為0表示可以輸入0-9,也可以忽略不輸入,
  • inputMask: "出生日期:9999-99-99": 那麼acceptableInput為false,比如我們輸入具體日期後,才會為true
• activeFocusOnPress : bool,預設值為ture,表示當滑鼠按下,TextInput時則獲得活動焦點(顯示游標).設定為false,則滑鼠按下,也無法編輯TextInput,除非我們設定了focus屬性為true,讓它始終獲取焦點.
• autoScroll : bool,當文字長於寬度時，TextInput是否應滾動。預設為true,若設為false,如果超過寬度,並且clip為true的情況下,則無法滾動到我們輸入的字元位置處
• bottomPadding : real,底部內邊距
• canPaste : bool,只讀屬性,用來表示TextInput是否可以被貼上,只有當TextInput是可寫狀態,並且剪貼簿的內容符合格式要求,則返回true
• canRedo : bool,只讀屬性,是否可以重做撤消操作,如果支援則返回true
• canUndo : bool,只讀屬性,是否可以撤消操作,如果支援則返回true
• color : color,文字顏色
• contentHeight : real,只讀屬性,用來獲取文字的高度,需要注意的是文字的高度取決於font.pixelSize大小,而不是元件的height
• contentWidth : real,只讀屬性,用來獲取文字的寬度(不是一個字元的寬度,而是當前輸入的所有字元的寬度)
• cursorDelegate : Component,游標委託,用來設定自定義的游標,並且委託元件的根項必須是QQuickItem或QQuickItem派生類
• cursorPosition : int,游標在TextInput的位置(不是畫素點位置,以I表示游標,比如012I3,cursorPosition=3,I0123,cursorPosition=0)
• cursorRectangle : rectangle,只讀屬性,用來獲取游標的畫素座標和大小
• cursorVisible : bool,游標是否顯示,我們也可以自己設定它，比如:

• TextInput {
      text:"TextInput"
      onCursorVisibleChanged: {
          cursorVisible = true // 就算我們取消焦點後,游標也會一直顯示
      }
  }    

• displayText : string,只讀屬性,用來獲取當前顯示的文字,如果echoMode為TextInput.Password,那麼獲取的顯示文字始終為●●●●
• echoMode : enumeration,指定文字應如何在TextInput中顯示,取值有以下幾種:
  • TextInput.Normal - 按原樣顯示文字。（預設）
  • TextInput.Password - 顯示與平臺相關的密碼掩碼字元"●"，而不是實際字元。
  • TextInput.NoEcho - 不顯示任何內容。
  • TextInput.PasswordEchoOnEdit - 編輯時顯示輸入的字元,未編輯是顯示平臺相關的密碼掩碼字元"●"
• font.bold : bool,是否粗體
• font.capitalization : enumeration,設定文字顯示大寫字母,取值有以下幾種:
  • Font.MixedCase - 預設,普通文字呈現
  • Font.AllUppercase - 將所有字母顯示為大寫(只改變顯示內容,但是text內容不會被改變)
  • Font.AllLowercase - 將所有字母顯示為小寫(只改變顯示內容,但是text內容不會被改變)
• font.family : string,設定字型族
• font.italic : bool,是否斜體
• font.kerning : bool,字距調整功能,預設為true,設定false,會提高建立文字速度,但是會會犧牲一些外觀功能
• font.letterSpacing : real,設定單個字母間的預設間距.正值將字母間距增加相應畫素；負值將減少間距。
• font.pixelSize : int,畫素大小
• font.pointSize : real,字型大小
• font.strikeout : bool,是否顯示刪除線
• font.styleName : string,字型風格名稱.
• font.underline : bool,是否顯示下劃線
• font.weight : enumeration,字型的權重,比如設定為Font.Bold,表示字型是粗體
• font.wordSpacing : real,設定每個單詞間的間距
• horizontalAlignment : enumeration,設定水平文字對齊方式
• verticalAlignment : enumeration,設定垂直文字對齊方式
• inputMethodHints : enumeration,向qml虛擬鍵盤提示顯示不同的輸入方式, 比如Qt.ImhUppercaseOnly(提示虛擬鍵盤只顯示大寫字母)
• leftPadding : real,左側內邊距
• length : int,元件長度
• maximumLength : int,元件最大長度
• overwriteMode : bool,覆蓋模式,預設為false,輸入文字時,是插入游標位置處,如果為true,則是將覆蓋當前文字
• padding : real,內邊距
• passwordCharacter : string,自定義顯示的密碼掩碼字元,比如預設顯示的是"●",如果我們設定passwordCharacter為"*",那麼顯示的密碼掩碼就是*
• passwordMaskDelay : int，設定可見字元被密碼字元遮蔽之前的延遲，以毫秒為單位,設定undefined則表示沒有延遲.
• readOnly : bool,設定是否只讀,預設為false
• rightPadding : real,右側內邊距
• selectByMouse: 預設為false,設定為true,則可以通過滑鼠來編輯選中文字區域
• selectionStart : int,只讀屬性,獲取當前選中的第一個字元之前的游標位置,比如:**000***(0表示選中的意思,*表示未選中的意思),那麼返回2
• selectionEnd : int,只讀屬性,獲取當前選中的最後一個字元之後的游標位置,如果我們要更改選中的位置,可以使用 select(start,end), selectAll()或者selectWord().
• selectedText : string,只讀屬性,獲取當前選定中的文字,它比text.toString().substring(selectionStart,selectionEnd)效率更快
• selectedTextColor : color,設定當前選定中的文字顏色
• selectionColor : color,設定當前選定中的文字背景顏色
• text : string,使用者輸入的文字,也可以自己設定
• topPadding : real,頂部內邊距
• validator : Validator,驗證器,設定後,只有當按下enter鍵後,如果文字符合驗證要求,才會發射accepted訊號,目前支援的驗證器有IntValidator、DoubleValidator、RegExpValidator和RegularExpressionValidator
• wrapMode : enumeration,包裝模式,設定為TextInput.Wrap時,表示寬度不足時,可以換行

2.TextInput訊號

TextInput的訊號如下所示:

• accepted() : 當按下返回或Enter鍵時，會發出此訊號。請注意，如果文字輸入上設定了validator或inputMask，則只有在輸入處於可接受狀態時，才會發出訊號。
• editingFinished() :當按下返回或Enter鍵或文字輸入失去焦點時，會發出此訊號。請注意，如果文字輸入上設定了驗證器或inputMask，並且按了enter/return，則只有在輸入跟隨inputMask並且驗證器返回可接受狀態時，才會發出此訊號。
• textEdited() : 每當編輯文字時，就會發出此訊號。與textChanged()不同，例如，通過直接更改text值或呼叫clear()，不會發出此訊號。

3.TextInput方法

TextInput的方法如下所示:

• clear() : 清除文字輸入的內容
• copy() : 將當前選定的文字複製到系統剪貼簿,如果echoMode不等於TextInput.Normal，則複製將無法工作。避免密碼被盜
• cut() : 將當前選定的文字移動到系統剪貼簿,如果echoMode不等於TextInput.Normal，則無法工作。避免密碼被盜
• deselect() : 取消當前選中
• ensureVisible(position) : 指定可見的位置,如果clip為true,並且文字超過寬度,則可以通過該方法,滾動到要顯示的位置處
• string getText(start, int end) : 獲取start和end之間的文字部分。
• insert(position, string text) : 在position位置處插入文字
• moveCursorSelection(position, SelectionMode mode) : 移動游標選中的功能,從cursorPosition到position處（如果僅移動游標，設定cursorPosition屬性即可）,mode取值有:
  • • TextInput.SelectCharacters : position以每個字元單位
    • TextInput.SelectWords: position以每個單詞為單位
• paste() : 將當前系統剪貼簿的內容貼上到選中的文字或者游標編輯位置處.
• int positionAt(x, real y, CursorPosition position) : 獲取x和y畫素點所在字元在文字中的位置.position取值有:
  • • TextInput.CursorBetweenCharacters ：返回字元之間最接近x畫素點的位置(預設值),就和游標一樣,滑鼠點在哪個位置,那麼游標就會出現在最近的字元之間位置附近.
    • TextInput.CursorOnCharacter: 返回最接近x的字元之前的位置。
• rect positionToRectangle(pos) : 獲取pos位置處的游標應該佔用的畫素點位置和大小,pos為字元位置(不是畫素點位置).
• redo() : 重做
• remove(start, int end) : 刪除start和end之間的文字部分。
• select(start, int end) : 選中start和end之間的文字部分,如果start或end超出範圍，則不會更改選擇。
• selectAll() : 全選
• selectWord() : 選中最接近當前游標位置的單詞
• undo() : 撤銷

4.validator驗證器屬性介紹
目前支援的驗證器有IntValidator、DoubleValidator、RegExpValidator和RegularExpressionValidator,並且當按下enter鍵後,如果文字符合驗證要求,才會發射accepted訊號

IntValidator(整數驗證器)
IntValidator用來為整數值提供驗證器, 如果未設定驗證的區域，IntValidator將只接受正負號(正負號必須在文字開頭)和數字、IntValidator的屬性有bottom(整數的下限值)、top(整數的上限值)
示例如下所示(輸入10-99的值):

TextInput {
        anchors.fill: parent
        validator: IntValidator{
            bottom: 10
            top: 99
        }

        onAccepted: {
            console.log("你輸入的值為:"+text);
        }
    } 

當我們輸入文字符合驗證要求時,則列印log.

 

DoubleValidator(雙精度浮點數驗證器)
通過bottom和top 來設定輸入範圍, 通過decimals 來設定小數位個數;
示例如下所示:

TextInput {
        anchors.fill: parent
        validator: DoubleValidator {
            decimals: 2
            bottom: 10
            top: 99
        }

        onAccepted: {
            console.log("你輸入的值為:"+text);
        }
 }

 

RegularExpressionValidator (正規表示式驗證器)
比如:

• /name:(.+?);/gi

最前面的“/”與最後面的“/”是分隔符，表示正規表示式的開始與結束。所以正規表示式匹配的內容是" str(.+?);"，而"+?"表示是至少重複一次或者多次的意思,所以匹配的內容是name:開頭，";"結尾的匹配項。
而"g"表示的是全域性匹配,可以匹配到多次的情況,如果不加"g"，那麼result的匹配項最多隻能有1個，i表示表示忽略大小寫（ignoreCase，）、相關的標誌還有m（multiline，表示允許跨行）
示例如下所示:

Window {
    id: wind
    width: 550;
    height: 400;
    visible: true;
    Text {
        id: hint
        color: "red"
        font.pixelSize : 20
        text: "請輸入成員名字,以\"name:\"開頭,以\";\"隔開:"
    }
    TextInput {
        id: input
        property var regx: /name:(.+?);/gi
        anchors.top: hint.bottom
        focus: true
        font.pixelSize : 20
        validator: RegularExpressionValidator {
            regularExpression: input.regx
        }
        onAccepted: {
            var result = text.match(input.regx);

            var str = "成員數量為:"+result.length
            for (var i in result) {
                var resultStr = result[i].replace(/ /g,"");  // 刪除空格
                str += "\n" + resultStr.replace(/name:/g,"");   // 刪除"name:"
            }
            resultPrint.text = str;
        }
    }

    Text {
        id: resultPrint
        anchors.top: input.bottom
        anchors.topMargin: 40
        font.pixelSize : 20
        color: "green"
        text: "等待結果"
    }
}

效果如下所示:

可以看到我們就算了"---"干擾字元,也可以識別出來.並且由於加了"g"全域性匹配符,所以找到了3個成員,如果不加g,則只會匹配一次.