Componentes do Qt QML

Além dos componentes da AppStudio QML que estão disponíveis para você projetar a interface do usuário de seu aplicativo, você também tem acesso a todos os componentes The Qt Company do próprio QML. Este tópico descreve os componentes mais úteis. Para uma lista completa de tipos de Qt QML, se refira à documentação de Qt.

A seguir estão alguns dos tipos mais usados do QML:

• Posicionadores
• Âncoras
• Layouts
• Repetidores
• Estados
• Conexões

Aviso:

Diferenças foram observadas na exibição de elementos da interface do usuário (IU) nos aplicativos AppStudio e amostras ao migrar do Qt 5.13.1 para Qt 5.15.2. Algumas diferenças incluem posição, tamanho, layout, cor, recorte, quebra automática e fonte. Revise a exibição de todos os elementos da IU de seus aplicativos. Em alguns casos, pode ser necessário alterar o aninhamento de seus componentes; em outros casos, propriedades adicionais ou menos podem precisar ser definidas. Como há muita flexibilidade em como os elementos da IU são definidos no QML, não há regras definidas.

Na versão 5.15.2, os tipos de propriedades do Qt como bool,string e int são estritos e não suportam mais valores nulos ou indefinidos. Se seu aplicativo usa esses tipos, você deve considerar como oferecer suporte a valores nulos ou indefinidos. Como alternativa, você pode usar o tipo de propriedade var, que permite valores nulos e indefinidos, mas também todos os outros valores possíveis.

Posicionadores

Os posicionadores são itens de recipiente que gerenciam as posições dos itens em sua interface do usuário. Oos tipos de posicionadores incluem linha, coluna, grade e fluxo. A organização de seus itens baseados em qualquer um destes permite a você organizá-los em um layout regular que é bem ajustado para redimensionar interfaces do usuários. Por exemplo, organize seus itens em uma grade e, ao visualizar seu aplicativo na orientação retrato, poderá ver uma matriz de itens de dois por cinco, mas mude para paisagem e ele reorganiza automaticamente sua grade de itens para melhor caber na tela , dando-lhe uma matriz três por quatro de itens.

Para mais informações sobre posicionadores, se refira à documentação de Qt.

Âncoras

Cada item pode ser visto como ter sete pontos de âncora e outros itens podem ser posicionados em relação a estes. Esses pontos são a parte superior, inferior, esquerda, direita, centro horizontal, centro vertical e linha de base (a linha na qual o texto do item é posicionado). Isto é ideal para itens de posicionamento relativo a cada item para criar interfaces do usuário dinâmicas. As âncoras permanecem até quando as dimensões ou posições dos itens alteram. As margens de âncora também podem ser definidas, especificando quanto espaço deve ser deixado de fora da âncora do item.

Para mais informações sobre âncoras, se refira à documentação de Qt.

Layouts

Para utilizar Qt Quick Layouts, você deve referenciar um módulo adicional em seu arquivo de QML, por exemplo:

import QtQuick.Layouts 1.15

Os três layouts são RowLayout, ColumnLayout e GridLayout. Comparado à linhas, colunas e grades, a utilização de layouts permite um controle mais refinido acima do posicionamento do item. Isto inclui a habilidade de especificar o alinhamento de cada item no layout. GridLayouts também permitem que você defina espaçamento separado de coluna e linha, estenda itens entre linhas e colunas e especifique uma célula de grade individual para um item. Layouts também podem ser utilizados para configurar larguras e alturas mínimas e máximas preferidas, como também a habilidade de preencher a largura e altura de cada item. Isto é especialmente útil ao projetar para imagens dinâmicas ou múltiplas. Layouts também podem ser refletidos, alterando um layout da esquerda para direita em um layout da direita para esquerda.

Repetidores

Um objeto repetidor cria itens de um modelo para utilizar com posicionadores, utilizadno dados de um modelo. Combinar repetidores e posicionadores é uma maneira eficaz de organizar muitos itens. Um modelo pode ser um dos seguintes:

• O número que indica o número de delegados para serem criados pelo repetidor
• Fonte de dados de lista de formulário gratuito—um ListModel
• Lista de string
• Lista de objeto

O delegado fornece um modelo definindo cada item instanciado pelo repetidor. Um delegado de repetidor pode acessar seu índice no repetidor como também os dados de modelo relevantes para o delegado.

Para mais informações sobre repetidores, se refira à documentação de Qt.

Estados

Os estados podem ser usados ​​para mostrar uma exibição ou tela diferente em um aplicativo. Você pode usá-los para mostrar ou ocultar elementos com base no valor de uma propriedade, para alterar a ancoragem ou para alterar objetos pais. Com base no estado, você pode iniciar, parar ou pausar animações ou executar scripts. Cada componente baseado em item tem uma propriedade de estado e um estado padrão. O estado padrão é a string vazia ("") e contém todos os valores de propriedade iniciais. A configuração da propriedade de estado para uma string vazia carregará o estado padrão.

Para mais informações sobre estados, se refira à documentação de Qt.

Conexões

No Qt 5.15, há uma nova sintaxe para conexões. O método anterior de criação de um manipulador on<Signal> está obsoleto e agora a sintaxe da função deve ser seguida. A seguir está uma mensagem de aviso que você receberá ao executar um aplicativo usando a sintaxe de conexão anterior:

qrc:/qml/main.qml:277:5: QML Connections: Implicitly defined onFoo properties in Connections are deprecated. Use this syntax instead: function onFoo (<arguments>) { ... }

O exemplo a seguir mostra como uma conexão era normalmente definida no Qt 5.13 e anterior:

Connections { 
     target: mouseArea 
     onPositionChanged: { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     onPressedChanged: { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

O exemplo a seguir mostra como uma conexão deve ser definida no Qt 5.15 e posterior:

Connections { 
     target: mouseArea 
     function onPositionChanged(mouse) { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     function onPressedChanged() { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

Agora que a sintaxe da função é usada, você deve garantir que todos os parâmetros de sinal sejam listados explicitamente. Se você omitir algum, os parâmetros de sinal não estarão disponíveis por seu nome, e isso pode levar a referências indefinidas em seu código. Por exemplo, você deve utilizar function onPositionChanged(mouse) em vez de onPositionChanged.

Ao listar os parâmetros de sinal, é recomendado que você liste todos os parâmetros na ordem correta usando nomes de parâmetro de sinal formal como os nomes de parâmetro de função. Por exemplo, utilize function onPositionChanged(mouse) e não function onPositionChanged(m).

Se o sinal for para uma alteração de propriedade, você deve nomear explicitamente o objeto para acessar a propriedade. Por exemplo, você deve utilizar mouseArea.pressed e não pressed.

Para mais informações sobre conexões, se refira à documentação do Qt.