[PyQt6] Getting Started with QtQuick

지금까지는 QtWidgets를 주력으로 사용했었는데, 항상 디자인에 대한 아쉬움이 있었어요.

그래서 계속 다른 것들을 알아봤었는데, electron.js 외에는 마땅한 대안을 찾기가 어렵더라고요.

이제와서 다시 C#쪽으로 가자니 굳이? 싶기도 하고. ㅎㅎㅎ

물론 QtWidgets도 stylesheet를 이용해서 디자인을 할 순 있는데, 우리는 개발자잖아요?

디자이너가 해놓은 것들 그냥 갖다써서 이쁘게만 하면 되는데 안그래도 취미로 하기에 부족한 시간이라 style까지 일일이 작업하는 건 부담이더라고요.

그나마 KivyMD가 괜찮았지만, 뭔가 정도 안가고 불만족스러운 부분들도 있다보니 결국 QtQuick 쪽으로 오게 되더라고요.

QML 같은 건 영 프로그램 언어 같지 않아서 개발자로서 호감도가 낮았지만, 어쩔 수 없다보니 이쪽도 익혀보려고 하고 있습니다.

다만 커뮤니티도 약하고 양질의 자료 찾는 것도 일이더라고요.

쉽고 간단한 예제로 원리를 설명해주는 예제나 강의를 전혀 찾질 못해서... 결국 대충 독학의 길을 걷게 되더라고여.

그래도 OS native 디자인에 의존하는 QtWidgets와 달리 OpenGL, Metal 등등으로 렌더링 하여 모바일에서도 사용가능한 것이 장점이라 할 수 있습니다.

기존에 사용하던 QtWidgets 등과의 연동이나 좀 더 큰 규모의 프로젝트에서의 활용 방법 등은 좀 더 공부를 해봐야 할 것 같아요.

Qt Creator나 Designer 같은 건 사용하기 싫어서 모두 코딩으로만 작업하고 있긴 합니다.

Install Package

$ pip install pyqt6

역시나 PyQt6만 설치하면 됩니다.

Create Application Window using QML

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

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

  Material.theme: id_theme_switch.position < 1 ? Material.Light : Material.Dark
  Material.foreground: id_theme_switch.position < 1 ? Material.Teal : Material.Orange
  Material.background: id_theme_switch.position < 1 ? Material.White : Material.Black
  Material.primary: id_theme_switch.position < 1 ? Material.Teal : Material.Orange
  Material.accent: id_theme_switch.position < 1 ? Material.Teal : Material.Orange

  Switch {
    id: id_theme_switch
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.margins: 10
    text: "Dark theme"
    checked: false
  }

  Text {
    id: id_id_text
    anchors.centerIn: parent
    text: "Test String"
    color: id_theme_switch.position < 1 ? Material.color(Material.Teal) : Material.color(Material.Orange)
    font.pointSize: 24
  }
}

QML도 역시나 YAML 등의 ML계열 언어들과 유사하죠?

테스트를 위해 Text type을 하나 배치하였고, Light theme와 Dark theme을 왔다 갔다 할 수 있게 Switch type도 우상단에 하나 배치하였어요.

보시면 기본적인 사용 자체는 간단하긴 합니다.

갹 component에 id를 부여하여 이 id를 사용하여 property나 method에 접근할 수 있어요.

Light theme일 때는 white와 teal을 메인으로 사용하고, Dark theme일 때는 black과 orange를 사용하도록 했어요.

Create Application

import sys

from PyQt6.QtCore import QUrl
from PyQt6.QtGui import QGuiApplication
from PyQt6.QtQml import QQmlApplicationEngine


app = QGuiApplication([])

engine = QQmlApplicationEngine()
engine.load(QUrl("src/main.qml"))
if not engine.rootObjects():
    sys.exit(-1)

sys.exit(app.exec())

QtWidgets와 사용방법이 조금 다르죠?

Application engine으로 우리가 작성한 qml을 불러서 사용하게 됩니다.

Run Application

예쁘게 잘 동작합니다.

Conclusion

확실히 QtWidgets에 비해 훨씬 예쁜 application이 만들어 집니다.

자료 탓으로 사용이 조금 더 어려운 감이 있긴 한데, 뭐 익숙해지면 이또한 편해지겠죠. ㅎㅎ