QML Book 第四章入门 6

4.10 输入元素

我们已经将 MouseArea 元素作为鼠标输入元素。接下来，我们将重点讨论键盘输入。我们从文本编辑元素：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

用户可以单击一个 TextInput 来改变焦点。为了支持通过键盘切换焦点，我们可以使用键盘导航（ 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 附加属性支持一个预先设置的导航键，其中一个元素 id 被绑定在给定的按键上。

文本输入元素除了闪烁的光标和输入的文本之外，没有任何视觉显示。为了让用户能够识别元素作为输入元素，它需要一些视觉装饰，例如一个简单的矩形边框。当将 TextInput 放在一个元素中时，我们需要确保导出了我们希望其他人能够访问到的的主要属性。

我们将这段代码移动到我们自己的组件中，称为 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
    }
}

** 注意： **
如果我们想完全导出 TextInput ，您可以通过使用 property alias input: input 的方式。第一个 input 是属性名，第二个 input 是元素 id。

我们使用新的 TLineEditV1 组件重写我们的 KeyNavigation 示例。

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

textinput2

然后试试 tab 键来导航。我们将发现焦点不会更改为 input2。焦点的简单使用 focus:true 是不够的。问题出现了，焦点被转移到 input2 元素上，即 TlineEditV1 中的顶级项（我们的矩形）得到了焦点，并没有将焦点转发到 TextInput。为了防止这个问题 QML 提供了 FocusScope 元素。

4.10.2 FocusScope 元素

当焦点作用域收到焦点进入事件时，焦点作用域将使最后一个 focus 属性设置为 true 的子元素接收焦点。因此，它将焦点转移到最后一个请求焦点的子元素上。我们将使用 FocusScope 作为根元素，创建一个名为 TLineEditV2 的 TLineEdit 组件的第二个版本。

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

调整完成之后，我们上面的例子将会变成下面这样：

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

现在按 tab 键可以成功地切换了两个组件之间和组件内正确的子元素的焦点。

4.10.3 TextEdit 元素

TextEdit 与 TextInput非常类似，只不过它是支持多行文本编辑的元素。它没有文本约束属性，因为它依赖于查询文本的绘制大小（paintedHeight，paintedWidth）。我们还创建了一个名为 TTextEdit 的组件，它提供了一个编辑背景，并使用焦点作用域来进行更好的焦点转发。

// 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 允许基于某些键按下执行代码。例如，移动和缩放一个正方形，我们可以连接到上、下、左和右的键来实现元素的移动，连接加和减键来实现缩放元素。

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

本章完