[PyQt6] QML에서 Tool Bar 만들기

이번에는 간단한 예제와 함께 tool bar를 만들어 보겠습니다.

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

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

Tool Bar 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.accent: Material.Orange

  Action {
    id: idActHello
    onTriggered: idLabel.text = "Hello"
  }

  Action {
    id: idActBye
    onTriggered: idLabel.text = "Bye"
  }

  header: ToolBar {
    RowLayout {
      anchors.fill: parent
      spacing: 20

      ToolButton {
        icon.source: "hello.png"
        action: idActHello
      }

      Label {
        text: "Tool Bar"
        font.bold: true
        font.pixelSize: 24
        horizontalAlignment: Qt.AlignHCenter
        Layout.fillWidth: true
      }

      ToolButton {
        icon.source: "bye.png"
        action: idActBye
      }
    }
  }

  Label {
    anchors.centerIn: parent
    id: idLabel
    text: "Test String"
    font.pixelSize: 72
  }
}

Text를 출력할 Label을 하나 놓고, 이 문자열을 바꿀 2개의 Action을 정의 했습니다.

다음으로, 오늘의 메인인 ToolBar를 놓습니다.

간단하게, ToolButton을 양쪽에 하나씩 놓고, 가운데에 Label을 배치하였습니다.

각 Button은 만들어 놓은 Action과 연결을 시켰어요.

물론, onClicked()를 사용하여 직접 동작을 정의할 수도 있어요.

Action으로 만들어 두면 여러 곳에서 재사용하기 좋다는 장점이 있으니 원하는 방식을 선택해서 사용하시면 됩니다.

이번에는 icon을 사용해 보았어요. 적당한 아이콘을 같은 폴더에 넣었어요.

QML에서는 내장 아이콘이 없는 것 같더라고요. 이 부분은 너무나 아쉬움이 많은 부분이라 향후 업데이트에서 개선이 되길 간절히 바라고 있습니다.

실행을 시켜보면 원하는 대로 잘 동작하는 것을 확인하실 수 있어요.

Wrap Up

이제 QML을 사용하여 원하는대로 tool bar를 만드실 수 있을 거에요.

도움이 되셨길 바래요. ^-^/