QML学习之QML之键盘输入（基础可视项目）

TextInput

允许用户输入一行文本，元素支持输入约束，如validator，inputMask,echoMode
可以在文本输入中单机以更改焦点，使用KeyNavigation属性可以通过键盘更改焦点

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 200; height: 200
        color: 'linen'
        TextInput {
            id: input1
            x:8; y: 8
            width: 96;height:20
            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
        }
    }
}

演示demo

// TLineEdit.qml
import QtQuick 2.15
import QtQuick.Controls 2.15

FocusScope {
    width: 200; height: 30
    Rectangle {
        anchors.fill: parent
        color: "blue"
        border.color: "gray"
    }
    property alias text: input.text
    property alias input: input

    TextInput {
        id: input
        anchors.fill: parent
        anchors.margins: 2
        focus: true
    }
}

// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    TLineEdit {
        id: text1
        text: "text input 1"
        height: input.font.pixelSize+10
        input.color: "white"
        focus: true
        KeyNavigation.tab: text2
    }

    TLineEdit {
        id: text2
        text: "text input 2"
        y: text1.y+text1.height+12
        height: input.font.pixelSize+10
        input.color: "white"
        KeyNavigation.tab: text1
    }
}

Keys

允许基于某些按键执行代码，例如，要移动和缩放一个正方形

演示demo

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle {
        Rectangle{
            id: square
            width: 100; height: 100
            color: 'green'
            border.color: Qt.lighter(color)
        }

        focus: true
        Keys.onLeftPressed: square.x -= 8
        Keys.onRightPressed: square.x += 8
        Keys.onUpPressed: square.y -= 8
        Keys.onDownPressed: square.y += 8
        Keys.onPressed: function (event){
            switch(event.key){
            case Qt.Key_Plus:square.scale+=0.2;break;
            case Qt.Key_Minus:square.scale-=0.2;break;
            }
        }
    }

}

TextEdit

TextEdit项目与用于显示多行文本的可编辑格式化文本，TextEdit与Qt的QTextEdit很相似，既可以显示纯文本，也可以显示富文本

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    TextEdit {
        width: 200
        textFormat: Text.RichText
        text: "<b> Hello </b> <i> world </i>"
        font.family: "宋体"
        font.pointSize: 20
        color: "blue"
        focus: true
    }
}

这里将focus属性设置为true,这样可以使TextEdit项目接收键盘输入，TextEdit没有提供滚动条，光标跟随和其他可视部件中通常具有的行为，一般使用Flickable元素提供滚动条，从而实现光标跟随，更好的方式是使用TextArea

演示demo

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Item {
        width: 400;height: 300
        Flickable{
            id: flick

            anchors.fill: parent
            contentWidth: edit.paintedWidth
            contentHeight: edit.paintedHeight
            clip: true

            function ensureVisible(r)
            {
                if(contentX >= r.x)
                    contentX = r.x;
                else if (contentX+width <= r.x+r.width)
                    contentX = r.x+r.width-width;
                if(contentY >=r.y)
                    contentY = r.y
                else if(contentY+height <= r.y+r.height)
                    contentY = r.y+r.height-height;
            }

            TextEdit {
                id: edit
                width: flick.width
                height: flick.height
                font.pixelSize: 15
                wrapMode: TextEdit.Wrap
                focus: true
                onCursorRectangleChanged:
                    flick.ensureVisible(cursorRectangle)
            }
        }
        Rectangle {
            id: scrollbar
            anchors.right: flick.right
            y: flick.visibleArea.yPosition * flick.height
            width: 10
            height: flick.visibleArea.heightRatio * flick.height
            color: "lightgrey"
        }
    }
}