{"id":4129,"date":"2024-02-26T18:01:01","date_gmt":"2024-02-26T10:01:01","guid":{"rendered":""},"modified":"2024-02-26T18:01:01","modified_gmt":"2024-02-26T10:01:01","slug":"QML\u5f00\u53d1\u70ab\u9177\u4e2d\u6587\u952e\u76d8\u7bc7","status":"publish","type":"post","link":"https:\/\/mushiming.com\/4129.html","title":{"rendered":"QML\u5f00\u53d1\u70ab\u9177\u4e2d\u6587\u952e\u76d8\u7bc7"},"content":{"rendered":"

\n <\/path> \n<\/svg> <\/p>\n

\u9996\u5148\u58f0\u660e\u62fc\u97f3\u662f\u62ff\u7684\u8c37\u6b4c\u6e90\u7801,\u5176\u6b21\u5e03\u5c40-\u754c\u9762-\u903b\u8f91\u90fd\u662f\u672c\u4eba\u6240\u5199.<\/strong><\/p>\n

\u672c\u952e\u76d8\u4e3b\u8981\u5f00\u53d1\u7684\u529f\u80fd:<\/strong><\/em>
1.\u652f\u6301\u4efb\u610f\u5927\u5c0f\u5199,\u53ca\u7279\u6b8a\u5b57\u7b26\u7684\u8f93\u5165
2.\u652f\u6301\u4e2d\u6587\u8f93\u5165
3.\u652f\u6301\u5feb\u6377\u9009\u9879<\/p>\n

\"QML\u5f00\u53d1\u70ab\u9177\u4e2d\u6587\u952e\u76d8\u7bc7<\/p>\n

\u4e0a\u56fe\u5927\u81f4\u5206\u4e3a\u4e24\u90e8\u5206{ cpp,qml }<\/p>\n

1.abstractlistelement.cpp,abstractlistmodel.cpp\u8fd9\u4e24\u4e2acpp\u662f\u4e0eQML\u4ea4\u4e92\u62fc\u97f3\u63a5\u53e3
2. \u4e3b\u63d2\u4ef6:MyVirtualKeyboard.qml
3. \u5b50\u63d2\u4ef6: {
\n
3.1 ClickedInformationModel.qml : \u4ee3\u7406\u663e\u793a\u5b57\u7b26
3.2 LetterListDelegate.qml: \u4ee3\u7406\u70b9\u51fb\u7ec4\u4ef6
3.3 {LetterListModel_1.qml,LetterListModel_2.qml
,LetterListModel_3.qml,LetterListModel_4.qml} : \u4ee3\u7406\u952e\u76d8
3.4 MyVirtualKeyboard_js.qml : \u5904\u7406\u754c\u9762\u903b\u8f91
3.5 MyVirtualKeyboardAnimation.qml: \u5904\u7406\u754c\u9762\u52a8\u753b
}<\/p>\n

\u4e3b\u63d2\u4ef6\u6e90\u7801:<\/p>\n

import QtQuick 2.12<\/span>\nimport QtQuick.<\/span>Controls 2.5<\/span>\nRectangle{ \n   <\/span>\n    function showAnimation<\/span>(<\/span>)<\/span>{ \n   <\/span>\n        myVirtualKeyboardAnimation.<\/span>showAnimation<\/span>(<\/span>)<\/span>\n    }<\/span>\n    \n    signal clickedEnglishKeyValueSignal<\/span>(<\/span>string keyValue,<\/span>int<\/span> stringPosition)<\/span>\n    signal clickedLastRemoveSignal<\/span>(<\/span>)<\/span>\n\n    MyVirtualKeyboard_js{ \n   <\/span> id:<\/span> myVirtualKeyboard_js}<\/span>\n    MyVirtualKeyboardAnimation{ \n   <\/span> id:<\/span> myVirtualKeyboardAnimation }<\/span>\n\n    property int<\/span>  widthRatio:<\/span> width \/<\/span> 13<\/span> \/\/13<\/span>\n    property int<\/span>  heightRatio:<\/span> height \/<\/span> 7<\/span>\/\/7<\/span>\n    property bool<\/span> isChineseFlag:<\/span> false<\/span>\n    property int<\/span>  inputMaxLetterNumber:<\/span> 6<\/span>\n    property int<\/span>  nowCharNumber:<\/span> 0<\/span>\n    id:<\/span> keyboardBackgroundRectangle\n    width:<\/span> 400<\/span> ;<\/span> height:<\/span> 0.0<\/span> ;<\/span> color:<\/span> \"black\"<\/span> ;<\/span> radius:<\/span> 5<\/span> ;<\/span> opacity:<\/span> 0.8<\/span> ;<\/span> \/\/visible: false<\/span>\n\n  Rectangle{ \n   <\/span>\n        z :<\/span> 1<\/span> ;<\/span> color:<\/span> \"black\"<\/span> ;<\/span>radius:<\/span> 5<\/span>\n        anchors.<\/span>horizontalCenter:<\/span> parent.<\/span>horizontalCenter ;<\/span> anchors.<\/span>top:<\/span> parent.<\/span>top ;<\/span> anchors.<\/span>topMargin:<\/span> heightRatio +<\/span> 10<\/span>\n        width:<\/span> keyboardBackgroundRectangle.<\/span>width ;<\/span> height:<\/span> keyboardBackgroundRectangle.<\/span>height -<\/span> heightRatio -<\/span> 10<\/span>;<\/span>\n        visible:<\/span> !<\/span>showTotal_pinyin_Button.<\/span>isDown ?<\/span> true<\/span> :<\/span> false<\/span> ;<\/span>\n    GridView{ \n   <\/span>\n        id:<\/span> total_pinyin_ListView\n        anchors.<\/span>fill:<\/span> parent\n        cellWidth:<\/span> 50<\/span>;<\/span> cellHeight:<\/span> 50<\/span>\n        boundsBehavior:<\/span> Flickable.<\/span>StopAtBounds ;<\/span> clip:<\/span> true<\/span>;<\/span>  model:<\/span> showAbstractListModel\n        delegate:<\/span> Text{ \n   <\/span>\n                      text:<\/span> myVirtualKeyboard_js.<\/span>disposeSuperLongString<\/span>(<\/span>chineseString)<\/span> ;<\/span> color:<\/span> \"white\"<\/span> ;<\/span> width:<\/span> total_pinyin_ListView.<\/span>cellWidth ;<\/span> height:<\/span> total_pinyin_ListView.<\/span>cellHeight ;<\/span>\n                      horizontalAlignment:<\/span> Text.<\/span>AlignHCenter ;<\/span> verticalAlignment:<\/span> Text.<\/span>AlignVCenter\n                      MouseArea{ \n   <\/span> anchors.<\/span>fill:<\/span>parent ;<\/span> hoverEnabled:<\/span> true<\/span> ;<\/span> onClicked:<\/span> { \n   <\/span>\n                                 keyboardBackgroundRectangle.<\/span>nowCharNumber +<\/span>=<\/span> parent.<\/span>text.<\/span>length\n                                 keyboardBackgroundRectangle.<\/span>clickedEnglishKeyValueSignal<\/span>(<\/span>parent.<\/span>text,<\/span>keyboardBackgroundRectangle.<\/span>nowCharNumber -<\/span> parent.<\/span>text.<\/span>length)<\/span>\n                                 clickedInformationModel.<\/span>clear<\/span>(<\/span>)<\/span>;<\/span>showAbstractListModel.<\/span>parseLetter<\/span>(<\/span>\"\"<\/span>)<\/span> ;<\/span> myVirtualKeyboard_js.<\/span>switchTotal_pinyin_Button<\/span>(<\/span>)<\/span>;<\/span> }<\/span>\n                                 onEntered:<\/span> { \n   <\/span>parent.<\/span>font.<\/span>bold =<\/span> true<\/span>}<\/span> onExited:<\/span> { \n   <\/span>parent.<\/span>font.<\/span>bold =<\/span> false<\/span> }<\/span>\n                      }<\/span>\n        }<\/span>\n     }<\/span>\n  }<\/span>\n\n    Column{ \n   <\/span>\n        spacing:<\/span> 8<\/span>\n        anchors.<\/span>fill:<\/span>parent\n        Row{ \n   <\/span>\n            id:<\/span> row\n            anchors.<\/span>horizontalCenter:<\/span> parent.<\/span>horizontalCenter\n            topPadding:<\/span> 5<\/span>\n            spacing:<\/span> 5<\/span>\n            ListView{ \n   <\/span>\n                id:<\/span> clickedInformationListView\n                width:<\/span> widthRatio *<\/span> 2<\/span> ;<\/span> height:<\/span> heightRatio\n                boundsBehavior:<\/span> Flickable.<\/span>StopAtBounds ;<\/span> orientation:<\/span> ListView.<\/span>Horizontal\n                spacing:<\/span> 5<\/span> ;<\/span> clip:<\/span> true<\/span> ;<\/span> model:<\/span> ClickedInformationModel{ \n   <\/span> id:<\/span> clickedInformationModel}<\/span>\n                delegate:<\/span> Text{ \n   <\/span>color:<\/span> \"white\"<\/span> ;<\/span>  height:<\/span> heightRatio \/<\/span> 2<\/span> +<\/span> 20<\/span> ;<\/span> text:<\/span> clickedElement ;<\/span>\n                               verticalAlignment:<\/span> Text.<\/span>AlignVCenter ;<\/span> horizontalAlignment:<\/span> Text.<\/span>AlignHCenter}<\/span>\n            }<\/span>\n            ListView{ \n   <\/span>\n                id:<\/span> pinyin_ListView\n                width:<\/span> keyboardBackgroundRectangle.<\/span>width -<\/span> (<\/span>widthRatio \/<\/span> 2<\/span> +<\/span> widthRatio *<\/span> 2<\/span> +<\/span> 20<\/span>)<\/span> ;<\/span>height:<\/span> heightRatio\n                boundsBehavior:<\/span> Flickable.<\/span>StopAtBounds ;<\/span> orientation:<\/span> ListView.<\/span>Horizontal ;<\/span> interactive:<\/span> showTotal_pinyin_Button.<\/span>isDown ?<\/span> true<\/span> :<\/span> false<\/span>\n                spacing:<\/span> 20<\/span> ;<\/span> model:<\/span>showAbstractListModel ;<\/span> \/*ShowAbstractListModel{ id: showAbstractListModel}*\/<\/span> clip:<\/span> true<\/span>\n                delegate:<\/span> Text{ \n   <\/span>\n                                 height:<\/span> heightRatio \/<\/span> 2<\/span> +<\/span> 20<\/span>;<\/span> text:<\/span> chineseString ;<\/span>\n                                 verticalAlignment:<\/span> Text.<\/span>AlignVCenter ;<\/span> horizontalAlignment:<\/span> Text.<\/span>AlignHCenter\n                                 MouseArea{ \n   <\/span> anchors.<\/span>fill:<\/span>parent ;<\/span> hoverEnabled:<\/span> true<\/span> ;<\/span> onClicked:<\/span> { \n   <\/span>\n                                            keyboardBackgroundRectangle.<\/span>nowCharNumber+<\/span>=<\/span> parent.<\/span>text.<\/span>length ;<\/span>\n                                            keyboardBackgroundRectangle.<\/span>clickedEnglishKeyValueSignal<\/span>(<\/span>parent.<\/span>text,<\/span>keyboardBackgroundRectangle.<\/span>nowCharNumber -<\/span> parent.<\/span>text.<\/span>length)<\/span>\n                                            clickedInformationModel.<\/span>clear<\/span>(<\/span>)<\/span>;<\/span>showAbstractListModel.<\/span>parseLetter<\/span>(<\/span>\"\"<\/span>)<\/span> ;<\/span>\n                                            if<\/span>(<\/span>!<\/span>showTotal_pinyin_Button.<\/span>isDown)<\/span> myVirtualKeyboard_js.<\/span>switchTotal_pinyin_Button<\/span>(<\/span>)<\/span>}<\/span>\n                                            onEntered:<\/span> { \n   <\/span>parent.<\/span>font.<\/span>bold =<\/span> true<\/span>}<\/span> onExited:<\/span> { \n   <\/span>parent.<\/span>font.<\/span>bold =<\/span> false<\/span> }<\/span>\n                                 }<\/span>\n                                 Component.<\/span>onCompleted:<\/span>{ \n   <\/span>\n                                     switch<\/span>(<\/span>index)<\/span>{ \n   <\/span>\n                                         case<\/span> 0<\/span> :<\/span> color =<\/span> \"yellow\"<\/span> ;<\/span> break<\/span>;<\/span>\n                                         default<\/span>:<\/span> color =<\/span> \"white\"<\/span> ;<\/span> break<\/span> ;<\/span>\n                                     }<\/span>\n                                 }<\/span>\n                           }<\/span>\n            }<\/span>\n            Button{ \n   <\/span>\n                property bool<\/span>  isDown:<\/span> true<\/span>\n                id:<\/span> showTotal_pinyin_Button\n                width:<\/span> widthRatio \/<\/span> 2<\/span> ;<\/span> height:<\/span> heightRatio;<\/span>\n                background:<\/span> Image{ \n   <\/span> id:<\/span> background ;<\/span> anchors.<\/span>centerIn:<\/span> parent ;<\/span> width:<\/span> widthRatio \/<\/span> 1.4<\/span> ;<\/span> height:<\/span> heightRatio \/<\/span>1.2<\/span>\n                                   source:<\/span> \"file:\/C:\/Users\/FirstBoold-WANG\/Desktop\/MyKeyboardPackage\/MyVirtualKeyboard\/MyVirtualKeyboardIcon\/HideTotal_pinyin_Icon.png\"<\/span>\n                                 }<\/span>\n                onClicked:<\/span> { \n   <\/span>\n                    myVirtualKeyboard_js.<\/span>switchTotal_pinyin_Button<\/span>(<\/span>)<\/span>\n                }<\/span>\n            }<\/span>\n        }<\/span>\n\n        ListView{ \n   <\/span>\n            id:<\/span> letterListView1\n            anchors.<\/span>horizontalCenter:<\/span> parent.<\/span>horizontalCenter\n            \/\/anchors.horizontalCenterOffset: widthRatio \/ 2 + widthRatio \/ 5<\/span>\n            width:<\/span> widthRatio *<\/span> letterListModel_1.<\/span>count +<\/span>63<\/span>  ;<\/span> height:<\/span>  heightRatio\n            boundsBehavior:<\/span> Flickable.<\/span>StopAtBounds ;<\/span> orientation:<\/span> ListView.<\/span>Horizontal\n            spacing:<\/span> 7<\/span> ;<\/span> model:<\/span> LetterListModel_1{ \n   <\/span> id:<\/span> letterListModel_1}<\/span>\n            delegate:<\/span> LetterListDelegate{ \n   <\/span>}<\/span>\n        }<\/span>\n        ListView{ \n   <\/span>\n            id:<\/span> letterListView2\n            anchors.<\/span>horizontalCenter:<\/span> parent.<\/span>horizontalCenter\n            \/\/anchors.horizontalCenterOffset: widthRatio \/ 5 * -1<\/span>\n            width:<\/span>widthRatio *<\/span> letterListModel_2.<\/span>count +<\/span> 58<\/span>;<\/span> height:<\/span> heightRatio\n            boundsBehavior:<\/span> Flickable.<\/span>StopAtBounds ;<\/span> orientation:<\/span> ListView.<\/span>Horizontal\n            spacing:<\/span> 7<\/span> ;<\/span> model:<\/span> LetterListModel_2{ \n   <\/span> id:<\/span> letterListModel_2}<\/span>\n            delegate:<\/span> LetterListDelegate{ \n   <\/span>}<\/span>\n        }<\/span>\n        ListView{ \n   <\/span>\n            id:<\/span> letterListView3\n            anchors.<\/span>left:<\/span> letterListView_4.<\/span>left\n            width:<\/span>keyboardBackgroundRectangle.<\/span>width;<\/span> height:<\/span> heightRatio ;<\/span>\n            boundsBehavior:<\/span> Flickable.<\/span>StopAtBounds ;<\/span> orientation:<\/span> ListView.<\/span>Horizontal ;<\/span> \/\/interactive: false<\/span>\n            spacing:<\/span> parent.<\/span>width \/<\/span> 57<\/span>  ;<\/span> model:<\/span> LetterListModel_3{ \n   <\/span> id:<\/span> letterListModel_3}<\/span>\n            delegate:<\/span> LetterListDelegate{ \n   <\/span>\n                Component.<\/span>onCompleted:<\/span>{ \n   <\/span>\n                    switch<\/span>(<\/span>index)<\/span>{ \n   <\/span>\n                        case<\/span> 0<\/span>:<\/span> width =<\/span> widthRatio *<\/span> 2<\/span> ;<\/span> return<\/span> ;<\/span>\n                        case<\/span> letterListModel_3.<\/span>count -<\/span> 1<\/span> :<\/span> width =<\/span> widthRatio *<\/span> 2<\/span> ;<\/span> return<\/span> ;<\/span>\n                        default<\/span>:<\/span> break<\/span>;<\/span>\n                    }<\/span>\n                }<\/span>\n            }<\/span>\n        }<\/span>\n        ListView{ \n   <\/span>\n            id:<\/span> letterListView_4\n            anchors.<\/span>horizontalCenter:<\/span> parent.<\/span>horizontalCenter ;<\/span>\n            width:<\/span>keyboardBackgroundRectangle.<\/span>width -<\/span>10<\/span>;<\/span> height:<\/span> heightRatio ;<\/span>\n            boundsBehavior:<\/span> Flickable.<\/span>StopAtBounds ;<\/span> orientation:<\/span> ListView.<\/span>Horizontal\n            spacing:<\/span> 4<\/span> ;<\/span> model:<\/span> LetterListModel_4{ \n   <\/span> id:<\/span> letterListModel_4}<\/span>\n            delegate:<\/span> LetterListDelegate{ \n   <\/span>\n                Component.<\/span>onCompleted:<\/span>{ \n   <\/span>\n                    switch<\/span>(<\/span>index)<\/span>{ \n   <\/span>\n                        case<\/span> 0<\/span>:<\/span> width =<\/span> widthRatio *<\/span> 2<\/span> ;<\/span> break<\/span> ;<\/span>\n                        case<\/span> 1<\/span>:<\/span> width =<\/span> widthRatio *<\/span> 2<\/span> -<\/span> widthRatio \/<\/span> 2<\/span> ;<\/span> break<\/span> ;<\/span>\n                        case<\/span> 2<\/span>:<\/span> width =<\/span> keyboardBackgroundRectangle.<\/span>width -<\/span> widthRatio *<\/span> 4<\/span> -<\/span> (<\/span>(<\/span>widthRatio *<\/span> 2<\/span> -<\/span> widthRatio \/<\/span> 2<\/span>)<\/span> *<\/span> 2<\/span>)<\/span> -<\/span> 30<\/span> ;<\/span> break<\/span> ;<\/span>\n                        case<\/span> 3<\/span>:<\/span> width =<\/span> widthRatio *<\/span> 2<\/span> -<\/span> widthRatio \/<\/span> 2<\/span>;<\/span> break<\/span> ;<\/span>\n                        case<\/span> 4<\/span>:<\/span> width =<\/span> widthRatio *<\/span> 2<\/span> ;<\/span> break<\/span> ;<\/span>\n                        default<\/span>:<\/span> break<\/span>;<\/span>\n                    }<\/span>\n                }<\/span>\n            }<\/span>\n        }<\/span>\n    }<\/span>\n}<\/span><\/code><\/pre>\n
\u5c55\u793a\u4e00\u4e0b\u6548\u679c\u56fe
 \"QML\u5f00\u53d1\u70ab\u9177\u4e2d\u6587\u952e\u76d8\u7bc7
 \"QML\u5f00\u53d1\u70ab\u9177\u4e2d\u6587\u952e\u76d8\u7bc7<\/p>\n","protected":false},"excerpt":{"rendered":"QML\u5f00\u53d1\u70ab\u9177\u4e2d\u6587\u952e\u76d8\u7bc7\u9996\u5148\u58f0\u660e\u62fc\u97f3\u662f\u62ff\u7684\u8c37\u6b4c\u6e90\u7801,\u5176\u6b21\u5e03\u5c40-\u754c\u9762-\u903b\u8f91\u90fd\u662f\u672c\u4eba\u6240\u5199.\u672c\u952e\u76d8\u4e3b\u8981\u5f00\u53d1\u7684\u529f\u80fd:1.\u652f\u6301\u4efb\u610f\u5927\u5c0f\u5199,...","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"_links":{"self":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts\/4129"}],"collection":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/comments?post=4129"}],"version-history":[{"count":0,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts\/4129\/revisions"}],"wp:attachment":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/media?parent=4129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/categories?post=4129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/tags?post=4129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}