qml标准键盘：字母、符号和空格数字键盘：数字、符号和空格

// KeyButton.qml
import QtQuick 2.12

Rectangle {
    id: button
    width: 60
    height: 50
    radius: 8

    // 公共属性
    property string text: ""
    property color bgColor: "white"
    property color textColor: "#333"

    // 信号
    signal clicked()

    color: mouseArea.pressed ? Qt.darker(bgColor, 1.1) : bgColor
    border.color: "#ddd"
    border.width: 1

    Text {
        text: button.text
        font.pixelSize: 20
        font.bold: true
        color: button.textColor
        anchors.centerIn: parent
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: button.clicked()
    }
}

// StandardKeyboard.qml
import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../pad"
ColumnLayout {
    id: keyboard
    spacing: 8

    // 键盘标题
    Text {
        text: "标准键盘"
        font.pixelSize: 16
        color: "#666"
        Layout.alignment: Qt.AlignHCenter
        Layout.bottomMargin: 10
    }

    // 第一行
    RowLayout {
        Layout.alignment: Qt.AlignHCenter
        spacing: 6

        Repeater {
            model: ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]

            Keybutton{
                text:modelData
                width: 60
                height: 50
                onClicked: if (activeInputField) activeInputField.text += text
            }
        }
    }

    // 第二行
    RowLayout {
        Layout.alignment: Qt.AlignHCenter
        spacing: 6

        Repeater {
            model: ["A", "S", "D", "F", "G", "H", "J", "K", "L"]

            Keybutton {
                text: modelData
                width: 60
                height: 50
                onClicked: if (activeInputField) activeInputField.text += text
            }
        }
    }

    // 第三行
    RowLayout {
        Layout.alignment: Qt.AlignHCenter
        spacing: 6

        // Shift键
        Keybutton {
            text: "⇧"
            width: 80
            height: 50
            bgColor: "#e0e3e9"
        }

        Repeater {
            model: ["Z", "X", "C", "V", "B", "N", "M"]

            Keybutton {
                text: modelData
                width: 60
                height: 50
                onClicked: if (activeInputField) activeInputField.text += text
            }
        }

        // 删除键
        Keybutton {
            text: "⌫"
            width: 80
            height: 50
            bgColor: "#ff5252"
            onClicked: {
                if (activeInputField && activeInputField.text.length > 0) {
                    activeInputField.text = activeInputField.text.slice(0, -1);
                }
            }
        }
    }

    // 第四行
    RowLayout {
        Layout.alignment: Qt.AlignHCenter
        spacing: 6

        // 数字键盘切换
        Keybutton {
            text: "123"
            width: 80
            height: 50
            bgColor: "#e0e3e9"
            onClicked: keyboardType("numeric")
        }

        // 空格键
        Keybutton {
            text: "空格"
            width: 300
            height: 50
            onClicked: if (activeInputField) activeInputField.text += " "
        }

        // 完成键
        Keybutton {
            text: "完成"
            width: 80
            height: 50
            bgColor: "#4CAF50"
            onClicked: keyboardClosed()
        }
    }

    // 信号
    signal keyboardType(string type)
    signal keyboardClosed()

    // 属性
    property var activeInputField: null
}

怎么用：实例化一个

             StandardKeyboard {
                activeInputField: mainWindow.activeInputField
                anchors.centerIn: parent
                onKeyboardType:  {
//                    keyboardPopup.keyboardType = type;
                }
                onKeyboardClosed: {
//                    keyboardPopup.close();
                }
            }

下面是数字键盘：

import QtQuick 2.0
import QtQuick.Layouts 1.12
import"../pad"
// NumericKeyboard.qml

ColumnLayout {
    id: keyboard
    spacing: 8

    // 键盘标题
    Text {
        text: "数字键盘"
        font.pixelSize: 16
        color: "#666"
        Layout.alignment: Qt.AlignHCenter
        Layout.bottomMargin: 10
    }

    // 第一行
    RowLayout {
        Layout.alignment: Qt.AlignHCenter
        spacing: 6

        Repeater {
            model: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
            Keybutton{
                text: modelData
                width: 60
                height: 50
                onClicked: if (activeInputField) activeInputField.text += text
            }
        }
    }

    // 第二行
    RowLayout {
        Layout.alignment: Qt.AlignHCenter
        spacing: 6

        Repeater {
            model: ["-", "/", ":", ";", "(", ")", "$", "&", "@", "\""]

            Keybutton {
                text: modelData
                width: 60
                height: 50
                onClicked: if (activeInputField) activeInputField.text += text
            }
        }
    }

    // 第三行
    RowLayout {
        Layout.alignment: Qt.AlignHCenter
        spacing: 6

        // 字母键盘切换
        Keybutton {
            text: "ABC"
            width: 80
            height: 50
            bgColor: "#e0e3e9"
            onClicked: keyboardTypeChanged("default")
        }

        Repeater {
            model: [".", ",", "?", "!", "'"]

            Keybutton {
                text: modelData
                width: 60
                height: 50
                onClicked: if (activeInputField) activeInputField.text += text
            }
        }

        // 删除键
        Keybutton {
            text: "⌫"
            width: 80
            height: 50
            bgColor:"#ff5252"
            onClicked: {
                if (activeInputField && activeInputField.text.length > 0) {
                    activeInputField.text = activeInputField.text.slice(0, -1);
                }
            }
        }
    }

    // 第四行
    RowLayout {
        Layout.alignment: Qt.AlignHCenter
        spacing: 6

        // 空格键
        Keybutton {
            text: "空格"
            width: 300
            height: 50
            onClicked: if (activeInputField) activeInputField.text += " "
        }

        // 完成键
        Keybutton {
            text: "完成"
            width: 80
            height: 50
            bgColor: "#4CAF50"
            onClicked: keyboardClosed()
        }
    }

    // 信号
    signal keyboardTypeChanged(string type)
    signal keyboardClosed()

    // 属性
    property var activeInputField: null
}

使用方法：

Window {
    id: mainWindow
    width: 800
    height: 600
    visible: true
    title: "智能输入系统"
    color: "#f5f7fa"

             NumericKeyboard {
                activeInputField: mainWindow.activeInputField
                anchors.centerIn: parent
//                onKeyboardType:  {
//                    keyboardPopup.keyboardType = type;
//                }
//                onKeyboardClosed: {
//                    keyboardPopup.close();
//                }
            }
}