14.Quick QML-TextInput詳解
- 2021 年 4 月 25 日
- 筆記
- 4.5 Qt Quick
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,則只會匹配一次.
