QML 学习摘录 03

QML输入元素 Input Element

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

1. 文本输入框TextInput

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

示例代码：TextInput组件 MyInput.qml

import QtQuick 2.3FocusScope {    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.3FocusScope {    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.3Rectangle {    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键切换；红色矩形可拖拽，并通过方向按键移动或者+/- 缩放。