{"id":2730,"date":"2025-11-18T11:11:30","date_gmt":"2025-11-18T02:11:30","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=2730"},"modified":"2025-11-20T08:46:40","modified_gmt":"2025-11-19T23:46:40","slug":"qtcolumnrowcolumnlayoutrowlayoutanchor","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/11\/18\/qtcolumnrowcolumnlayoutrowlayoutanchor\/","title":{"rendered":"[QT]Column,Row,ColumnLayout,RowLayout,anchor"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb QT QML\uc5d0\uc11c \uac00\ub85c \uc138\ub85c \ub808\uc774\uc544\uc6c3\uc5d0 \ub300\ud55c \uc124\uba85\uacfc \ucf54\ub4dc\uc785\ub2c8\ub2e4.
Description and code for horizontal and vertical layout in QT QML.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb\uac00\ub85c ,\uc138\ub85c\ub808\uc774\uc544\uc6c3\uc5d0\ub294 Column,Row,ColumnLayout,RowLayout\uc774 \uc788\uc2b5\ub2c8\ub2e4.
For horizontal and vertical layouts, there are Column, Row, ColumnLayout, and RowLayout.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb ColumnLayout\uacfc RowLayout\uc740 \ubc18\uc751\ud615 UI\ub098 \ucc3d \ub9ac\uc0ac\uc774\uc988 \ub300\uc751 UI\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.
ColumnLayout and RowLayout are suitable for responsive UI or UI that responds to window resizing.<\/p>\n\n\n\n

1.Colum {} <\/strong>: \uc544\uc774\ud15c\uc744 \uc138\ub85c\ub85c \uc815\ub82c\ud558\uae30 \uc704\ud574\uc11c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \/ Used to align items vertically.<\/p>\n\n\n\n

2.Row {} :<\/strong> \uc544\uc774\ud15c\uc744 \uac00\ub85c\ub85c \uc815\ub82c\ud558\uae30 \uc704\ud574\uc11c \uc0ac\uc6a9\ud569\ub2c8\ub2e4 \/ Used to align items horizontally<\/p>\n\n\n\n

3.ColumnLayout {} : <\/strong><\/p>\n\n\n\n

— Column\uacfc \uac19\uc774 \uc138\ub85c\ub85c \uc815\ub82c\ud558\uae30 \uc704\ud574\uc11c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \/ Used to align vertically, like a column.<\/p>\n\n\n\n

— \uc880\ub354 \ubcf5\uc7a1\ud55c \uad6c\uc870\ub97c \uc0ac\uc6a9\ud560\ub54c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \/ Used when using more complex structures.<\/p>\n\n\n\n

4.RowLayout {} :<\/strong><\/p>\n\n\n\n

— Row\uc640 \uac19\uc774 \uac00\ub85c\ub85c \uc815\ub82c\ud558\uae30 \uc704\ud574\uc11c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \/ Used to align horizontally, like Row.<\/p>\n\n\n\n

— \uc880 \ub354 \ubcf5\uc7a1\ud569 \uad6c\uc870\ub97c \uc0ac\uc6a9\ud560 \ub54c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \/ Used when using more complex structures.<\/p>\n\n\n\n

6.anchor :<\/strong><\/p>\n\n\n\n

— QML\uc5d0\uc11c UI \uc694\uc18c\uc758 \uc704\uce58\ub97c \ub2e4\ub978 \uc694\uc18c(\ub610\ub294 \ubd80\ubaa8)\uc758 \ud2b9\uc815 \uc704\uce58\uc5d0 \ub9de\ucdb0\uc11c \ubc30\uce58\ud558\uae30 \uc704\ud55c \uc18d\uc131 \uc2dc\uc2a4\ud15c.
A property system in QML for positioning UI elements relative to a specific location in another element (or parent).<\/p>\n\n\n\n

5.\ucf54\ub4dc \/ Code<\/strong><\/p>\n\n\n\n

\u2714\ufe0fMain.qml<\/p>\n\n\n\n

— \ucf54\ub4dc\uc5d0\ubcf4\uc2dc\uba74 ListModel\uacfc Repeater\uac00 \uc788\uc2b5\ub2c8\ub2e4.
If you look at the code, there is a ListModel and a Repeater.<\/p>\n\n\n\n

— ListModel\uc740 \ubc30\uc5f4,Repeater\ub294 \ub300\ubd80\ubd84\uc758 \ud504\ub85c\uadf8\ub798\ubc0d\uc5b8\uc5b4\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ubc18\ubcf5\ubb38\uc774\ub77c\uace0 \uc774\ud574\ud558\uc154\ub3c4 \ub429\ub2c8\ub2e4.
You can understand ListModel as an array, and Repeater as a loop used in most programming languages.<\/p>\n\n\n\n

import QtQuick\nimport QtQuick.Controls\nimport QtQuick.Layouts\n\nApplicationWindow {\n    visible: true\n    width: 800\n    height: 600\n    title: \"Layout,ListModel\"\n\n    \/\/ \ub370\uc774\ud130 \ubaa8\ub378 \uc815\uc758\n    ListModel {\n        id: fruitModel\n        ListElement { name: \"\uc0ac\uacfc\/Apple\" }\n        ListElement { name: \"\ubc14\ub098\ub098\/Banana\" }\n        ListElement { name: \"\ud3ec\ub3c4\/Grape\" }\n    }\n\n    ListModel {\n        id: gameModel\n        ListElement { name : \"Assassin's Creed\" }\n        ListElement { name : \"Uncharted3\" }\n        ListElement { name : \"Horizon zero dawn\" }\n    }\n\n    \/\/ \ud654\uba74\uc5d0 \ud45c\uc2dc\n    Column {\n        id:column1\n        anchors.centerIn: parent \/\/ vertical,horizontal\ubaa8\ub450 \uac00\uc6b4\ub370 \uc815\ub82c \/ Center align both vertically and horizontally\n\n        Repeater {\n            model: fruitModel\n            Text {\n                text: model.name   \/\/ ListElement \uc548\uc758 name \uc18d\uc131 \uc0ac\uc6a9 \/ Using the name property in ListElement\n                font.pixelSize: 18\n            }\n        }\n    }\n\n\/\/ \ud654\uba74\uc5d0 \ud45c\uc2dc\n\/\/ anchors.centerIn: column1 : \uac00\ub85c,\uc138\ub85c\ub97c \ubaa8\ub450 \uac00\uc6b4\ub370 \uc815\ub82c \ub428,\uc798\ubabb \uc0ac\uc6a9\ud560\uacbd\uc6b0 \ucda9\ub3cc \uc624\ub958 \uc788\uc74c.\n\/\/ Display on screen\n\/\/ anchors.centerIn: column1 : Centers both horizontally and vertically. If used incorrectly, a crash error may occur.\n\n    Row {\n        id:row1\n        \/\/anchors.centerIn: column1\n        anchors.top: column1.bottom        \/\/ Column \ubc14\ub85c \uc544\ub798 \uc704\uce58 \/ Located just below the column\n        anchors.horizontalCenter: parent.horizontalCenter  \/\/ \uac00\ub85c \uac00\uc6b4\ub370 \uc815\ub82c \/ horizontally center aligned\n        anchors.topMargin: 20              \/\/ \uc704\ucabd \uc5ec\ubc31 \/ top margin\n        Repeater {\n            model: fruitModel\n            Text {\n                text: model.name\n                font.pixelSize :  18\n            }\n        }\n    }\n\n    ColumnLayout {\n        id:column2\n        anchors.top:row1.bottom\n        anchors.horizontalCenter: row1.horizontalCenter  \/\/ row1\uc758 \uac00\ub85c \uc911\uc2ec\uc5d0 \uc815\ub82c \/ Align to the horizontal center of row1\n        anchors.topMargin: 20   \n        Repeater {\n            model: gameModel\n            Text {\n                text:model.name\n                font.pixelSize : 18\n            }\n        }\n    }\n\n    RowLayout {\n        id:row2\n        anchors.top:column2.bottom\n        anchors.horizontalCenter: row1.horizontalCenter  \/\/ row1\uc758 \uac00\ub85c \uc911\uc2ec\uc5d0 \uc815\ub82c \/ Align to the horizontal center of row1\n        anchors.topMargin: 20   \n        Repeater {\n            model: gameModel\n            Text {\n                text:model.name\n                font.pixelSize : 18\n            }\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n
6.\uc2a4\ud06c\ub9b0\uc0f7 \/ ScreenShot<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb QT QML\uc5d0\uc11c \uac00\ub85c \uc138\ub85c \ub808\uc774\uc544\uc6c3\uc5d0 \ub300\ud55c \uc124\uba85\uacfc \ucf54\ub4dc\uc785\ub2c8\ub2e4.Description and code for horizontal and vertical layout in QT QML. \ud83d\udc49\ud83c\udffb\uac00\ub85c ,\uc138\ub85c\ub808\uc774\uc544\uc6c3\uc5d0\ub294 Column,Row,ColumnLayout,RowLayout\uc774 \uc788\uc2b5\ub2c8\ub2e4.For horizontal and vertical layouts, there are Column, Row, ColumnLayout, and RowLayout. \ud83d\udc49\ud83c\udffb ColumnLayout\uacfc RowLayout\uc740 \ubc18\uc751\ud615 UI\ub098 \ucc3d \ub9ac\uc0ac\uc774\uc988 \ub300\uc751 UI\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.ColumnLayout and RowLayout are suitable for responsive UI or UI that responds […]<\/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-2730","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\/2730","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=2730"}],"version-history":[{"count":13,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2730\/revisions"}],"predecessor-version":[{"id":2745,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2730\/revisions\/2745"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=2730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=2730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=2730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}