#（82）：輸入元素 前面的章節中，我們看到了作為輸入元素的`MouseArea`，用于接收鼠標的輸入。下面，我們再來介紹關于鍵盤輸入的兩個元素：`TextInput`和`TextEdit`。 `TextInput`是單行的文本輸入框，支持驗證器、輸入掩碼和顯示模式等。 ~~~ import QtQuick 2.0 Rectangle { width: 200 height: 80 color: "linen" TextInput { id: input1 x: 8; y: 8 width: 96; height: 20 focus: true text: "Text Input 1" } TextInput { id: input2 x: 8; y: 36 width: 96; height: 20 text: "Text Input 2" } } ~~~ [](http://files.devbean.net/images/2014/02/qml-input-element.png) 注意，我們這里放置了兩個`TextInput`，用戶可以通過點擊輸入框改變焦點。如果我們想支持鍵盤導航，可以添加`KeyNavigation`附加屬性。 ~~~ import QtQuick 2.0 Rectangle { width: 200 height: 80 color: "linen" TextInput { id: input1 x: 8; y: 8 width: 96; height: 20 focus: true text: "Text Input 1" KeyNavigation.tab: input2 } TextInput { id: input2 x: 8; y: 36 width: 96; height: 20 text: "Text Input 2" KeyNavigation.tab: input1 } } ~~~ `KeyNavigation`是一個附加屬性。當用戶點擊了指定的按鍵時，屬性指定的組件就會獲得焦點。附加屬性類似于普通屬性，但是又有所區別。普通的屬性隸屬于這個類型；附加屬性一般用于修飾或補充目標類型。比如這里的`KeyNavigation.tab`并不是`TextInput`的普通屬性，僅僅是用來說明`TextInput`的一種特征。附加屬性的一般語法是`類型.屬性名`，以此為例，類型就是`KeyNavigation`，屬性名就是`tab`。 與`QLineEdit`不同，QML 的文本出入組件只有一個閃動的光標和用戶輸入的文本，沒有邊框等可視元素。因此，為了能夠讓用戶意識到這是一個可輸入元素，通常需要一些可視化修飾，比如繪制一個矩形框。當我們這么做的時候，創建一個完整的組件可能是更好的選擇，只是要記得導出所需要的屬性，以便外部使用。按照這種思路，我們創建一個組件： ~~~ // LineEdit.qml import QtQuick 2.0 Rectangle { width: 96; height: input.height + 8 color: "lightsteelblue" border.color: "gray" property alias text: input.text property alias input: input TextInput { id: input anchors.fill: parent anchors.margins: 4 focus: true } } ~~~ 為了讓外界可以直接設置`TextInput`的`text`屬性，我們給這個屬性聲明了一個別名。同時，為了讓外界可以訪問到內部的`textInput`，我們將這個子組件也暴露出來。不過，從封裝的角度而言，將實現細節暴露出去并不是一個好的設計，這要看暴露出來這個子組件的影響究竟有多大。然而這些都是關于設計的問題，需要具體問題具體分析，這里不再贅述。 下面我們可以將前面的例子修改成我們新創建的`LineEdit`組件： ~~~ import QtQuick 2.0 Rectangle { width: 200 height: 80 color: "linen" LineEdit { id: input1 x: 8; y: 8 width: 96; height: 20 focus: true text: "Text Input 1" KeyNavigation.tab: input2 } LineEdit { id: input2 x: 8; y: 36 width: 96; height: 20 text: "Text Input 2" KeyNavigation.tab: input1 } } ~~~ 只要將 LineEdit.qml 與 main.qml 放在同一目錄下，我們就不需要額外的操作，即可在 main.qml 中直接使用`LineEdit`。運行結果如下： [](http://files.devbean.net/images/2014/03/custom-lineedit.png) 現在再來試試鍵盤導航。這次無論怎么按鍵盤，焦點始終不會到`input2`。雖然我們在組件中添加了`focus: true`，可是不起作用。原因是，焦點被`inputText`的父組件`Rectangle`獲得，然而，`Rectangle`不會將焦點轉發給`inputText`。為了解決這一問題，QML提供了另外一個組件`FocusScope`。 當`FocusScope`接收到焦點時，會將焦點轉發給最后一個設置了`focus:true`的子對象。所以，我們可以使用`FocusScope`重寫`LineEdit`組件： ~~~ // LineEdit.qml import QtQuick 2.0 FocusScope { width: 96; height: input.height + 8 color: "lightsteelblue" border.color: "gray" property alias text: input.text property alias input: input TextInput { id: input anchors.fill: parent anchors.margins: 4 focus: true } } ~~~ 這樣修改過之后，我們就可以像之前的`TextInput`一樣正常使用了。 `TextEdit`與`TextInput`非常類似，唯一區別是`TextEdit`是多行的文本編輯組件。與`TextInput`類似，`TextEdit`也沒有一個可視化的顯示，所以我們也需要自己繪制其顯示區域。這些內容與前面代碼幾乎一樣，這里不再贅述。 附加屬性`Keys`類似于鍵盤事件，允許我們相應特定的按鍵按下事件。例如，我們可以利用方向鍵控制舉行的位置，如下代碼所示： ~~~ import QtQuick 2.0 DarkSquare { width: 400; height: 200 GreenSquare { id: square x: 8; y: 8 } focus: true Keys.onLeftPressed: square.x -= 8 Keys.onRightPressed: square.x += 8 Keys.onUpPressed: square.y -= 8 Keys.onDownPressed: square.y += 8 Keys.onPressed: { switch(event.key) { case Qt.Key_Plus: square.scale += 0.2 break; case Qt.Key_Minus: square.scale -= 0.2 break; } } } ~~~