本文主要介紹基本元素 TextInput, TextField, TextEdit, TextArea 等的基本屬性。Textlnput 與 TextField 為行編輯控制元件，TextEdit 與 TextArea 為塊編輯控制元件。

一、Textinput

Textinput 用於編輯一行文字，類似於 QLineEdit，除了顯示游標和文字外，預設並沒有邊框等裝飾性效果，所以在使用時一般要為其新增一個視覺化的外觀。

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
            }
        }
    }
}
 

Textinput 預設並沒有邊框，所以上面使用 Rectangle 作為其邊框，程式執行效果如下圖所示：

下面介紹其一些屬性：

• font 分組屬性允許你設定 Textlnput 元素所用字型的各種屬性，包括字型族（family）、大小（pixelSize、pointSize）、粗細（bold、weight）、斜體（italic）、下畫線（underline）等。
• horizontalAlignment 和 verticalAlignment 用於設定文字對齊方式，wrapMode 設定文字超過控制元件寬度時的換行策略，color 設定文字顏色，contentWidth、contentHeight 返回文字的寬、高。
• 當用戶按了回車鍵或確認鍵，或者編輯框失去焦點時，會發出 accepted 和 editingFinished 訊號，開發者可以實現 onAccepted 和 onEditingFinished 訊號處理器來處理。

1.1 自適應輸入框尺寸

按照前面的程式碼已經為 TextInput 設定了一個基本的外觀，但是如果輸入過多的內容時，會顯示到背景之外，如下圖所示：

所以要根據輸入的內容來動態改變輸入框背景的尺寸，這個可以通過 contentWidth 和 contentHeight 屬性來根據輸入內容的寬高設定背景矩形的大小，將前面程式碼更改如下：

Rectangle {
    width: input.contentWidth<100 ? 100 : input.contentWidth + 10
    height: input.contentHeight + 5
    color: "lightgrey"
    border.color: "grey"

    TextInput {
        id: input
        anchors.fill: parent
        anchors.margins: 2
        font.pointSize: 15
        focus: true
    }
}
 

執行效果如下圖所示：

1.2 輸入掩碼

可以使用輸入掩碼 inputMask 來限制輸入的內容，輸入掩碼就是使用一些特殊的字元來限制輸入的格式和內容，舉個簡單的例子，你想讓使用者輸入類似於 "2014-01-30" 這種格式的日期， 可以將 inputMask 設定為 "0000-00-00"。可用的掩碼字元如下表所示。

下面來看示例程式碼：

Rectangle {
    width: input.contentWidth<100 ? 100 : input.contentWidth + 10
    height: input.contentHeight + 5
    color: "lightgrey"
    border.color: "grey"

    TextInput {
        id: input
        anchors.fill: parent
        anchors.margins: 2
        font.pointSize: 15
        focus: true

        inputMask: ">AA_9_a"
        onEditingFinished: text2.text = text
    }
}

Text { id: text2}

當輸入完成後可以按下回車鍵，這時會呼叫 onEditingFinished 訊號處理器，在其中可以對輸入的文字進行處理。注意，只有當所有必須輸入的字元都輸入後，按下回車鍵才可以呼叫該訊號處理器，比如這裡的掩碼字元 9 要求必須輸入一個數字，如果不輸入而是直接留空，那麼按下回車鍵也沒有效果。程式碼執行效果如下圖所示：

1.3 驗證器

除了使用掩碼，還可以使用整數驗證器 IntValidator 、DoubleValidator（非整數驗證器）和RegExpValidator（正則表示式驗證器）。下面的程式碼可以限制在 TextInput 中只能輸入 11 到 31 之間的整數：

validator: IntValidator{ bottom: 11; top: 31; }

對於正則表示式的使用，可以參考網上教程。

1.4 回顯方式

TextInput專案的 echoMode 屬性指定了文字的顯示方式，可用的方式有：

• TextInput.Normal：直接顯示文字（預設方式）；
• TextInput.Password：使用密碼掩碼字元（根據不同平臺顯示效果不同）來代替真實的字元；
• TextInput.NoEcho：不顯示輸入的內容；
• TextInput.PasswordEchoOnEdit：使用密碼掩碼字元，但在輸入時顯示真實字元。

下面來看示例程式碼：

TextInput {
    id: input
    focus: true
    echoMode: TextInput.PasswordEchoOnEdit

    onEditingFinished: {
        input.focus = false
        text2.text = text
    }
}

程式碼先設定了 TextInput 獲得焦點，這樣輸入字元會直接顯示，等輸入完成按下回車鍵以後使 TextInput 失去焦點，這樣輸入的字元會用密碼掩碼顯示。效果如下圖所示：

如果 echoMode 不為 Textlnput.Normal，那麼 displayText 屬性就儲存顯示給使用者的文字，而 text 屬性則儲存實際輸入的文字，比如你設定 passwordCharacter 為 *, echoMode為TextInput.Password，那麼displayText屬性內儲存的就是一串 *。

二、TextEdit

TextEdit 是 Qt Quick 提供的多行文字編輯框，它的大多數屬性與 Textinput 類似。下面只說不同之處：

• 文字顏色

  TextInput 的文字顏色使用 color 屬性指定，TextField 的文字顏色使用 textColor 屬性指定。

• 背景色

  TextInput 沒有背景，是透明的，能夠與父控制元件無縫結合；而 TextField 有背景，其背景色可通過 TextFieldStyle 的 background 屬性來設定，其他屬性都一樣。

• 富文字
  Textlnput 不支援使用 HTML 標記的富文字，而 TextEdit 可以。

示例如下：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480

    TextEdit {
        width: 240
        textFormat: Text.RichText
        text: "<b>Hello</b> <i>World!</i>"
        font.family: "Helvetica"
        font.pointSize: 20
        color: "blue"
        focus: true
        anchors.centerIn: parent
    }
}

執行程式碼可以看到，TextEdit 沒有提供滾動條、游標跟隨和其它在可視部件中通常具有的行為。為了更加人性化的體驗，我們可以使用 Flickable 來為其提供滾動，實現游標跟隨。下面來看一段示例程式碼：

Window {
    visible: true
       width: 640
       height: 480

       Flickable {
           id: flick

           anchors.fill: parent
           contentWidth: edit.paintedWidth
           contentHeight: edit.paintedHeight
           clip: true

           function ensureVisible(r)
           {
               if (contentX >= r.x)
                   contentX = r.x;
               else if (contentX+width <= r.x+r.width)
                   contentX = r.x+r.width-width;
               if (contentY >= r.y)
                   contentY = r.y;
               else if (contentY+height <= r.y+r.height)
                   contentY = r.y+r.height-height;
           }

           TextEdit {
               id: edit
               width: flick.width
               height: flick.height
               font.pointSize: 15
               wrapMode: TextEdit.Wrap
               focus: true
               onCursorRectangleChanged:
                   flick.ensureVisible(cursorRectangle)
           }
       }

       Rectangle {
           id: scrollbar
           anchors.right: flick.right
           y: flick.visibleArea.yPosition * flick.height
           width: 10
           height: flick.visibleArea.heightRatio * flick.height
           color: "lightgrey"
       }
}

這裡使用的 Flickable 型別到後面會詳細講解。在 TextEdit 中可以設定 selectByMouse 屬性為 true 來使滑鼠可以選取文字內容，可以直接通過鍵盤快捷鍵實現文字的複製、貼上、撤銷等操作，當然也可以使用相應的函式來完成。執行效果如下圖所示：

參考：

《Qt Quick核心程式設計》第9章

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