{"id":3031,"date":"2025-12-13T12:59:45","date_gmt":"2025-12-13T03:59:45","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=3031"},"modified":"2025-12-13T14:16:40","modified_gmt":"2025-12-13T05:16:40","slug":"qtsingnal","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/12\/13\/qtsingnal\/","title":{"rendered":"[QT QML]\uc2dc\uadf8\ub110\uacfc \uc2ac\ub86f &#8211; \ucef4\ud3ec\ub10c\ud2b8 \/  Signal and Slot &#8211; Component"},"content":{"rendered":"\n<p>\ud83d\udc49\ud83c\udffb \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \ubc84\ud2bc \ud074\ub9ad\uc2dc \uce74\uc6b4\ud130\ub97c \uc99d\uac00\uc2dc\ud0a4\uace0 \uac10\uc18c\uc2dc\ud0a4\ub294 \uc571\uc785\ub2c8\ub2e4.<br>The code below is an app that increases and decreases the counter when the button is clicked.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \uac01 2\uac1c\uc758 \ucef4\ud3ec\ub10c\ud2b8(qml\ud30c\uc77c) \uc0ac\uc774\uc758 \uc2dc\uadf8\ub110\uacfc \uc2ac\ub86f\uc744 \ud1b5\ud574\uc11c \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud569\ub2c8\ub2e4.<br>The code below handles the event through the signals and slots between each of the two components (qml file).<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ud639\uc2dc \ub9e5os\ub97c \uc0ac\uc6a9\ud560 \uacbd\uc6b0 \ub2e4\ud06c\ubaa8\ub4dc\ub85c \uc124\uc815\ud558\uba74 Button{} \ubd80\ubd84\uc740 \uc548\ubcf4\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>If you use macos, set it in dark mode, button{} part may not be visible.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \uc65c\ub0d0\ud558\uba74 \uae30\ubcf8 \ubc84\ud2bc \uc0ac\uc6a9\uc2dc \ub9e5OS\uc758 \ub2e4\ud06c\ubaa8\ub4dc \uc124\uc815\uc744 \ubc18\uc601\ud558\uae30 \ub54c\ubb38\uc5d0 \ucee4\uc2a4\ud140 \uc124\uc815\uc774 \uc801\uc6a9\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<br>Because when using the default button, the custom setting does not apply because it reflects the macOS&#8217; dark mode setting.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \uadf8\ub798\uc11c \ucee4\uc2a4\ud140 \ubc84\ud2bc\uc744 \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4.( CusomButton.qml)<br>So I created a custom button (CusomButton.qml)<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ub098\uba38\uc9c0 \uc124\uba85\uc740 \uc774\uc804 \ud3ec\uc2a4\ud2b8\ub97c \ucc38\uc870\ud558\uc138\uc694<br>Please refer to the previous post for the rest of the explanation<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-freelifemakers-org wp-block-embed-freelifemakers-org\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"CgJ5x3tkXm\"><a href=\"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/12\/10\/qt-qml-signal-and-slot\/\">[QT QML]\uc2dc\uadf8\ub110\uacfc \uc2ac\ub86f \/ Signal and Slot<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;[QT QML]\uc2dc\uadf8\ub110\uacfc \uc2ac\ub86f \/ Signal and Slot&#8221; &#8212; freelifemakers.org\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/12\/10\/qt-qml-signal-and-slot\/embed\/#?secret=uBfKIPDbL7#?secret=CgJ5x3tkXm\" data-secret=\"CgJ5x3tkXm\" width=\"560\" height=\"315\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ucf54\ub4dc \/ Code<\/p>\n\n\n\n<p>\u2714\ufe0fMain.qml<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import QtQuick\nimport QtQuick.Controls\n\n\nApplicationWindow {\n    width: 640\n    height: 480\n    visible: true\n    title: \"Component Event Example\"\n\n    Rectangle {\n        id: root\n        anchors.fill: parent\n        color: \"white\"\n\n        property int count: 0\n\n        Column {\n            anchors.fill: parent\n            spacing: 20\n\n            \/\/ \uce74\uc6b4\ud130 \ucd9c\ub825 \/ Counter Output\n            Text {\n                anchors.horizontalCenter: parent.horizontalCenter\n\n                font.pixelSize: 24\n                text: \"Count: \" + root.count\n            }\n\n            \/\/ \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc6a9 \/ Using Child Components\n            CounterControls {\n                id: controls\n                anchors.horizontalCenter: parent.horizontalCenter\n\n                \/\/ \uc790\uc2dd \uc2dc\uadf8\ub110\uc744 \ubd80\ubaa8\uac00 \ucc98\ub9ac(\uc2ac\ub86f)\n                \/\/ Parent Processes Child Signal (Slot)\n<mark style=\"background-color:rgba(0, 0, 0, 0);color:#b19f0e\" class=\"has-inline-color\">                onIncrementRequested: {\n                    root.count++\n                    console.log(\"Increment:\", root.count)\n                }\n                onDecrementRequested: {\n                    if (root.count &gt; 0) root.count--\n                    console.log(\"Decrement:\", root.count)\n                }<\/mark>\n            }\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0fCounterControls.qml<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import QtQuick\nimport QtQuick.Controls\n\nItem {\n    id: control\n\n    \/\/ Item \uc804\uccb4\uc758 \uae30\ubcf8 \ud06c\uae30\ub97c Row \ud06c\uae30\uc5d0 \ub9de\ucd94\uae30\n    \/\/ Set the default size of the entire item to the Row size\n\n    implicitWidth: row2.implicitWidth\n    implicitHeight: row2.implicitHeight\n\n    \/\/ Signal\n    signal incrementRequested()\n    signal decrementRequested()\n\n\n\n    Column{\n\n        Text {\n            text: \"Counter Controls\"\n            anchors.horizontalCenter: parent.horizontalCenter\n        }\n\n        Row {\n            id: row\n            spacing: 10\n            width:row2.implicitWidth\n\n            \/\/ Row\uc758 \ud06c\uae30\ub97c \ubd80\ubaa8 Item\uc5d0 \uc804\ub2ec\n            \/\/ anchors.fill: parent\n\n            \/*\n                \ub9e5OS\uac00 \ub2e4\ud06c\ubaa8\ub4dc\uc77c \uacbd\uc6b0\uc5d0\ub294 \uc544\ub798 \ub514\ud3f4\ud2b8 \ubc84\ud2bc\uc774 \uc548\ubcf4\uc77c \uc218 \uc788\uc74c.\n                If the macOS is in dark mode, the following default buttons may not be visible.\n            *\/\n\n            \/\/ default Button\n            Button {\n                text: \"Increase\"\n                font.pixelSize: 16\n                palette.text: \"black\"\n                onClicked: control.incrementRequested()\n            }\n\n\n            Button {\n                id:btn2\n                text: \"Decrease\"\n                font.pixelSize: 16\n                palette.text: \"black\"\n                onClicked: control.decrementRequested()\n            }\n\n        }\n\n        \/\/ Custom Button\n        Row{\n            id:row2\n            CustomButton {\n                text: \"Increase\"\n                backgroundColor: \"#4CAF50\" \/\/ green\n\n                onClicked: {\n                    \/\/root.count++\n                    control.incrementRequested()\n                }\n            }\n\n            CustomButton {\n                text: \"Decrease\"\n                backgroundColor: \"#FFA500\" \/\/ orange\n\n                onClicked: {\n                    \/\/if (root.count &gt; 0) root.count--\n                    control.decrementRequested()\n                }\n            }\n\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0fCustomButton.qml<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import QtQuick\nimport QtQuick.Controls\n\n\nRectangle {\n    id: customBtn\n    property alias text: label.text\n    property color backgroundColor: \"#5C6BC0\"\n    property color textColor: \"black\" \/\/ color --&gt; \ubb38\uc790\uc5f4 \uc0c9\uc0c1 \uc9c0\uc815\ud558\ub294 \ud0c0\uc785 \/ Type to color string\n    property real radiuss: 8 \/\/ real --&gt; \uc2e4\uc218\ud615 \uc22b\uc790\ub97c \uc9c0\uc815\ud558\ub294 \ud0c0\uc785 \/ Type to specify a real number\n    property real fontSize: 16\n\n    width: 120\n    height: 40\n    color: backgroundColor    \/\/ \ubc18\ub4dc\uc2dc \ud544\uc694 \/ absolutely necessary\n    radius: radiuss \/\/ radius\uc774\ub984\uc774 \ub3d9\uc77c \ud558\uba74 \ucda9\ub3cc\uc77c\uc5b4\ub0a8 \/ If radius names are the same, it will result in a collision\n\n    signal clicked \/\/ \uc678\ubd80\uc5d0\uc11c onClicked\uc2ac\ub86f\uc73c\ub85c \uc2e4\ud589\ub428. \/ Executed externally as an on-Clicked slot.\n\n    Text {\n        id: label\n        anchors.centerIn: parent\n        color: textColor\n        font.pixelSize: fontSize\n        text: \"custom button\"\n    }\n\n    MouseArea {\n        anchors.fill: parent\n        hoverEnabled: true\n\n        onClicked: customBtn.clicked( \/\/ \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubcf8 \uc2ac\ub86f \/ Component Default Slot\n            \/\/console.log(`btn print`)\n        )\n\n        onPressed: customBtn.color = Qt.darker(customBtn.backgroundColor, 1.2)\n        onReleased: customBtn.color = customBtn.backgroundColor\n\n        onEntered: customBtn.color = Qt.lighter(customBtn.backgroundColor, 1.1)\n        onExited: customBtn.color = customBtn.backgroundColor\n    }\n}\n\n<\/code><\/pre>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \uc2a4\ud06c\ub9b0 \uc0f7 \/ ScreenShot<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"[QT]Signal and Slot-Component\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/APHrtUzQWi4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc49\ud83c\udffb \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \ubc84\ud2bc \ud074\ub9ad\uc2dc \uce74\uc6b4\ud130\ub97c \uc99d\uac00\uc2dc\ud0a4\uace0 \uac10\uc18c\uc2dc\ud0a4\ub294 \uc571\uc785\ub2c8\ub2e4.The code below is an app that increases and decreases the counter when the button is clicked. \ud83d\udc49\ud83c\udffb \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \uac01 2\uac1c\uc758 \ucef4\ud3ec\ub10c\ud2b8(qml\ud30c\uc77c) \uc0ac\uc774\uc758 \uc2dc\uadf8\ub110\uacfc \uc2ac\ub86f\uc744 \ud1b5\ud574\uc11c \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud569\ub2c8\ub2e4.The code below handles the event through the signals and slots between each of the two components (qml file). [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,1],"tags":[],"class_list":["post-3031","post","type-post","status-publish","format-standard","hentry","category-qt","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/3031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=3031"}],"version-history":[{"count":18,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/3031\/revisions"}],"predecessor-version":[{"id":3054,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/3031\/revisions\/3054"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=3031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=3031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=3031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}