QML英文拟态键盘，英文数字符号输入法

news2024/11/23 14:15:36

文章目录

  • QML 英文拟态键盘
    • 思维导图
    • 更多细节欢迎私信
    • 效果图：
    • 核心代码：KeyboardLetter.qml，**CustomerKeyboard.qml**，Example.qml
    • CustomerKeyboard.qml
    • Button.qml
    • ButtonBase.qml
    • ButtonStateImage.qml
    • DialogBase.qml
    • Example.qml
    • ImageButton.qml
    • Input.qml
    • KeyboardNumber.qml
    • PopuoKeyboard.qml
    • PushButton.qml
    • TextWarning.qml
    • 更多细节欢迎私信

QML 英文拟态键盘

思维导图

更多细节欢迎私信

image-20240521204708099

效果图：

image-20240523095622830

image-20240523095640447

image-20240523095659649

image-20240523100304132

image-20240523100323735

image-20240523100345486

核心代码：KeyboardLetter.qml，CustomerKeyboard.qml，Example.qml

import QtQuick 2.3
import A7 1.0
import 'qrc:/UI/Control' as Control
Item {
    id: root
	//向外传递信号
    signal pressed(int index, bool pressing)
    signal clicked(int index, string text)

    signal sure
    signal clearInputOne
    signal clearInput
	//切换标志
    property bool isUpper : false
    property bool isEN    : false
    property int isSymbol: 0//0英文键盘，1数字符号键盘
	//切换总控制是否显示
    onIsSymbolChanged: {
        switch(isSymbol){
        case 0 :
            letterFlow.active = true
            symbolFlow.active = false
            //strFlow.active = false
            break
        case 1 :
            letterFlow.active = false
            symbolFlow.active = true
            //strFlow.active = false
            break
        case 2 :
            letterFlow.active = false
            symbolFlow.active = false
            //strFlow.active = true


        }
    }
    onVisibleChanged: {
        isSymbol = 0
    }
	//键盘文言
    QtObject {
        id: __
        property var letterModel: [
            'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',
            '', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',
            'UP', 'z', 'x', 'c', 'v', 'b', 'n', 'm','!', '<-',
            '>','?123',',', 'space', '.','sure'
        ]

        property var symbolEnModel: [
            '1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
            '', '@', '#', '$', '&', '(', ')', '"', '_', '?',
            'UP','%', '-', '~', '...', '*', ';', '/', '!', '<-',
            '>','?123', ',','space', '.', 'sure'
        ]

//        property var strModel: [
//            '[', ']', '{', '}', '#', '%', '^', '*', '+', '=',
//            '', '_', '-', '\\', '|', '~', '《', '》', '$', '&',
//            'UP','…', '、', '’', '?', '!', '.',',', '.', '<-',
//            '>','?123','#+=','space', ',', 'sure'
//        ]
    }
	//键盘布局逻辑
    Component {
        id: keyCom

        Item {
            width: keyButton.width
            height: keyButton.height
			//选择时高亮显示
            Component.onCompleted: {
                switch (modelData) {
                case '':
                    width  = 64
                    height = 68
                    keyButton.visible = false
                    break
                case 'UP':
                    keyButton.checked = Qt.binding(function() { return root.isUpper});break
                case '?123':keyButton.checked = Qt.binding(function() { return root.isSymbol===1});break
                //case '#+=':keyButton.checked = Qt.binding(function() { return root.isSymbol===2});break
                }
            }
			//按钮大小及特殊键位功能
            PushButton {
                id: keyButton
                width: {
                    switch (modelData) {
                    case 'space': 500; break//if (root.isSymbol) break
                    case 'sure': 245; break
                    default    : 120 ; break
                    }
                }
                height: 68
                font.pixelSize: 38
                textArea.visible: !icon.visible
                text: {
                    switch (modelData) {
                    case '<<'  : main.tr('Keyboard.button.back'); break
                    case 'sure': main.tr('Keyboard.button.finish'); break
                    default    : root.isUpper ? modelData.toUpperCase() : modelData; break
                    }
                }
                source: {
                    switch (modelData) {
                    case 'UP'  : main.res('keyboard.btn.shift.big.nor')  ; break
                    case '<-' : main.res('keyboard.btn.delete.nor'); break
                    case '>'  : main.res('keyboard.btn.packup.nor'); break
                    default   : ''; break
                    }
                }
                onPressingChanged: root.pressed(index, pressing)
                onClicked: {
                    var ent = text
                    switch (modelData) {
                    case '<-'  : root.clearInputOne(); break
                    case '>'   : root.sure();ent ='';break
                    case '?123' :
                        if(root.isSymbol===1) root.isSymbol = 0
                        else root.isSymbol = 1
                        break
//                    case '#+='  :
//                        if(root.isSymbol===2) root.isSymbol = 0
//                        else root.isSymbol = 2
//                        break
                    case 'sure': root.sure(); break
                    case 'UP'   : root.isUpper = !root.isUpper; break
                    case 'space'   : ent = ' '
                    default:
                        root.clicked(index, ent)
                        break
                    }
                }
                onLongPressed: {
                    if (modelData === '<-') root.clearInput()
                }
            }
        }
    }
    Loader {
        id: letterFlow
        anchors.fill: parent
        active: true
        sourceComponent: Component {
            Flow {
                anchors.fill: parent
                spacing: 6
                Repeater {
                    model: __.letterModel

                    delegate: keyCom
                }
            }
        }
    }

    Loader {
        id: symbolFlow
        anchors.fill: parent
        active: false
        sourceComponent: Component {
            Flow {
                anchors.fill: parent
                spacing: 6
                Repeater {
                    model:__.symbolEnModel
                    delegate: keyCom
                }
            }
        }

//        Loader {
//            id: strFlow
//            anchors.fill: parent
//            active: false
//            sourceComponent: Component {
//                Flow {
//                    anchors.fill: parent
//                    spacing: 6
//                    Repeater {
//                        model:__.strModel
//                        delegate: keyCom
//                    }
//                }
//            }
//        }
    }
}

CustomerKeyboard.qml

import QtQuick 2.0
import 'qrc:/UI/Core' as Core
PopuoKeyboard{
    id : root
    property var inputBreak: (function() {})
    property var inputText
	//输入
    function input(text) {
        if (inputBreak(inputText.text, text)) return
        inputText.cursorVisible = true
        inputText.remove(inputText.selectionStart, inputText.selectionEnd)
        inputText.insert(inputText.cursorPosition, text)
        inputText.deselect()
    }
	
    function reset() {
        inputText.text = ''
        inputText.cursorVisible = false
        inputText.deselect()
    }
    //清空单个文本
    function deleteText() {
        if (inputText.text === '') return
        if (inputText.selectedText === '') {
            inputText.remove(inputText.cursorPosition - 1,
                             inputText.cursorPosition)
        }
        else inputText.remove(inputText.selectionStart, inputText.selectionEnd)
        inputText.deselect()
    }
    //清空所有文本
    function deleteTextAll() {
        inputText.remove(0, inputText.cursorPosition)
    }
    onClicked: {
//        if(inputText.cursorPosition>31){
//                textWarning.show({})
//                return
//        }

        input(text)
        console.log("text:",text);
    }
    onClearInput: {
        deleteTextAll()
    }
    onClearInputOne: {
        deleteText()
    }
    onSure: {
        visible = false
    }
    onVisibleChanged: {
        if( root.visible ) {
            animShow.running = true
            root.visible = Qt.binding(function(){return  inputText.visible;})
        }
        else{
            root.visible = false;
            inputText = undefined
        }
    }
        Core.ItemLoader {
        id: textWarning
        z:15
        sourceComponent: TextWarning{}
    }
}

Button.qml

import QtQuick 2.3
import 'qrc:/UI/Control' as Control
ButtonBase {
    id: root

    property alias bg: bg.children
    property alias icon: icon
    property alias source: icon.source
    property alias mipmap : icon.mipmap
    property alias asynchronous: icon.asynchronous
    property alias textArea: text
    property alias text: text.text
    property alias font: text.font
    property alias textColor: text.color
    property alias antialiasing: text.antialiasing
    property alias renderType: text.renderType

    Item {
        id: bg
        anchors.fill: parent
    }

    Image {
        id: icon
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
        visible: status === Image.Ready
        antialiasing: true
        source: source
    }

   Control.NonAnimationText {
        id: text
        anchors.centerIn: root
        visible: text !== ''
    }
}

ButtonBase.qml

import QtQuick 2.3
import QtQuick.Controls 1.2
import 'qrc:/UI/Control' as Control

Item {
    id: root

    property bool interactive: true
    property real scaleRatio: 0.95
    property bool longPressEnabled: false
    property int  longPressInterval: 800
    property bool pressing: false
    property bool checked: false
    property bool longPressing: false
    property bool touchIn: true
    property bool usingOnClicked: false
    property bool scaleAnimation: false

    /*!
        This is whether the attribute should block invalid beep corresponding
        \c: default is true
     */
    property bool exclusiveBeep: true

    property ExclusiveGroup exclusiveGroup

    signal clicked
    signal doubleClicked
    signal longPressed
    signal pressed
    signal released
    signal canceled
    signal checked

    onExclusiveGroupChanged: exclusiveGroup && exclusiveGroup.bindCheckable(root)

    // filter beep
    onClicked: if (exclusiveBeep) (global.get('Button.onClicked') || function() {})()

    scale: (scaleAnimation && pressing) ? scaleRatio : 1.0

    Binding {
        target: root
        property: 'state'
        value: pressing ?
                  (longPressing ? (checked ? 'checkedLongPressing' : 'longPressing') :
                                  (checked ? 'checkedPressing'     : 'pressing'    )) :
                  (activeFocus  ? 'focusing'      :
                  (!enabled     ? 'disabled'      :
                  (checked      ? 'checkedNormal' : 'normal')))
    }

    Connections {
        target: mouseArea
        onDoubleClicked: doubleClicked()
        onPressed: {
            touchIn = true
            pressing = true
            pressed()
            longPressTimer.start()
        }
        onReleased: {
            longPressTimer.stop()
            released()
            if (!longPressing && touchIn && !usingOnClicked) clicked()
            pressing = false
        }
        onClicked: {
            if (!longPressing && touchIn && usingOnClicked) clicked()
            longPressing = false
        }
        onCanceled: {
            longPressTimer.stop()
            canceled()
            longPressing = pressing = false
        }
        onExited: {
            longPressing = touchIn = false
        }
    }

    Control.MouseArea {
        id: mouseArea
        enabled: root.enabled && root.interactive
        anchors.fill: parent
    }

    Timer {
        id: longPressTimer
        interval: longPressInterval
        onTriggered: {
            longPressing = true
            if (longPressEnabled) longPressed()
        }
    }
}

ButtonStateImage.qml

import QtQuick 2.3

Item {
    id: root

    property var target: parent

    property var normalImages
    property var pressingImages
    property var disabledImages
    property var focusingImages
    property var longPressingImages
    property var checkedNormalImages
    property var checkedPressingImages
    property var checkedLongPressingImages

    property var stateMapping: ({
                                    'normal'             : normalImages,
                                    'pressing'           : pressingImages,
                                    'disabled'           : disabledImages,
                                    'focusing'           : focusingImages,
                                    'longPressing'       : longPressingImages,
                                    'checkedNormal'      : checkedNormalImages,
                                    'checkedPressing'    : checkedPressingImages,
                                    'checkedLongPressing': checkedLongPressingImages,
                                })
    property var images: stateMapping[target.state]

    property alias border: border.border
    property alias radius: border.radius

    readonly property var pasters: bgLoader.item ? bgLoader.item.pasters : null
    property rect borderRect

    QtObject {
        id: __

        property var borderDelegate: Component {
            BorderImage {
                anchors.fill: parent
//                anchors
//                {
//                    left: parent.left
//                    leftMargin: 26
//                    right: parent.right
//                    rightMargin: 174
//                    top: parent.top
//                    topMargin: 15

//                    //verticalCenter: parent.verticalCenter

//                }

                source: root.images
                border {
                    left  : root.borderRect.x
                    top   : root.borderRect.y
                    right : root.borderRect.width
                    bottom: root.borderRect.height
                }
            }
        }

        property var pasterDelegate: Component {
            Repeater {
                id: repeater
                anchors.fill: parent

                property var pasters: ([])
                property var decorator: ([
                    // Corner
                    function(image) {
                        image.anchors.top = repeater.top
                        image.anchors.left = repeater.left
                    },
                    function(image) {
                        image.anchors.top = repeater.top
                        image.anchors.right = repeater.right
                    },
                    function(image) {
                        image.anchors.bottom = repeater.bottom
                        image.anchors.right = repeater.right
                    },
                    function(image) {
                        image.anchors.bottom = repeater.bottom
                        image.anchors.left = repeater.left
                    },
                    // Edge
                    function(image) {
                        image.anchors.top = pasters[0].bottom
                        image.anchors.bottom = pasters[3].top
                        image.anchors.left = repeater.left
                    },
                    function(image) {
                        image.anchors.top = repeater.top
                        image.anchors.left = pasters[0].right
                        image.anchors.right = pasters[1].left
                    },
                    function(image) {
                        image.anchors.top = pasters[1].bottom
                        image.anchors.bottom = pasters[2].top
                        image.anchors.right = repeater.right
                    },
                    function(image) {
                        image.anchors.bottom = repeater.bottom
                        image.anchors.left = pasters[3].right
                        image.anchors.right = pasters[2].left
                    },
                    // Centre
                    function(image) {
                        image.anchors.top = pasters[5].bottom
                        image.anchors.bottom = pasters[7].top
                        image.anchors.left = pasters[4].right
                        image.anchors.right = pasters[6].left
                    }
                ])

                property int countdown: decorator.length
                model: decorator.length

                onCountdownChanged: {
                    if (countdown === 0) {
                        for (var i = 0; i < decorator.length; ++i) {
                            repeater.decorator[i](repeater.pasters[i])
                        }
                    }
                }

                onItemAdded: {
                    repeater.pasters[index] = item
                    -- countdown
                }

                Image {
                    source: root.images ? (root.images[index] || '') : ''
                    visible: Image.Ready === status
                }
            }
        }
        property var bgDelegate: (typeof root.images === 'string') ? borderDelegate : pasterDelegate
    }

    Loader {
        id: bgLoader
        anchors.fill: parent
        sourceComponent: __.bgDelegate
    }

    Rectangle {
        id: border
        anchors.fill: parent
        color: 'transparent'
    }
}

DialogBase.qml

import QtQuick 2.3
import 'qrc:/UI/Control' as Control

Item {
    id: root
    anchors.fill: parent
    visible: false

    property string name
    property bool clickClose: true

    property int minTime: 0
    property int maxTime: 0

    property alias shadowArea: shadowArea
    property alias shadow: shadowArea.children
    property alias shadowMousePenetration: shadowArea.propagateComposedEvents
    property alias contentArea: contentArea
    property alias content: contentArea.children
    property alias contentMousePenetration: contentArea.propagateComposedEvents

    signal contentPressed
    signal shadowPressed
    signal unload

    property var shown  : (function() {})
    property var closed : (function() {})
    property var timeout: (function() {})

    Component.onCompleted  : shown()
    Component.onDestruction: closed()

    onMinTimeChanged: if (_.minRunFlag) _.minReSet()
//    onMaxTimeChanged: if (_.maxRunFlag) _.maxReSet()

    QtObject {
        id: _

        property bool needClose: false

        property bool minRunFlag: (minTime > 0)
        property bool maxRunFlag: (maxTime > 0) && (maxTime >= minTime)

        function minReSet() {
            console.log("onMinRunFlagChanged: minRunFlag =", minRunFlag,
                        ", minTime =", minTime, ", maxTime =", maxTime)
            minTimer.stop()
            if (!_.minRunFlag) return
            minTimer.interval = minTime
            minTimer.start()
        }

        function maxReSet() {
            console.log("onMaxRunFlagChanged: maxRunFlag =", maxRunFlag,
                        ", minTime =", minTime, ", maxTime =", maxTime)
            maxTimer.stop()
            if (!_.maxRunFlag) return
            maxTimer.interval = maxTime
            maxTimer.start()
        }

        onMinRunFlagChanged: {
//            console.log("onMinRunFlagChanged: minRunFlag =", minRunFlag,
//                        ", minTime =", minTime, ", maxTime =", maxTime)
//            minTimer.stop()
//            if (!_.minRunFlag) return
//            minTimer.interval = minTime
//            minTimer.start()
            _.minReSet()
        }

        onMaxRunFlagChanged: {
//            console.log("onMaxRunFlagChanged: maxRunFlag =", maxRunFlag,
//                        ", minTime =", minTime, ", maxTime =", maxTime)
//            maxTimer.stop()
//            if (!_.maxRunFlag) return
//            maxTimer.interval = maxTime
//            maxTimer.start()
            _.maxReSet()
        }

        function tryClose() {
            console.log("#### tryClose: minTime =", minTime, ", maxTime =", maxTime)
            if (minTimer.running) {
                _.needClose = true
            }
            else unload()
        }
    }

    Timer {
        id: minTimer
        repeat: false
        onTriggered: {
            if (_.needClose) {
                timeout()
                unload()
            }
        }
    }

    Timer {
        id: maxTimer
        repeat: false
        onTriggered: {
            timeout()
            unload()
        }
    }

    Control.MouseArea {
        id: shadowArea
        anchors.fill: parent

        onPressed: {
            shadowPressed()
            if (propagateComposedEvents) {
                mouse.accepted = false
                if (clickClose) _.tryClose()
            }
        }

        onClicked: {
            if (clickClose) _.tryClose()
        }
    }

    Control.MouseArea {
        id: contentArea
        anchors.centerIn: parent

        onPressed: {
            contentPressed()
            if (propagateComposedEvents) {
                mouse.accepted = false
            }
        }
    }

    function resetTimer() {
        if (_.maxRunFlag) maxTimer.restart()
    }

    function close() {
        _.tryClose()
    }

    function forceClose() {
        unload()
    }
}

Example.qml

import QtQuick 2.3
import QtQuick.Controls 2.0
import 'qrc:/UI/Keyboard' as Keyboard
import 'qrc:/UI/Application/Engineer/Control' as EngineerControl
Popup{
    id:popkeyboaed
    visible: false
        signal clicked(string text)
        signal backspace
        signal clearInputOne
        signal clearInput
        signal sure

    closePolicy: Popup.NoAutoClose
    Image {
        id: bg
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 23
        anchors.left: parent.left
        anchors.leftMargin: -13
        source: main.res('keyboard.bg')
    }
    Keyboard.Keyboard{
        anchors.bottom: parent.bottom
        anchors.left :parent.left
        onClicked: popkeyboaed.clicked(text)
        onBackspace: popkeyboaed.backspace()
        onClearInputOne: popkeyboaed.clearInputOne()
        onClearInput: popkeyboaed.clearInput()
        onSure: popkeyboaed.sure()
    }


    enter: Transition {
        //NumberAnimation { property: "opacity"; from: 0.0; to: 1.0 }

                NumberAnimation {
                    properties: "y"
                    from: 1120 // 从窗口底部外部开始
                    to: 660// 移动到y坐标为窗口底部减去Popup高度的位置，即屏幕底部
                    easing.type: Easing.InOutQuad // 使用缓动函数控制动画速度
                }

    }
    exit : Transition{
        NumberAnimation {
            properties: "y"
            from: 660 // 从窗口底部外部开始
            to: 1120// 移动到y坐标为窗口底部减去Popup高度的位置，即屏幕底部
            easing.type: Easing.InOutQuad // 使用缓动函数控制动画速度
        }
     }
}

ImageButton.qml

import QtQuick 2.3

Button {
    id: root

    property alias bgRect      : bgRect
    property alias bgOpacity   : bgRect.opacity
    property alias bgRadius    : bgRect.radius
    property alias bgBorder    : bgRect.border
    property alias bgPasters   : bgRect.pasters
    property alias bgBorderRect: bgRect.borderRect

    property alias normalImages             : bgRect.normalImages
    property alias pressingImages           : bgRect.pressingImages
    property alias longPressingImages       : bgRect.longPressingImages
    property alias checkedNormalImages      : bgRect.checkedNormalImages
    property alias checkedPressingImages    : bgRect.checkedPressingImages
    property alias checkedLongPressingImages: bgRect.checkedLongPressingImages
    property alias focusingImages           : bgRect.focusingImages
    property alias disabledImages           : bgRect.disabledImages

    bg: ButtonStateImage {
        id: bgRect
        anchors.fill: parent
        target: root
    }
}

Input.qml

import QtQuick 2.3
import A7 1.0
import 'qrc:/UI/Control' as Control
Rectangle {
    id: root
    height: 62
    color: 'transparent'

    radius: 5

    property string inputTextColor: inputCursorColor
    property string inputCursorColor:inputTextColor //main.res('radio.main.frequency.color')

//    property alias searchIcon: searchIcon.source
    property alias defaultText: defaultText.text
    property alias text: inputText.text
    property alias inputArea: inputText
    property alias textLength: inputText.length
    property alias deleteButton: deleteButton
//    property alias finishButton: finishButton
//    property alias finishVisible: finishButton.visible
    property alias deleteVisible: deleteButton.visible

    signal finishInput
    signal inputFocusChanged(var focus)

    property var inputBreak: (function() {})

    function input(text) {
        if (inputBreak(inputText.text, text)) return
        inputText.cursorVisible = true
        inputText.remove(inputText.selectionStart, inputText.selectionEnd)
        inputText.insert(inputText.cursorPosition, text)
        inputText.deselect()
    }

    function reset() {
        inputText.text = ''
        inputText.cursorVisible = false
        inputText.deselect()
    }
    function deleteText() {
        if (inputText.text === '') return
        if (inputText.selectedText === '') {
            inputText.remove(inputText.cursorPosition - 1,
                             inputText.cursorPosition)
        }
        else inputText.remove(inputText.selectionStart, inputText.selectionEnd)
        inputText.deselect()
    }
    function deleteTextAll() {
            inputText.remove(0, inputText.cursorPosition)
    }

    Control.NonAnimationText {
        id: defaultText
        //anchors.verticalCenter: parent.verticalCenter
        font.pixelSize: 32
        opacity: 0.5
        visible: (text !== '') && (inputText.text === '')
    }

    TextInput {
        id: inputText
        height: defaultText.height
        width:302

        anchors {
            left: parent.left
        }
        font {
            family: defaultText.font.family
            pixelSize: defaultText.font.pixelSize
        }
        clip: true
        color: root.inputTextColor
        //anchors.verticalCenter: parent.verticalCenter

        cursorVisible:true

        focus:true

        horizontalAlignment: TextInput.AlignLeft

        selectByMouse: true
        activeFocusOnPress:true
        onFocusChanged: root.inputFocusChanged(focus)
    }

    Control.IconButton {
        id: deleteButton
        width: 62
        height: 62
        anchors {
            left: inputText.right
            verticalCenter: parent.verticalCenter
        }
        normalIcon: main.res('keyboard.btn.delete.nor')
        pressingIcon: normalIcon//main.res('bluetooth.dial.del.press')
        scaleAnimation:true
        visible: true;

        onClicked: {
            deleteText()
        }
        onLongPressed: {
            deleteTextAll()
        }
    }
}

KeyboardNumber.qml

import QtQuick 2.3
import A7 1.0

Grid {
    id: root
    anchors.left :parent.left
    anchors.leftMargin: 350
    rows: 4
    rowSpacing: 2
    columns: 5
    columnSpacing: 6

    signal pressed(int index, bool pressing)
    signal clicked(int index, string text)

    signal back
    signal sure
    signal symbolClicked
    signal backspace
    signal clearInputOne
    signal clearInput

    Repeater {
        model: [
            '/', '1', '2', '3', '<-',
            '+', '4', '5', '6', '.',
            '-', '7', '8', '9', '%',
            '?!#', '<<', '0', ' ', 'sure'
        ]

        PushButton {
            width: 120
            height: 68
            font.pixelSize: 38

            Component.onCompleted: {
                switch (modelData) {
                case '<-'  : source = main.res('keyboard.btn.delete.nor'); break
                case ' '   : source = ''; break
                case '<<'  : text   = main.tr('Keyboard.button.back'); break
                case 'sure': text   = main.tr('Keyboard.button.sure'); break
                default    : text   = modelData; break
                }
            }

            onPressingChanged: root.pressed(index, pressing)
            onClicked: {
                var ent = text
                switch (modelData) {
                case '<-'  : root.clearInputOne(); break
                case '?!#' : root.symbolClicked(); break
                case '<<'  : root.back(); break
                case 'sure': root.sure(); break
                case ' '   : ent = ' '
                default:
                    root.clicked(index, ent)
                    break
                }
            }
            onLongPressed: {
                if (modelData === '<-') root.clearInput()
            }
        }
    }
}

PopuoKeyboard.qml

import QtQuick 2.3
import 'qrc:/UI/Core' as Core
import 'qrc:/UI/Keyboard' as Keyboard
import 'qrc:/UI/Application/Engineer/Control' as EngineerControl
import 'qrc:/UI/Animation' as Animation
import 'qrc:/UI/Application/Settings/Control' as Settings

EngineerControl.DialogBase {
    id: root
    clickClose: false
    visible: false
    //z:10
    property alias  keyBoardVisible :root.visible
    signal clicked(string text)
    signal backspace
    signal clearInputOne
    signal clearInput
    signal sure

    property Item target: null

    property bool smallCloseBtn: false
    property bool alwaysDisplay: true
    property var smallClose: (function(){})
   // property alias input: input

    property bool  needClose : true

    onVisibleChanged: {
        if (!visible) {
            if (!needClose) return
            root.close()

        }
    }
    QtObject {
        id: _

        property Item lastTarget: null
    }

    onTargetChanged: {
//        if (_.lastTarget) _.lastTarget.opacity = 1
//        if (target) target.opacity = 0.5
//        _.lastTarget = target
    }

    onUnload: {
        if (!root.shadowMousePenetration) {
            (global.get('Dialog.Closing') || function() {})()
        }
        target = null
    }

    property alias animShow: animShow

    ParallelAnimation {
        id: animShow

        Animation.FadeIn {
            target: root
            duration: 500
        }

        YAnimator {
            target: root
            duration: 500
            from: root.parent.height
            to: contentArea.parent.height - contentArea.height
        }
    }

    contentArea {
        width: root.width
        height: bg.sourceSize.height
        anchors.centerIn: undefined
    }
    content: Item{
        id:keyboaedTest
        visible: true
        anchors.fill: parent
        Image {
            id: bg
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            source: main.res('keyboard.bg')
        }
        Keyboard.Keyboard{
            id :keyboaed
            anchors.bottom: parent.bottom
            anchors.bottomMargin: -25
            anchors.left :parent.left
            anchors.leftMargin: 13
            onClicked: root.clicked(text)
            onClearInputOne: root.clearInputOne()
            onClearInput: root.clearInput()
            onSure: root.sure()
        }
    }
}

PushButton.qml

import QtQuick 2.3
import A7 1.0
import 'qrc:/UI/Keyboard' as Keyboard
ImageButton {
    id: root

    normalImages: buttonBg === '' ? [] : [
        '', '', '', '', '', '', '', '',
        buttonBg
    ]
    pressingImages: [
        '', '', '', '', '', '', '',
        '',
        buttonBgPress
    ]
    longPressingImages: pressingImages
    checkedNormalImages: pressingImages
    checkedPressingImages: pressingImages
    checkedLongPressingImages: checkedPressingImages
    focusingImages: normalImages
    disabledImages: normalImages

    longPressEnabled: true

    //bgBorder.color: (pressing || checked) ? buttonBorderColorPress : buttonBorderColor
    textColor: main.res('NonAnimationText.color')
    opacity: enabled ? 1 : 0.5

    property string buttonBg              : main.res('keyboard.btn.common.nor')
    property string buttonBgPress         : main.res('keyboard.btn.common.sel')
    //property string buttonGlow            : main.res('keyboard.btn.space.big.nor')
    property string buttonBorderColor     : main.res('Button.border.color')
    property string buttonBorderColorPress: main.res('Button.border.color.p')
    property real bottomGlowOffset: -15

    onBgPastersChanged: {
        if (bgPasters) {
            bgPasters[7].anchors.bottomMargin = Qt.binding(function() { return bottomGlowOffset })
            bgPasters[8].anchors.bottom = bgPasters[8].parent.bottom
        }
    }
}

TextWarning.qml

import QtQuick 2.3
import 'qrc:/UI/Control' as Control
import 'qrc:/UI/Animation' as Animation
DialogBase {
    id: root
    clickClose: false

    property Item target: null

    property bool smallCloseBtn: false
    property bool alwaysDisplay: true

    property alias contentItem: contentItem.children

    property var smallClose: (function(){})

    property bool needClose:true


    maxTime: needClose ? 1000 : 0
    //
    QtObject {
        id: _

        property Item lastTarget: null
    }

    onTargetChanged: {
//        if (_.lastTarget) _.lastTarget.opacity = 1
//        if (target) target.opacity = 0.5
//        _.lastTarget = target
    }

    onUnload: {
        if (!root.shadowMousePenetration) {
            (global.get('Dialog.Closing') || function() {})()
        }
        target = null
    }
    content: [

        Rectangle {
            id: popbg
            anchors {
                left: parent.left
                top: parent.top
                leftMargin: 315
                topMargin: -150
        }
         width:650
         height:100
         radius: 18
         color:main.res('StatusBar.bgColor')
         border {
             color: "#FF4444"
             width: 3
         }
        },

        Item {
            id: contentItem
            anchors.fill: parent

            Control.IconButton {
                width: icon.sourceSize.width
                height: icon.sourceSize.height
                visible: root.smallCloseBtn
                anchors {
                    top: parent.top
                    topMargin: 15
                }
                scaleAnimation: true
                normalIcon: main.res('engineer.pop.btn.nor')
                pressingIcon: normalIcon
                onClicked: {
                    (root.smallClose || function(){ console.log("Do Nothing!!!") })()
                     root.close()
                }
            }
        }
    ]
}

更多细节欢迎私信

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1690261.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

必示科技参与智能运维国家标准预研线下编写会议并做主题分享

必示科技参与智能运维国家标准预研线下编写会议并做主题分享

近日&#xff0c;《信息技术服务 智能运维 第3部分&#xff1a;算法治理》&#xff08;拟定名&#xff09;国家标准预研阶段第一次编写工作会议在杭州举行。本次会议由浙商证券承办。 此次编写有来自银行、证券、保险、通信、高校研究机构、互联网以及技术方等29家单位&#xf…
阅读更多...
ESP32 实现获取天气情况

ESP32 实现获取天气情况

按照小安派AiPi-Eyes天气站思路&#xff0c;在ESP32 S3上实现获取天气情况。 一、在ESP32 S3实现 1、main.c 建立2个TASK void app_main(void) {//lvgl初始化xTaskCreate(guiTask, "guiTask", 1024 * 6, NULL, 5, NULL);//wifi初始化、socket、json处理taskcustom_…
阅读更多...
ue5 中ps使用记录贴

ue5 中ps使用记录贴

一、快捷键记录 放大图形 ctrlalt空格 放大图形 缩小视口 ctrl空格 ctrlD 取消选区 ctrlt缩小文字 w魔棒工具 选择魔棒的时候把容差打开的多一点 二、案例 移动文字 在相应的图层选择 移动文字 修改图片里的颜色 在通道里拷贝红色通道&#xff0c;复制红色通道粘贴给正常图…
阅读更多...
Softing工业将亮相2024年阿赫玛展会——提供过程自动化的连接解决方案

Softing工业将亮相2024年阿赫玛展会——提供过程自动化的连接解决方案

您可于2024年6月10日至14日前往美因河畔法兰克福11.0号馆&#xff0c;Softing将在C25展位展出&#xff0c;欢迎莅临&#xff01; 作为工业应用中数据交换领域公认的专家&#xff0c;Softing工业致力于帮助各行各业的客户部署网络自动化和优化生产流程。 使用Softing产品&…
阅读更多...
kind: Telemetry

kind: Telemetry

访问日志 访问日志提供了一种从单个工作负载实例的角度监控和理解行为的方法。 Istio 能够以一组可配置的格式为服务流量生成访问日志&#xff0c; 使操作员可以完全控制日志记录的方式、内容、时间和地点。 有关更多信息&#xff0c;请参阅获取 Envoy 的访问日志。 https:/…
阅读更多...
TAS5711带EQ和DRC支持2.1声道的20W立体声8V-26V数字输入开环D类数字功放音频放大器

TAS5711带EQ和DRC支持2.1声道的20W立体声8V-26V数字输入开环D类数字功放音频放大器

前言 数字功放很难搞&#xff0c;寄存器很多&#xff0c;要配置正确才有声音&#xff0c;要想声音好&#xff0c;要好好调整。 TAS5711出道很多年了&#xff0c;现在仍然在不少功放、音箱中能看到。 TAS5711特征 音频输入/输出 从 18V 电源向 8Q 负载提供 20W 功率 宽 PVDD…
阅读更多...
Plesk面板中如何导出的MS SQL server数据库

Plesk面板中如何导出的MS SQL server数据库

需要导出我的SQL Server 的数据库文件&#xff0c;由于我使用的Hostease的Windows虚拟主机产品默认带普通用户权限的Plesk面板&#xff0c;但是不知道如何在Plesk上操作导出&#xff0c;因为也是对于Hostease主机产品不是很了解&#xff0c;因此联系Hostease的咨询了Hostease技…
阅读更多...
[论文笔记]Chain-of-Thought Prompting Elicits Reasoning in Large Language Models

[论文笔记]Chain-of-Thought Prompting Elicits Reasoning in Large Language Models

引言 今天带来思维链论文 Chain-of-Thought Prompting Elicits Reasoning in Large Language Models的笔记。 作者探索了如何通过生成一系列中间推理步骤的思维链&#xff0c;显著提升大型语言模型在进行复杂推理时的能力。 1 总体介绍 语言模型的规模扩大已被证明能够带来…
阅读更多...
redis--告警处理设置密码连接

redis--告警处理设置密码连接

解决当前告警提示 告警一 backlog参数控制的是三次握手的时候server端收到client ack确认号之后的队列值&#xff0c;即全连接队列 vim /etc/sysctl.conf net.core.somaxconn 1024sysctl -p 告警二 内核参数 0、表示内核将检查是否有足够的可用内存供应用进程使用&#xff1…
阅读更多...
第八节 条件装配案例讲解

第八节 条件装配案例讲解

一、条件装配的作用是什么 条件装配是 Spring 框架中一个强大的特性&#xff0c;使得开发者能够创建更加灵活和可维护的应用程序。在 Spring Boot 中&#xff0c;这个特性被大量用于自动配置&#xff0c;极大地简化了基于 Spring 的应用开发。 二、条件装配注解 <dependen…
阅读更多...
STM32_HAL_FLASH 模拟 EEPROM

STM32_HAL_FLASH 模拟 EEPROM

1. STM32 FLASH简介 STM32F407ZGT6 的 FLASH 容量为1024K 字节&#xff0c; STM32F40xx/41xx 的闪存模块组织如图 STM32F4 的闪存模块由主存储器、系统存储器、 OPT 区域和选项字节等 4 部分组成。 主存储器&#xff0c;该部分用来存放代码和数据常数&#xff08;如 const 类型…
阅读更多...
macOS平台安装PostgreSQL的五种方法

macOS平台安装PostgreSQL的五种方法

macOS 平台安装 PostgreSQL 数据库主要有以下五种方法。 EDB安装工具 EDB 公司提供的图像安装工具&#xff0c;支持 macOS 以及 Windows 平台。该工具可以安装 PostgreSQL 服务器、pgAdmin&#xff08;管理开发工具&#xff09;以及 StackBuilder&#xff08;安装 PostgreSQL…
阅读更多...
漫画|基于SprinBoot+vue的漫画网站(源码+数据库+文档)

漫画|基于SprinBoot+vue的漫画网站(源码+数据库+文档)

漫画网站 目录 基于SprinBootvue的漫画网站 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2管理员功能模块 3用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大…
阅读更多...
0基础学习Mybatis系列数据库操作框架——Mysql的Geometry数据处理之WKB方案

0基础学习Mybatis系列数据库操作框架——Mysql的Geometry数据处理之WKB方案

大纲 序列化反序列化完整TypeHandlerSQL XML完整XML Mapper测试代码代码 在《0基础学习Mybatis系列数据库操作框架——Mysql的Geometry数据处理之WKT方案》中&#xff0c;我们介绍WTK方案的优点&#xff0c;也感受到它的繁琐和缺陷。比如&#xff1a; 需要借助ST_GeomFromText…
阅读更多...
数据意外删除？安卓手机数据恢复教程来帮你解救

数据意外删除？安卓手机数据恢复教程来帮你解救

手机不仅仅是一个通讯工具&#xff0c;更是我们记录生活、工作、学习等各种信息的重要载体&#xff0c;无论是拍照、录音、录像&#xff0c;还是文字记录&#xff0c;手机都能轻松完成。可有时候我们会不小心删除一些重要的数据&#xff0c;这时候我们该怎么办呢&#xff1f;别…
阅读更多...
LeetCode/NowCoder-链表经典算法OJ练习3

LeetCode/NowCoder-链表经典算法OJ练习3

孜孜不倦&#xff1a;孜孜&#xff1a;勤勉&#xff0c;不懈怠。指工作或学习勤奋不知疲倦。&#x1f493;&#x1f493;&#x1f493; 目录 说在前面 题目一&#xff1a;返回倒数第k个节点 题目二&#xff1a;链表的回文结构 题目三&#xff1a;相交链表 SUMUP结尾 说在前…
阅读更多...
分布式锁2-Zookeeper分布式锁实战

分布式锁2-Zookeeper分布式锁实战

Zookeeper分布式锁实战 使用curator操作Zookeeper进行实战&#xff1b; curator是什么&#xff1a;Apache Curator包含一套高级API框架和工具类&#xff0c;它 是Apache ZooKeeper 的Java 客户端库。 准备 pom文件引入curtor依赖和zookeeper依赖 <!--curator--> <…
阅读更多...
微信小程序开发环境的搭建

微信小程序开发环境的搭建

一、注册微信小程序账号 二、安装微信开发者工具 1.下载微信开发者工具。 官网下载地址&#xff1a;https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/downloads.html 2、选择稳定版Window64下载安装 3、下载完毕后&#xff0c;点击下一步安装 三、使用微信开发者工具…
阅读更多...
linux---信号的捕捉和处理

linux---信号的捕捉和处理

提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、信号 可以简单理解为信号是一个进程给另一个信号发消息&#xff0c;进程收到对应的信号就执行对应的方法&#xff0c;linux信号可以分为实时信号和非实时信号 1-31为非实时信号&#xff0c;34-64为…
阅读更多...
【若依框架】学习

【若依框架】学习

验证码 登录
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023