[PyQt6] Dialogs in QML

이번 포스팅에서는 다이얼로그에 대해서 살펴보겠습니다.

기본 형태를 먼저 다뤄보고, 가장 많이 사용하는 파일 선택 다이얼로그도 맛보기로 다뤄볼게요.

기본 application 작성은 이전 포스팅을 참고하여 따라와주세요.

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

Create Dialog

// 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

  Button {
    anchors.centerIn: parent
    text: "Open"
    onClicked: idDialog.open()
  }

  Dialog {
    id: idDialog
    title: "Dialog Example"
    standardButtons: Dialog.Ok | Dialog.Cancel

    Label {
      text: "Select button"
    }

    onAccepted: console.log("Ok clicked")
    onRejected: console.log("Cancel clicked")
  }
}

Button을 하나 만들어 버튼을 클릭할 경우 Dialog가 열리도록 하였습니다.

Dialog는 Ok와 Cancel 버튼 2개를 놓고, Label만 하나 놓았어요.

각각의 버튼을 클릭하면 메세지가 출력되도록 하였고요.

기본 사용은 매우 쉽죠?

사용 가능한 버튼 종류는 다음 링크를 참고해주세요.

https://doc.qt.io/qt-6/qml-qtquick-controls2-dialog.html#standardButtons-prop

Create FileDialog

import QtQuick.Dialogs

FileDialog {
  id: idDialog
  title: "Dialog Example"
  currentFolder: StandardPaths.StandardLocations(StandardPaths.HomeLocation)[0]

  onAccepted: console.log(idDialog.selectedFile)
}

FileDialog의 경우 open할 경로를 지정해주면 거기서부터 파일을 선택할 수 있습니다.

기본적으로 제공되는 내장 경로는 다음을 참고해주세요.

https://doc.qt.io/qt-6/qstandardpaths.html#StandardLocation-enum

원하는 파일만 선택을 하려면 nameFilters property를 사용하시면 됩니다.

nameFilters: ["Image files (*.png)"]

Create FolderDialog

FolderDialog {
  id: idDialog
  title: "Dialog Example"
  currentFolder: StandardPaths.StandardLocations(StandardPaths.HomeLocation)[0]

  onAccepted: console.log(idDialog.selectedFolder)
}

FolderDialog는 FileDialog와 유사한 형태로 좀 더 쉽게 사용할 수 있습니다.

Wrap Up

이번 포스팅에서는 QML을 사용한 Dialog의 사용법을 알아보았습니다.

어려운 내용은 없으니 쉽게 사용 가능하실 거에요.