[PyQt6] GroupBox, CheckBox, RadioButton in QML

이번 포스팅에서는 GroupBox, CheckBox, RadioButton에 대해 살펴보겠습니다.

매우 쉽게 사용하실 수 있으니 예제를 따라와보세요.

QML을 사용하여 기본적인 application을 구성하는 것은 이전 포스팅을 참고해주세요.

2022.11.03 - [Python] - [PyQt6] Getting Started with QtQuick

[PyQt6] Getting Started with QtQuick

GroupBox with CheckBox

// main.qml

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Controls.Material

ApplicationWindow {
  visible: true
  width: 640
  height: 480
  title: "Example App"

  Material.theme: Material.Dark
  Material.primary: Material.Orange
  Material.accent: Material.Orange

  GroupBox {
    anchors.centerIn: parent
    title: qsTr("Check Boxes")

    ColumnLayout {
      CheckBox {
        id: idCB
        text: qsTr("Item 1")
        
        onClicked: console.log(`Clicked: ${idCB.checkState}`)
      }

      CheckBox {
        text: qsTr("Item 2")
        checkState: Qt.Checked
      }

      CheckBox {
        text: qsTr("Item 3")
        tristate: true
      }
    }
  }
}

GroupBox의 경우 title property만 신경써주면 됩니다.

CheckBox의 경우도 text property만 넣어주면 기본 동작은 작동합니다.

checkState property를 사용하여 현재 상태를 얻거나 설정할 수 있고, tristate property를 사용하여 tri-state로 동작하도록 할 수도 있습니다.

clicked signal을 통해 interactive하게 사용할 수 있습니다.

개인적으로는 QtWidgets 처럼 명확하게 Group 테두리 선 부분에 text가 위치하는 게 UX 측면에서 더 좋아보이긴 하지만, 뭐 이정도만 되도 괜찮긴 하죠.

GroupBox with RadioButton

이번에는 예제에 라디오 버튼도 추가해 볼게요.

GroupBox {
  title: qsTr("Radio Buttons")

  ColumnLayout {
    RadioButton {
      id: idRB1
      text: qsTr("Item 1")
      checked: true

      onClicked: console.log(`${idRB1.checked}, ${idRB2.checked}, ${idRB3.checked}`)
    }

    RadioButton {
      id: idRB2
      text: qsTr("Item 2")

      onClicked: console.log(`${idRB1.checked}, ${idRB2.checked}, ${idRB3.checked}`)
    }

    RadioButton {
      id: idRB3
      text: qsTr("Item 3")

      onClicked: console.log(`${idRB1.checked}, ${idRB2.checked}, ${idRB3.checked}`)
    }
  }
}

RadioButton은 그냥 GroupBox로 묶어준 후, text property와 clicked signal만 사용하면 손쉽게 이용 가능합니다.

Wrap Up

GroupBox, CheckBox, RadioButton은 매우 쉽게 사용할 수 있었죠?

이번 포스팅도 유익하셨길 바라며 이만 줄입니다.