Qt Quick 常用元素：Textinput 與 TextEdit 文本編輯框

一、Textinput

Textinput 用於編輯一行文本，類似於 QLineEdit。

• font 分組屬性允許你設置 Textlnput 元素所用字體的各種屬性，包括字體族（family）、大 小（pixelSize、pointSize）、粗細（bold、weight）、斜體（italic）、下畫線（underline）等。

• 還有一些屬性與 Text 元素一樣，如 text 屬性可以設置或獲取元素的文本，horizontalAlignment 和 verticalAlignment 用於設定文本對齊方式，wrapMode 設置文本超過控件寬度時的換行策略，color 設置文字顏色，contentWidth、contentHeight 返回文本的寬、高。

• length 屬性返回編輯框內的字符個數。maxinumiLength 設置編輯框允許輸入的字符串的最大長度， 超過這個長度就會被截斷。

• 假如你想使用 Textlnput 來輸入密碼，可以設置 echoMode 屬性為 Textlnput.Password、 Textlnput.PasswordEchoOnEdit 或 Textlnput.NoEcho，而 echoMode 默認為 Textlnput.Normal， 即輸入什么顯示什么。如果 echoMode 不為 Textlnput.Normal，那么 displayText 屬性就保存顯示給用戶的文本，而 text 屬性則保存實際輸入的文本，比如你設定 passwordCharacter 為 "*"， echoMode 為 Textlnput.Password，那么 displayText 屬性內保存的就是一串 "*"。

Textlnput 還支持粘貼、撤銷、重做、滾動等特性。不過，Textlnput不支持使用HTML標記的富文本。

Textinput 同時也支持適應 validator 或 inputMask 對輸入文本做范圍限制，也可以設置 echoMode 實現密碼框的效果。

• inputMask 是個字符串，用來限制你可以輸入的字符。掩碼串內包含允許的字符和分隔符，后面還可以跟一個可選的分號，以及一個用於補空白的字符。舉個簡單的例子，你想讓用戶輸入類似於 "2014-01-30" 這種格式的日期， 可以將 inputMask 設置為 "0000-00-00"。

• Textlnput 目前支持 IntValidator、DoubleValidator、RegExpValidator，如果你設置了 validator屬性，那么用戶就只能輸入符合 validator 所界定范圍的字符。

• IntValidator 可以設置一個整數范圍，top、bottom 設定最大值、最小值，不設置的話使用整型的最大值、最小值。

• RegExpValidator 讓我們提供一個正則表達式作為驗證器。

當用戶按了回車鍵或確認鍵，或者編輯框失去焦點時，會發出 accepted 和 editingFinished 信號，開發者可以實現 onAccepted 和 onEditingFinished 信號處理器來處理。需要注意的是， 如果你設置了 inputMask 或 validator，那么只有在編輯框內的文本符合限制條件時這兩個信號才會觸發。

TextInput 除了顯示光標和文本外，默認並沒有邊框等裝飾性效果，所以在使用時一般要為其添加一個可視化的外觀。 示例代碼如下：

import QtQuick 2.2
import QtQuick.Window 2.0

Window {
    visible: true
    width: 320
    height: 240

    Row {
        spacing: 10
        anchors.centerIn: parent

        Text {
            text: qsTr("請輸入密碼：");
            font.pointSize: 15;
            verticalAlignment: Text.AlignVCenter
        }

        Rectangle {
            width: 100
            height: 24
            color: "lightgrey"
            border.color: "grey"

            TextInput {
                anchors.fill: parent
                anchors.margins: 2
                font.pointSize: 15
                focus: true
                 onAccepted: console.log("accepted")
            }
        }
    }
}

執行后的效果圖如下：

二、TextEdit

TextEdit 是 Qt Quick 提供的多行文本編輯框，它的大多數屬性與 Textinput 類似，不同之處在於，TextEdit 用來顯示多行的可編輯的格式化文本，它既可以顯示純文本也可以顯示富文本。如下面的代碼所示：

import QtQuick 2.2
import QtQuick.Window 2.0

Window {
    visible: true
    width: 320
    height: 240

    Column {
        anchors.centerIn: parent

        Rectangle {
            width: 120
            height: 100
            color: "lightgrey"
            border.color: "grey"

            TextEdit {
                id : textEdit
                width: 100
                height: 100
                font.pointSize: 20
                color: "blue"
                focus: true
            }
        }
    }
}

執行后的效果圖如下：

參考：

《Qt Quick核心編程》第9章

QML學習(五)—<TextInput和TextEdit輸入欄>