QML 学习摘录 03 - 输入元素

QML输入元素 Input Element

完整文档参考：https://github.com/cwc1987/QmlBook-In-Chinese

1. 文本输入框TextInput

⽂本输⼊允许⽤户输⼊⼀⾏⽂本，可以通过点击TextInput来改变焦点。为了⽀持键盘改变焦点，我们可以使⽤KeyNavigation（按键向导）这个附加属性。

示例代码：TextInput组件 MyInput.qml

import QtQuick 2.3
FocusScope {
    id: root
    width: 100;height: 20
    Rectangle {
        anchors.fill:parent
        color: "lightblue"
        border.color: "gray"
    }
    property alias text: input.text
    property alias input: input
    TextInput {
        id: input
        anchors.fill: parent
        focus: true
        color: "red"
        text: "Please input.."
    }
}

焦点区域（FocusScope）定义了如果焦点区域接收到焦点，它的最后⼀个使⽤focus:true的⼦元素接收焦点，它将会把焦点传递给最后申请焦点的⼦元素。代码使⽤焦点区域（FocusScope）作为根元素。

2. 文本编辑框TextEdit

⽂本编辑（TextEdit）元素与TextInput⾮常类似，它⽀持多⾏⽂本编辑。它不再⽀持⽂本输⼊的限制，但是提供了已绘制⽂本的⼤⼩查询（paintedHeight，paintedWidth）。

示例代码：TextEdit组件 MyEdit.qml

import QtQuick 2.3
FocusScope {
    id: root
    width: 520;height: 400
    Rectangle{
        anchors.fill:parent
        color: "lightblue"
        border.color: "gray"
    }
    property alias text:input.text
    property alias input:input
    TextEdit{
        id:input
        anchors.fill: parent
        focus:true
        color: "red"
        text:"Please input.."
     }
 }

3. 按键元素

附加属性Key允许你基于某个按键的点击来执⾏代码。例如使⽤up，down按键来移动⼀个⽅块，left，right按键来旋转⼀个元素，plus，minus按键来缩放⼀个元素。

示例代码 ： 演示TextInput、TextEdit的使用和Key属性

import QtQuick 2.3
Rectangle {
    id: root
    width: 800;height: 800
    border.color: "gray"
    Myinput {
        id: input
        x: 20;y: 10
        text: "组件：input1"
        KeyNavigation.tab: input2
    }
    Myinput {
        id: input2
        x: 20;y: 50
        text: "组件：input2"
        KeyNavigation.tab: input
    }
    MyEdit{
        id:input3
        x:20;y:80
        text:"输入你的文本..."
    }
    Rectangle{
        id:dragSquare
        x:200;y:10
        width: 40;height: 50
        color:"red"
        Drag.active:dragArea.drag.active
         MouseArea{
            id:dragArea
            anchors.fill: parent
            drag.target: parent
            onClicked:{dragSquare.focus = true}
         }
        focus:true
        /****控制矩形dragSquare的移动*****/
        Keys.onLeftPressed: dragSquare.x -=8
        Keys.onRightPressed: dragSquare.x +=8
        Keys.onDownPressed: dragSquare.y +=8
        Keys.onUpPressed: dragSquare.y -=8
        Keys.enabled: true //激活按键，否则下面代码无效
        Keys.onPressed:{
            switch(event.key)
            {
                case Qt.Key_Plus:
                    dragSquare.scale += 0.2;//dragSquare放大
                    break;
                case Qt.Key_Minus:
                    dragSquare.scale -= 0.2;//dragSquare缩小
                    break;
            }
        }
    }
}

运行效果：两个TextInput，可通过Tab键切换；红色矩形可拖拽，并通过方向按键移动或者+/- 缩放。