[Qt] QML(3) - Control Object

이전 포스팅까지는 스위치 ON/OFF 예제라던지 등에 Rectangle에 MouseArea를 이용하여 버튼과 비슷한 동작을 만들어 사용했습니다. QtQuick.Controls 모듈을 import할 시 사용할 수 있는 Control Object는 기존의 Button과 같은 UI들을 제공하기 때문에 이 포스팅에서는 몇개의 오브젝트 예제를 다뤄보려 합니다.

 

먼저 Button입니다. 간단하게 Button Object를 생성하면 Item에 MouseArea 처리 없이 Button으로 사용이 가능합니다.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    id:windows

    Row {
        anchors.centerIn : parent
        spacing: 10

        Button {
            width: 200
            height : 100
            text : "button"
        }
        Button {
            width: 200
            height : 100
            text : "button"
        }
        Button {
            width: 200
            height : 100
            text : "button"
        }
    }
}

Button의 이벤트 처리도 onClicked같은 signal로 처리 가능합니다.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    id:windows

    Row {
        anchors.centerIn : parent
        spacing: 10

        Button {
            width: windows.width / 5
            height : windows.height / 3
            text : "yellow"
            onClicked: {
                rect.color = "yellow"
            }
        }
        Button {
            width: windows.width / 5
            height : windows.height / 3
            text : "blue"
            onClicked: {
                rect.color = "blue"
            }
        }
        Button {
            width: windows.width / 5
            height : windows.height / 3
            text : "red"
            onClicked: {
                rect.color = "red"
            }
        }

        Rectangle {
            id : rect
            width: windows.width / 5
            height : windows.height / 3
            Behavior on color {
                ColorAnimation {
                    duration: 200
                }
            }
        }
    }
}

다음으로 TextInput을 대체할 수 있는 TextField 오브젝트와 TextArea 오브젝트입니다.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 500
    height: 300
    visible: true
    id:windows

    Row {
        spacing: 10
        padding: 10
        Column {
            spacing : 10
            TextField {
                id:textfield
                width:windows.width / 2
                height:windows.height / 6
                font.pixelSize: 20
            }
            Rectangle {
                border.width: 1
                width:windows.width / 2
                height:windows.height * 5 / 6
                TextArea {
                    id:textarea
                    anchors.fill: parent
                    font.pixelSize: 20
                    wrapMode: TextEdit.WordWrap
                }
            }
        }

        Button {
            width:windows.width / 6
            height:windows.height / 6
            text: "clear"
            onClicked: {
                textfield.text = ""
                textarea.text = ""
            }
        }
    }
}

TextField와 다르게 TextArea는 여러줄 입력이 가능하고 줄 바꿈에 대한 기준은 TextArae의 wrapMode Property를 통해 설정이 가능합니다.

다음은 CheckBox, ComboBox, Radiobox, SpinBox 오브젝트입니다. 

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    visible: true
    width : 650
    height: 200
    title: qsTr("CheckBox Demo")

    Item {
        anchors.fill: parent
        Row {
            anchors.centerIn: parent
            spacing: 20

            GroupBox {
                title:"CheckBox"
                anchors.verticalCenter: parent.verticalCenter

                Column {
                    spacing:10
                    CheckBox {
                        text : "Check1"
                    }
                    CheckBox {
                        text : "Check2"
                    }
                    CheckBox {
                        text : "Check3"
                    }
                }
            }

            GroupBox {
                title:"ComboBox"
                anchors.verticalCenter: parent.verticalCenter
                Column {
                    spacing : 10
                    ComboBox {
                        model: [ "Banana", "Apple", "Coconut" ]
                    }
                    ComboBox {
                        model: ListModel {
                            id: cbItems
                            ListElement { text: "Banana"; }
                            ListElement { text: "Apple"; }
                            ListElement { text: "Coconut"; }
                        }
                        onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).text)
                    }
                }
            }

            GroupBox {
                title:"RadioButton"
                anchors.verticalCenter: parent.verticalCenter
                Column {
                    spacing:10
                    RadioButton {
                        text : "Radio1"
                    }
                    RadioButton {
                        text : "Radio2"
                    }
                    RadioButton {
                        text : "Radio3"
                    }
                }
            }

            GroupBox {
                title: "SpinBox"
                anchors.verticalCenter: parent.verticalCenter

                Column {
                                    spacing:10
                    SpinBox {
                        from : 0
                        to : 1000
                        stepSize : 10
                    }

                    SpinBox {
                        id: spinbox
                        from: 0
                        value: 110
                        to: 100 * 100
                        stepSize: 1

                        property int decimals: 2
                        property real realValue: value / 100

                        validator: DoubleValidator {
                            bottom: Math.min(spinbox.from, spinbox.to)
                            top:  Math.max(spinbox.from, spinbox.to)
                        }

                        textFromValue: function(value, locale) {
                            return Number(value / 100).toLocaleString(locale, 'f', spinbox.decimals)
                        }

                        valueFromText: function(text, locale) {
                            return Number.fromLocaleString(locale, text) * 100
                        }
                    }
                }
            }
        }
    }
}