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,則只會匹配一次.