PySide6 e PyQt6 na criação de interfaces gráficas com QML

Linguagem de marcação declarativa tem mostrado muita flexibilidade e deu novos poderes ao desenvolvimento desktop.

Nos últimos anos, a programação declarativa tem ganhado destaque, e uma das estrelas que brilha intensamente nesse cenário é o QML (Qt Meta-Object Language).

Este é um paradigma de programação que se destaca por sua elegância, flexibilidade e poder, especialmente no desenvolvimento de interfaces de usuário.

Neste blog post, mergulharemos nas profundezas do QML, explorando sua sintaxe, recursos avançados e o papel crucial que desempenha no ecossistema Qt.

O que é QML?

O QML é uma linguagem de marcação declarativa e orientada a objetos, a mesma usada para definir interfaces de usuário (GUI) no framework Qt.

Ela é projetada para ser intuitiva e expressiva, permitindo que os desenvolvedores criem interfaces ricas e dinâmicas de maneira eficiente.

O QML é parte integrante do conjunto de ferramentas Qt, que oferece um ambiente completo para desenvolvimento de software multiplataforma.

História do QML

O QML foi introduzido pela primeira vez no Qt 4.7, lançado em 2010.

A linguagem foi desenvolvida para tornar o desenvolvimento de interfaces de usuário mais fácil e acessível.

Desde seu lançamento, o QML se tornou uma linguagem popular para desenvolvimento de interfaces de usuário.

É usado por uma ampla gama de empresas, incluindo Google, Samsung, Nokia, AMD e IBM.

Estrutura do QML

A estrutura básica do QML é composta de objetos, propriedades e eventos.

Objetos

Os objetos são a base da linguagem QML.

Eles representam elementos de interface de usuário, como botões, campos de texto e listas.

Propriedades

As propriedades são usadas para definir o comportamento e a aparência dos objetos.

Elas podem ser usadas para definir o tamanho, a cor, a fonte e outros atributos dos objetos.

Eventos

Os eventos são usados para comunicar eventos entre objetos.

Eles podem ser usados para responder a ações do usuário, como clicar em um botão ou mover o mouse sobre um elemento.

Sintaxe clara e concisa

Uma das características mais marcantes do QML é sua sintaxe clara e concisa.

Ao contrário de outras linguagens de programação, o QML adota uma abordagem declarativa, onde os desenvolvedores descrevem a estrutura e o comportamento dos elementos em vez de programar procedimentos detalhados.

Considere o seguinte exemplo simples que representa um botão em QML:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: root

    height: Screen.height / 2
    minimumHeight: Screen.height / 3
    minimumWidth: Screen.height / 3
    title: qsTr('Python e QML')
    visible: true
    width: Screen.width / 2
    x: 40
    y: 50

    Button{
        text: 'Clique aqui!'
        anchors.centerIn: parent
        onClicked: {
            console.log('Botão clicado!')
        }
    }
}

Criando um aplicativo com QML.

Neste exemplo, definimos uma janela de aplicativo (ApplicationWindow) com um botão (Button) que exibe um texto.

A função onClicked é chamada quando o botão é clicado, e ela simplesmente imprime uma mensagem no console.

A clareza desta sintaxe torna o QML uma escolha popular para desenvolvedores que desejam criar interfaces de usuário de forma eficiente.

Integração com JavaScript

Embora o QML tenha uma sintaxe própria, ele é totalmente integrado com JavaScript, permitindo que os desenvolvedores aproveitem toda a potência desta linguagem de programação amplamente utilizada.

Essa integração facilita a manipulação dinâmica de propriedades, a execução de lógica de negócios e a interação com dados externos.

Vejamos um exemplo de como podemos usar JavaScript para criar uma animação simples:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: root

    height: Screen.height / 2
    minimumHeight: Screen.height / 3
    minimumWidth: Screen.height / 3
    title: qsTr('PySide6, PyQt6 e QML')
    visible: true
    width: Screen.width / 2
    x: 40
    y: 50

    Image {
        id: minhaImagem

        anchors.centerIn: parent
        source: 'https://images.freeimages.com/image/previews/797/popcorn-movie-icon-design-5693157.png'

        MouseArea {
            anchors.fill: parent

            onClicked: {
                minhaImagem.rotation += 45;
            }
        }
    }
}

Abrindo uma imagem com QML.

Neste exemplo, temos uma imagem que gira 45 graus sempre que a área do mouse associada a ela é clicada:

Girando uma imagem com QML.

A capacidade de incorporar JavaScript no QML amplia significativamente as possibilidades de interatividade e dinamismo nas interfaces de usuário.

Reatividade e propriedades

Uma característica poderosa do QML é a reatividade, que permite que as propriedades dos objetos estejam vinculadas entre si.

Isso significa que, se uma propriedade mudar, as propriedades vinculadas a ela também serão atualizadas automaticamente.

Considere o seguinte exemplo de um contador simples:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: root

    property int contador: 0

    height: Screen.height / 2
    minimumHeight: Screen.height / 3
    minimumWidth: Screen.height / 3
    title: qsTr('PySide6, PyQt6 e QML')
    visible: true
    width: Screen.width / 2
    x: 40
    y: 50

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 12

        Text {
            id: text

            Layout.fillHeight: true
            Layout.fillWidth: true
            text: `Contador: ${contador}`
        }
        Button {
            id: button

            Layout.fillWidth: true
            text: 'Clique aqui!'

            onClicked: {
                contador++;
            }
        }
    }
}

Neste caso, a propriedade contador está vinculada ao texto exibido na interface do usuário.

Sem a necessidade de manipulação manual, a atualização do contador é automaticamente refletida no texto:

Reatividade e propriedades com QML.

Desenvolvimento multiplataforma com Qt

Uma das maiores vantagens do QML é sua integração perfeita com o Qt, um framework de desenvolvimento multiplataforma.

O Qt permite que os desenvolvedores criem aplicativos que podem ser executados em uma variedade de sistemas operacionais, incluindo Windows, Linux, macOS, Android e iOS.

Isso é crucial para atender a um público amplo e garantir a eficiência do desenvolvimento.

Python e QML

Os bindings PySide6 e PyQt6 possuem suporte a linguagem de marcação QML.

📝 Para saber mais sobre esses bindings, acesse a serie sobre Qt.

PySide6

Para executar um arquivo QML (*.qml) a partir da linguagem de programação Python e o binding PySide6:

# -*- coding: utf-8 -*-
"""PySide6 e QML."""

from pathlib import Path

from PySide6 import QtCore, QtWidgets, QtQml

BASE_DIR = Path(__file__).resolve().parent

UI_FILE = BASE_DIR.joinpath('MainWindow.qml')


if __name__ == "__main__":
    import sys

    application = QtWidgets.QApplication(sys.argv)

    engine = QtQml.QQmlApplicationEngine()
    engine.load(QtCore.QUrl.fromLocalFile(UI_FILE))

    if not engine.rootObjects():
        sys.exit(-1)

    sys.exit(application.exec())

O binding PySide6 também fornece algumas ferramentas para a manipulação e formatação de arquivo QML (*.qml):

  • pyside6-qml.

  • pyside6-qmlformat.

  • pyside6-qmllint.

  • pyside6-qmltyperegistrar.

  • pyside6-qmlcachegen.

  • pyside6-qmlimportscanner.

  • pyside6-qmlls.

PyQt6

Com o binding temos praticamente o mesmo código a diferença é que devemos passar uma str para QtCore.QUrl.fromLocalFile():

# -*- coding: utf-8 -*-
"""PyQt6 e QML."""

from pathlib import Path

from PyQt6 import QtCore, QtWidgets, QtQml

BASE_DIR = Path(__file__).resolve().parent

UI_FILE = str(BASE_DIR.joinpath('MainWindow.qml'))


if __name__ == "__main__":
    import sys

    application = QtWidgets.QApplication(sys.argv)

    engine = QtQml.QQmlApplicationEngine()
    engine.load(QtCore.QUrl.fromLocalFile(UI_FILE))

    if not engine.rootObjects():
        sys.exit(-1)

    sys.exit(application.exec())

Desvantagens do QML

O QML também apresenta algumas desvantagens, incluindo:

Curva de aprendizado: O QML é uma linguagem complexa que pode ser difícil de aprender para iniciantes. Recursos limitados: O QML ainda está em desenvolvimento e não oferece todos os recursos de outras linguagens de desenvolvimento de interfaces de usuário.

Conclusão

O QML é mais do que uma simples linguagem de marcação; é uma ferramenta poderosa para o desenvolvimento de interfaces de usuário ricas e interativas. Sua sintaxe clara, integração com JavaScript, reatividade e suporte multiplataforma fazem dele uma escolha valiosa para desenvolvedores, especialmente aqueles que buscam criar experiências de usuário modernas e envolventes.

Ao explorar o QML, os desenvolvedores entram em um universo de possibilidades, onde a criatividade encontra a eficiência. Se você ainda não experimentou essa faceta do desenvolvimento, agora é o momento ideal para embarcar nessa jornada e descobrir os encantos do QML.

Extra

Documentação

Softwares

Online

RADs

Did you find this article valuable?

Support Renato Cruz by becoming a sponsor. Any amount is appreciated!