【Qt】QML快速入門7——輸入元素
QML快速入門
【Qt】QML快速入門1——語法：https://blog.csdn.net/See_Star/article/details/113729827
【Qt】QML快速入門2——基本元素：https://blog.csdn.net/See_Star/article/details/113730053
【Qt】QML快速入門3——元件：https://blog.csdn.net/See_Star/article/details/113730209
【Qt】QML快速入門4——簡單轉換：https://blog.csdn.net/See_Star/article/details/113736543
【Qt】QML快速入門5——定位元素：
【Qt】QML快速入門6——佈局元素：https://blog.csdn.net/See_Star/article/details/113737297
【Qt】QML快速入門7——輸入元素：https://blog.csdn.net/See_Star/article/details/113737418
輸入元素（Input Element）
我們已經使用過MouseArea（滑鼠區域）作為滑鼠輸入元素。這裡我們將更多的介紹關於鍵盤輸入的一些東西。我們開始介紹文字編輯的元素：TextInput（文字輸入）和TextEdit（文字編輯）。
目錄
1 文字輸入（TextInput）
文字輸入允許使用者輸入一行文字。這個元素支援使用正則表示式驗證器來限制輸入和輸入掩碼的模式設定。
// textinput.qml 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" } }
使用者可以通過點選TextInput來改變焦點。為了支援鍵盤改變焦點，我們可以使用KeyNavigation（按鍵嚮導）這個附加屬性。
// textinput2.qml
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（按鍵嚮導）附加屬性可以預先設定一個元素id繫結切換焦點的按鍵。
一個文字輸入元素（text input element）只顯示一個閃爍符和已經輸入的文字。使用者需要一些可見的修飾來鑑別這是一個輸入元素，例如一個簡單的矩形框。當你放置一個TextInput（文字輸入）在一個元素中時，你需要確保其它的元素能夠訪問它匯出的大多數屬性。
我們提取這一段程式碼作為我們自己的元件，稱作TLineEditV1用來重複使用。
// TLineEditV1.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元素，你可以使用property alias input: input來匯出這個元素。第一個input是屬性名字，第二個input是元素id。
我們使用TLineEditV1元件重寫了我們的KeyNavigation（按鍵嚮導）的例子。
Rectangle {
...
TLineEditV1 {
id: input1
...
}
TLineEditV1 {
id: input2
...
}
}
嘗試使用Tab按鍵來導航，你會發現焦點無法切換到input2上。這個例子中使用focus:true的方法不正確，這個問題是因為焦點被轉移到input2元素時，包含TlineEditV1的頂部元素接收了這個焦點並且沒有將焦點轉發給TextInput（文字輸入）。為了防止這個問題，QML提供了FocusScope（焦點區域）。
2 焦點區域（FocusScope）
一個焦點區域（focus scope）定義瞭如果焦點區域接收到焦點，它的最後一個使用focus:true的子元素接收焦點，它將會把焦點傳遞給最後申請焦點的子元素。我們建立了第二個版本的TLineEdit元件，稱作TLineEditV2，使用焦點區域（focus scope）作為根元素。
// TLineEditV2.qml
import QtQuick 2.0
FocusScope {
width: 96; height: input.height + 8
Rectangle {
anchors.fill: parent
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
}
}
現在我們的例子將像下面這樣：
Rectangle {
...
TLineEditV2 {
id: input1
...
}
TLineEditV2 {
id: input2
...
}
}
按下Tab按鍵可以成功的在兩個元件之間切換焦點，並且能夠正確的將焦點鎖定在元件內部的子元素中。
3 文字編輯（TextEdit）
文字編輯（TextEdit）元素與文字輸入（TextInput）非常類似，它支援多行文字編輯。它不再支援文字輸入的限制，但是提供了已繪製文字的大小查詢（paintedHeight，paintedWidth）。我們也建立了一個我們自己的元件TTextEdit，可以編輯它的背景，使用focus scope（焦點區域）來更好的切換焦點。
// TTextEdit.qml
import QtQuick 2.0
FocusScope {
width: 96; height: 96
Rectangle {
anchors.fill: parent
color: "lightsteelblue"
border.color: "gray"
}
property alias text: input.text
property alias input: input
TextEdit {
id: input
anchors.fill: parent
anchors.margins: 4
focus: true
}
}
你可以像下面這樣使用這個元件：
// textedit.qml
import QtQuick 2.0
Rectangle {
width: 136
height: 120
color: "linen"
TTextEdit {
id: input
x: 8; y: 8
width: 120; height: 104
focus: true
text: "Text Edit"
}
}
4 按鍵元素（Key Element）
附加屬性key允許你基於某個按鍵的點選來執行程式碼。例如使用up，down按鍵來移動一個方塊，left，right按鍵來旋轉一個元素，plus，minus按鍵來縮放一個元素。
// keys.qml
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;
}
}
}
