[PyQt6] Drawer in QML

Drawer는 모바일 등의 UI에서 흔히 볼 수 있는 스와이프를 통해 나오는 메뉴같은 기능입니다.

QML로는 이것도 쉽게 만들어낼 수 있어요.

저도 이런 것들 때문에 QtWidgets를 버리고 QtQuick으로 넘어온거긴 합니다.

간단한 예제 하나로 설명 드릴테니 쉽게 이해하실 거에요.

기본 application 작성은 이전 포스팅을 참고해주세요.

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

Drawer Example

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

  ColumnLayout {
    anchors.centerIn: parent

    Label {
      id: idLabel
      text: "Hello"
    }

    Button {
      text: "Show"
      onClicked: idDrawer.open()
    }
  }

  Drawer {
    id: idDrawer
    width: 100
    height: parent.height

    ListView {
      anchors.fill: parent
      id: idListView
      currentIndex: -1

      delegate: ItemDelegate {
        width: idListView.width
        text: model.title
        highlighted: ListView.isCurrentItem

        onClicked: {
          idListView.currentIndex = index
          idLabel.text = model.title
          idDrawer.close()
        }
      }

      model: ListModel {
        ListElement { title: "Menu 1" }
        ListElement { title: "Menu 2" }
        ListElement { title: "Menu 3" }
        ListElement { title: "Menu 4" }
        ListElement { title: "Menu 5" }
      }
    }
  }
}

메뉴 선택을 보여드리기 위해 Label을 하나 두고, Drawer 동작을 위해 Button을 하나 두었습니다.

Swipe(마우스 drag)로도 잘 동작하지만, desktop application으로는 버튼 형식이 더 편하긴 하더라고요.

다음으로 Drawer입니다. 자식으로 ListView를 하나 갖고 있습니다.

ListView는 메뉴로 사용할 model을 갖고, 선택 등의 동작을 위해 delegate를 갖습니다.

선택을 하면 Label의 text를 변경하고, Drawer를 닫습니다.

아마 쉽게 다른 형태로 응용을 하실 수 있을 것 같아요.

저는 model에 다른 qml 파일들을 넣어두고, 선택할 경우 Loader를 통해 페이지를 변경하는 식으로 많이 사용합니다.

버튼을 클릭하거나 마우스로 왼쪽 부분을 드래그하면 Drawer가 열립니다.

저는 Navigator처럼 사용을 했는데, 얼마든지 응용이 가능합니다.

선택을 하면 저희가 정의한 대로 잘 동작하는 것을 볼 수 있죠.

edge property를 사용하여 Drawer의 위치를 왼쪽이 아니라 상, 하, 우로도 변경할 수 있습니다.

Wrap Up

오늘은 모바일 UI에서 많이 사용하는 Drawer 기능을 살펴보았습니다.

간단한 코드로 쉽게 만들 수 있었죠?

이번 포스팅도 도움이 되셨기를 바랍니다.