import QtQuick import qs.Common Rectangle { id: root property Item target height: 60 * 5 anchors.bottom: parent.bottom anchors.left: parent.left anchors.right: parent.right color: Theme.surfaceContainerHigh signal dismissed property double rowSpacing: 0.01 * width // horizontal spacing between keyboard property double columnSpacing: 0.02 * height // vertical spacing between keyboard property bool shift: false //Boolean for the shift state property bool symbols: false //Boolean for the symbol state property double columns: 10 // Number of column property double rows: 4 // Number of row property string strShift: '\u2191' property string strBackspace: "Backspace" property string strEnter: "Enter" property string strClose: "keyboard_hide" property var modelKeyboard: { "row_1": [{ "text": 'q', "symbol": '1', "width": 1 }, { "text": 'w', "symbol": '2', "width": 1 }, { "text": 'e', "symbol": '3', "width": 1 }, { "text": 'r', "symbol": '4', "width": 1 }, { "text": 't', "symbol": '5', "width": 1 }, { "text": 'y', "symbol": '6', "width": 1 }, { "text": 'u', "symbol": '7', "width": 1 }, { "text": 'i', "symbol": '8', "width": 1 }, { "text": 'o', "symbol": '9', "width": 1 }, { "text": 'p', "symbol": '0', "width": 1 }], "row_2": [{ "text": 'a', "symbol": '-', "width": 1 }, { "text": 's', "symbol": '/', "width": 1 }, { "text": 'd', "symbol": ':', "width": 1 }, { "text": 'f', "symbol": ';', "width": 1 }, { "text": 'g', "symbol": '(', "width": 1 }, { "text": 'h', "symbol": ')', "width": 1 }, { "text": 'j', "symbol": '€', "width": 1 }, { "text": 'k', "symbol": '&', "width": 1 }, { "text": 'l', "symbol": '@', "width": 1 }], "row_3": [{ "text": strShift, "symbol": strShift, "width": 1.5 }, { "text": 'z', "symbol": '.', "width": 1 }, { "text": 'x', "symbol": ',', "width": 1 }, { "text": 'c', "symbol": '?', "width": 1 }, { "text": 'v', "symbol": '!', "width": 1 }, { "text": 'b', "symbol": "'", "width": 1 }, { "text": 'n', "symbol": "%", "width": 1 }, { "text": 'm', "symbol": '"', "width": 1 }, { "text": strBackspace, "symbol": strBackspace, "width": 1.5 }], "row_4": [{ "text": strClose, "symbol": strClose, "width": 1.5 }, { "text": "123", "symbol": 'ABC', "width": 1.5 }, { "text": ' ', "symbol": ' ', "width": 4.5 }, { "text": '.', "symbol": '.', "width": 1 }, { "text": strEnter, "symbol": strEnter, "width": 1.5 }] } //Here is the corresponding table between the ascii and the key event property var tableKeyEvent: { "_0": Qt.Key_0, "_1": Qt.Key_1, "_2": Qt.Key_2, "_3": Qt.Key_3, "_4": Qt.Key_4, "_5": Qt.Key_5, "_6": Qt.Key_6, "_7": Qt.Key_7, "_8": Qt.Key_8, "_9": Qt.Key_9, "_a": Qt.Key_A, "_b": Qt.Key_B, "_c": Qt.Key_C, "_d": Qt.Key_D, "_e": Qt.Key_E, "_f": Qt.Key_F, "_g": Qt.Key_G, "_h": Qt.Key_H, "_i": Qt.Key_I, "_j": Qt.Key_J, "_k": Qt.Key_K, "_l": Qt.Key_L, "_m": Qt.Key_M, "_n": Qt.Key_N, "_o": Qt.Key_O, "_p": Qt.Key_P, "_q": Qt.Key_Q, "_r": Qt.Key_R, "_s": Qt.Key_S, "_t": Qt.Key_T, "_u": Qt.Key_U, "_v": Qt.Key_V, "_w": Qt.Key_W, "_x": Qt.Key_X, "_y": Qt.Key_Y, "_z": Qt.Key_Z, "_←": Qt.Key_Backspace, "_return": Qt.Key_Return, "_ ": Qt.Key_Space, "_-": Qt.Key_Minus, "_/": Qt.Key_Slash, "_:": Qt.Key_Colon, "_;": Qt.Key_Semicolon, "_(": Qt.Key_BracketLeft, "_)": Qt.Key_BracketRight, "_€": parseInt( "20ac", 16) // I didn't find the appropriate Qt event so I used the hex format , "_&": Qt.Key_Ampersand, "_@": Qt.Key_At, '_"': Qt.Key_QuoteDbl, "_.": Qt.Key_Period, "_,": Qt.Key_Comma, "_?": Qt.Key_Question, "_!": Qt.Key_Exclam, "_'": Qt.Key_Apostrophe, "_%": Qt.Key_Percent, "_*": Qt.Key_Asterisk } Item { id: keyboard_container anchors.left: parent.left anchors.leftMargin: 5 anchors.right: parent.right anchors.top: parent.top anchors.topMargin: 5 anchors.bottom: parent.bottom anchors.bottomMargin: 5 //One column which contains 5 rows Column { spacing: columnSpacing Row { id: row_1 spacing: rowSpacing Repeater { model: modelKeyboard["row_1"] delegate: CustomButtonKeyboard { text: symbols ? modelData.symbol : shift ? modelData.text.toUpperCase () : modelData.text width: modelData.width * keyboard_container.width / columns - rowSpacing height: keyboard_container.height / rows - columnSpacing onClicked: root.clicked(text) } } } Row { id: row_2 spacing: rowSpacing Repeater { model: modelKeyboard["row_2"] delegate: CustomButtonKeyboard { text: symbols ? modelData.symbol : shift ? modelData.text.toUpperCase () : modelData.text width: modelData.width * keyboard_container.width / columns - rowSpacing height: keyboard_container.height / rows - columnSpacing onClicked: root.clicked(text) } } } Row { id: row_3 spacing: rowSpacing Repeater { model: modelKeyboard["row_3"] delegate: CustomButtonKeyboard { text: symbols ? modelData.symbol : shift ? modelData.text.toUpperCase () : modelData.text width: modelData.width * keyboard_container.width / columns - rowSpacing height: keyboard_container.height / rows - columnSpacing isShift: shift && text === strShift onClicked: root.clicked(text) } } } Row { id: row_4 spacing: rowSpacing Repeater { model: modelKeyboard["row_4"] delegate: CustomButtonKeyboard { text: symbols ? modelData.symbol : shift ? modelData.text.toUpperCase () : modelData.text width: modelData.width * keyboard_container.width / columns - rowSpacing height: keyboard_container.height / rows - columnSpacing onClicked: root.clicked(text) } } } } } signal clicked(string text) Connections { target: root function onClicked(text) { if (!keyboard_controller.target) return if (text === strShift) { root.shift = !root.shift } else if (text === '123') { root.symbols = true } else if (text === 'ABC') { root.symbols = false } else if (text === strEnter) { if (keyboard_controller.target.accepted) { keyboard_controller.target.accepted() } } else if (text === strClose) { root.dismissed() } else { if (text === strBackspace) { var current = keyboard_controller.target.text keyboard_controller.target.text = current.slice(0, current.length - 1) } else { var charToInsert = root.symbols ? text : (root.shift ? text.toUpperCase () : text) var current = keyboard_controller.target.text var cursorPos = keyboard_controller.target.cursorPosition keyboard_controller.target.text = current.slice(0, cursorPos) + charToInsert + current.slice(cursorPos) keyboard_controller.target.cursorPosition = cursorPos + 1 } if (root.shift && text !== strShift) root.shift = false } } } }