QML之虚拟键盘

文件列表：

main.qml

import QtQuick 1.0

import "components"

import "components/ops.js" as Ops

Rectangle {

    id: window

    width: 600; height: 380

    color: "#444444"

    property string rotateLeft: "\u2939"

    property string rotateRight: "\u2935"

    property string leftArrow: "\u2190"

    property string upperArrow: "\u2191"

    property string division : "\u00f7"

    property string multiplication : "\u00d7"

    property string squareRoot : "\u221a"

    property string plusminus : "\u00b1"

    // if the background is clicked then other Items lose focus

    MouseArea {

     anchors.fill: parent

            onClicked: { parent.focus = true; vk.state = "inactive"; }

    }

    Column {

        spacing: 8

        anchors { fill: parent; margins: 10 }

    LineEdit {

            id: lineEdit1

            width: parent.width; height: 64

            MouseArea {

                anchors.fill: parent

                onClicked: {

                    vk.state = "active";

                    parent.focus = true

                }

            }

        }

        LineEdit {

            id: lineEdit2

            width: parent.width; height: 64

            MouseArea {

                anchors.fill: parent

                onClicked: { vk.state = "active"; parent.focus = true }

            }

        }

    }

    VirtualKeyboard {

        id: vk;

        onButtonPressed: {

            console.log("Keyboard sent: " + op)

            Ops.doOperation(op)

        }

    }

}

----------------------------------------

Button.qml

import QtQuick 1.0

BorderImage {

    id: button

    property alias text: buttonText.text

    property string op: buttonText.op

    property alias shiftText: buttonShiftText.text

    property string shiftOp: buttonShiftText.op

    signal clicked(string op)

    width: 50

    height: 50

    source: "images/button.png"; clip: true

    border { left: 10; top: 10; right: 10; bottom: 10 }

    Rectangle {

        id: shade

        anchors {fill: button;}

        radius: 10;

        color: "black";

        opacity: 0

    }

    Text {

        id: buttonText

        anchors { centerIn: parent; }

        font.family: "Times New Roman"

        font.pixelSize: parent.width > parent.height ? parent.height * .6 : parent.width * .6

        style: Text.Sunken;

        color: "black";

        styleColor: "black";

        smooth: true

    }

    Text {

        id: buttonShiftText

        anchors {

            top: parent.top

            right: parent.right

            rightMargin: 8

        }

        font.pixelSize: parent.width > parent.height ? parent.height * .25 : parent.width * .25

      //  style: Text.Sunken;

        color: "white";

        styleColor: "black";

        smooth: true

    }

    MouseArea {

        id: mouseArea

        anchors.fill: parent

        onClicked: button.clicked(op)

    }

    states: State {

        name: "pressed"; when: mouseArea.pressed == true

        PropertyChanges { target: shade; opacity: .3 }

    }

}

------------------------------------------------------------------

LineEdit.qml

import QtQuick 1.0

FocusScope {

    id: scope

    //FocusScope needs to bind to visual properties of the children

    property alias color: rectangle.color

    property alias text : displayText.text

    x: rectangle.x

    y: rectangle.y

    width: rectangle.width

    height: rectangle.height

    Rectangle {

            id: rectangle

    //property alias text : displayText.text

        /* set the default values for the LineEdit */

        // when active there should be an orange border

        border.color: "orange"

        border.width: scope.activeFocus ? 5 : 0

        // Properties that are passed in to this Item

        width: parent.width

        height: parent.height

        // Properties that are given a value

        radius: 10

        focus: false

        Text {

            id: displayText

            anchors {

                left: parent.left;

                verticalCenter: parent.verticalCenter;

                margins: 6

            }

            // The width must be set for eliding to work properly

            width: parent.width - 6

            // Text properties

            font.pixelSize: parent.height * .6;  // Text should fit in the the field

            elide: Text.ElideLeft   // Scroll the text to the left when it is longer

            // than the width of the LineEdit

            color: "#343434"

            smooth: true;           // Use font smoothing

            font.bold: true         // font is bold

            font.family: "Times New Roman"

        }

    }

    MouseArea { anchors.fill: parent; onClicked: { scope.focus = true } }

}

--------------------------------------------------------------

VirtualKeyboard.qml 

import QtQuick 1.0

Rectangle {

    id: vk

    property string rotateLeft: "\u2939"

    property string rotateRight: "\u2935"

    property string leftArrow: "\u2190"

    property string upperArrow: "\u2191"

    property string division : "\u00f7"

    property string multiplication : "\u00d7"

    property string squareRoot : "\u221a"

    property string plusminus : "\u00b1"

    signal buttonPressed(string op)

    // span the parent's width

    anchors {

        left: parent.left

        right: parent.right

    }

    // A virtual keyboard (VK) is attached the the bottom of an Item

    // and slides up when activated.

    // this item is called the surface

    property Item surface: parent

    // By default the VK's height is at the bottom of the surface

    y: surface.height

    // Depending on the parent's focus, set the initial state

    state: parent.activeFocus ? "active" : "inactive"

    Column {

        id: vkc;

        anchors {

            horizontalCenter: parent.horizontalCenter

            margins: 4

        }

        spacing: 6

        Row {

            spacing: 6

            anchors.horizontalCenter: parent.horizontalCenter

            Button { text: "q"; op: "q"; shiftText: "1"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "w"; op: "w"; shiftText: "2"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "e"; op: "e"; shiftText: "3"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "r"; op: "r"; shiftText: "4"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "t"; op: "t"; shiftText: "5"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "y"; op: "y"; shiftText: "6"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "u"; op: "u"; shiftText: "7"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "i"; op: "i"; shiftText: "8"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "o"; op: "o"; shiftText: "9"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "p"; op: "p"; shiftText: "0"; Component.onCompleted: clicked.connect(buttonPressed)}

        }

        Row {

            spacing: 6

            anchors.horizontalCenter: parent.horizontalCenter

            Button { text: "a"; op: "a"; shiftText: "@"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "s"; op: "s"; shiftText: "#"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "d"; op: "d"; shiftText: "%"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "f"; op: "f"; shiftText: "&"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "g"; op: "g"; shiftText: "*"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "h"; op: "h"; shiftText: "-"; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "j"; op: "j"; shiftText: "+"; shiftOp: "+" ; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "k"; op: "k"; shiftText: "="; shiftOp: "=" ; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "l"; op: "l"; shiftText: "/"; shiftOp: "/" ; Component.onCompleted: clicked.connect(buttonPressed)}

        }

        Row {

            spacing: 6

            anchors.horizontalCenter: parent.horizontalCenter

            Button { text: "z"; op: "z"; shiftText: "_"; shiftOp: "_" ; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "x"; op: "x"; shiftText: "$"; shiftOp: "$" ; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "c"; op: "c"; shiftText: "^"; shiftOp: "%" ; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "v"; op: "v"; shiftText: "\""; shiftOp: "&" ; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "b"; op: "b"; shiftText: "\'"; shiftOp: "*" ; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "n"; op: "n"; shiftText: ":"; shiftOp: "-" ; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "m"; op: "m"; shiftText: ";"; shiftOp: "+" ; Component.onCompleted: clicked.connect(buttonPressed)}

        }

        Row {

            spacing: 6

            anchors.horizontalCenter: parent.horizontalCenter

            Button { text: upperArrow; op: upperArrow ; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { text: "Alt"; op: "" ; Component.onCompleted: clicked.connect(buttonPressed)}

            Button { width: 200; height: vk.h; text: "Space"; op: " "; Component.onCompleted: clicked.connect(buttonPressed) }

            Button { width: 80; text: ".com"; op: ".com"; Component.onCompleted: clicked.connect(buttonPressed) }

            Button { text: leftArrow; op: leftArrow; Component.onCompleted: clicked.connect(buttonPressed) }

        }

    }

    states: [

        State {

            name: "active"

            PropertyChanges { target: vk; y: (surface.height - vkc.height); }

        },

        State {

            name: "inactive"

            PropertyChanges { target: vk; y: surface.height + 8; }

        }

    ]

    transitions: Transition {

        NumberAnimation {

            target: vk

            property: "y"

            easing.type: "OutQuad"

            duration: 250

        }

    }

}

-----------------------------------------------------------------

JS

function doOperation(op) {

    var t = (lineEdit1.activeFocus ? lineEdit1.text : lineEdit2.text)

    if (op == leftArrow) {

        t = t.toString().slice(0, -1)

        if (t.length == 0) {

            t = ""

        }

    } else {

        t = t + op.toString()

    }

    lineEdit1.activeFocus ? lineEdit1.text = t : lineEdit2.text = t

}