4.10 輸入元素

我們已經(jīng)將 MouseArea 元素作為鼠標(biāo)輸入元素。接下來，我們將重點(diǎn)討論鍵盤輸入。我們從文本編輯元素：TextInput 和 TextEdit 開始。

4.10.1 TextInput 元素

TextInput 元素允許用戶輸入一行文本。該元素支持輸入約束，如 validator、inputMask 和 echoMode。

// textinput.qml

import QtQuick 2.5

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

用戶可以單擊一個(gè) TextInput 來改變焦點(diǎn)。為了支持通過鍵盤切換焦點(diǎn)，我們可以使用鍵盤導(dǎo)航（ KeyNavigation ）附加屬性。

// textinput2.qml

import QtQuick 2.5

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 附加屬性支持一個(gè)預(yù)先設(shè)置的導(dǎo)航鍵，其中一個(gè)元素 id 被綁定在給定的按鍵上。

文本輸入元素除了閃爍的光標(biāo)和輸入的文本之外，沒有任何視覺顯示。為了讓用戶能夠識(shí)別元素作為輸入元素，它需要一些視覺裝飾，例如一個(gè)簡單的矩形邊框。當(dāng)將 TextInput 放在一個(gè)元素中時(shí)，我們需要確保導(dǎo)出了我們希望其他人能夠訪問到的的主要屬性。

我們將這段代碼移動(dòng)到我們自己的組件中，稱為 TLineEditV1，以便重用。

// TLineEditV1.qml

import QtQuick 2.5

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

** 注意： **
如果我們想完全導(dǎo)出 TextInput ，您可以通過使用 property alias input: input 的方式。第一個(gè) input 是屬性名，第二個(gè) input 是元素 id。

我們使用新的 TLineEditV1 組件重寫我們的 KeyNavigation 示例。

Rectangle {
    ...
    TLineEditV1 {
        id: input1
        ...
    }
    TLineEditV1 {
        id: input2
        ...
    }
}

textinput2

然后試試 tab 鍵來導(dǎo)航。我們將發(fā)現(xiàn)焦點(diǎn)不會(huì)更改為 input2。焦點(diǎn)的簡單使用 focus:true 是不夠的。問題出現(xiàn)了，焦點(diǎn)被轉(zhuǎn)移到 input2 元素上，即 TlineEditV1 中的頂級(jí)項(xiàng)（我們的矩形）得到了焦點(diǎn)，并沒有將焦點(diǎn)轉(zhuǎn)發(fā)到 TextInput。為了防止這個(gè)問題 QML 提供了 FocusScope 元素。

4.10.2 FocusScope 元素

當(dāng)焦點(diǎn)作用域收到焦點(diǎn)進(jìn)入事件時(shí)，焦點(diǎn)作用域?qū)⑹棺詈笠粋€(gè) focus 屬性設(shè)置為 true 的子元素接收焦點(diǎn)。因此，它將焦點(diǎn)轉(zhuǎn)移到最后一個(gè)請(qǐng)求焦點(diǎn)的子元素上。我們將使用 FocusScope 作為根元素，創(chuàng)建一個(gè)名為 TLineEditV2 的 TLineEdit 組件的第二個(gè)版本。

// TLineEditV2.qml

import QtQuick 2.5

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

調(diào)整完成之后，我們上面的例子將會(huì)變成下面這樣：

Rectangle {
    ...
    TLineEditV2 {
        id: input1
        ...
    }
    TLineEditV2 {
        id: input2
        ...
    }
}

現(xiàn)在按 tab 鍵可以成功地切換了兩個(gè)組件之間和組件內(nèi)正確的子元素的焦點(diǎn)。

4.10.3 TextEdit 元素

TextEdit 與 TextInput非常類似，只不過它是支持多行文本編輯的元素。它沒有文本約束屬性，因?yàn)樗蕾囉诓樵兾谋镜睦L制大?。╬aintedHeight，paintedWidth）。我們還創(chuàng)建了一個(gè)名為 TTextEdit 的組件，它提供了一個(gè)編輯背景，并使用焦點(diǎn)作用域來進(jìn)行更好的焦點(diǎn)轉(zhuǎn)發(fā)。

// TTextEdit.qml

import QtQuick 2.5

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

4.10.4 Keys 元素

附加的屬性 Keys 允許基于某些鍵按下執(zhí)行代碼。例如，移動(dòng)和縮放一個(gè)正方形，我們可以連接到上、下、左和右的鍵來實(shí)現(xiàn)元素的移動(dòng)，連接加和減鍵來實(shí)現(xiàn)縮放元素。

// keys.qml

import QtQuick 2.5

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

    }
}

keys

本文參考鏈接：Quick Starter

本章完