qml 虚拟键盘

数字键盘

 普通键盘

 样式代码
VirtualKeyboard.qml

import QtQuick 2.11
import "../keyboard/ops.js" as KeyboardConfig
Rectangle {
    id: vk
    z:200
    color: "#E7E8EC"
    property string keyboardMode: "number"// number,normal
    property int keyboardButtonWidth: (parent.width - 25)/4
    property int normalButtonWidth: (parent.width - 51)/10
    property string inputTextID:""
    property string currentPage: "first"
    property bool capsClick: false
    signal buttonPressed(string op)

    ListModel{
        id:firstRowmodel
    }
    ListModel{
        id:sencodRowmodel
    }
    ListModel{
        id:thirdRowmodel
    }
    // 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

    height: vkc.height

    // Depending on the parent's focus, set the initial state
    state: parent.activeFocus ? "active" : "inactive"

    Column {
        id: vkc;
        z:201
        spacing: 5
        Row{
            width: parent.width
            height: 2
        }
        Row{
            spacing: 5
            anchors.leftMargin: 5
            anchors.left: parent.left
            //number
            Column{
                spacing: 5
                visible: keyboardMode === "number"
                Row{
                    spacing: 5
                    KeyboardButton { text: "1"; op: "1"; width: keyboardButtonWidth; onClicked: function(op){pressButton(op)}}
                    KeyboardButton { text: "2"; op: "2"; width: keyboardButtonWidth; onClicked: function(op){pressButton(op)}}
                    KeyboardButton { text: "3"; op: "3"; width: keyboardButtonWidth; onClicked: function(op){pressButton(op)}}
                }
                Row{
                    spacing: 5
                    KeyboardButton { text: "4"; op: "4"; width: keyboardButtonWidth; onClicked: function(op){pressButton(op)}}
                    KeyboardButton { text: "5"; op: "5"; width: keyboardButtonWidth; onClicked: function(op){pressButton(op)}}
                    KeyboardButton { text: "6"; op: "6"; width: keyboardButtonWidth; onClicked: function(op){pressButton(op)}}
                }