Controlos e elementos interactivos

Torne as suas aplicações mais interactivas graças aos botões, controlos de selecção, barras deslizantes e campos de texto.

O Kirigami oferece uma grande selecção de diferentes elementos interactivos que poderá usar nas suas aplicações. Cada tipo diferente tem estilos de interacção ligeiramente diferentes, estilos visuais e funcionalidades. O uso do tipo correcto de controlo na sua aplicação podê-lo-á ajudar a tornar a sua interface de utilizador mais adaptativa e intuitiva.

Botões

Nas aplicações do Kirigami, usamos os botões dos controlos do QtQuick. O uso dos mesmos é bastante simples: configuramos o texto na propriedade text e todas as acções que pretendemos que ela faça serão definidas na propriedade onClicked .

import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20

Kirigami.Page {

    Controls.Button {
        text: "Beep!"
        onClicked: showPassiveNotification("Boop!")
    }

}
Uma janela que contém um botão "Beep" no canto superior esquerdo que, ao ser carregada, mostra uma notificação passiva "Boop" no fundo da janela

Botões comutáveis

O comportamento dos botões poderá ser alterado para os tornar comutáveis: neste modo, os mesmos ficarão carregados até que volte a carregar neles. Este modo poderá ser activado com a propriedade checkable configurada como true; poderemos também configurar os botões para ficarem activos por omissão se configurarmos a propriedade checked como true.

Poderemos obter o máximo dos botões comutáveis se usarmos a rotina de evento onCheckedChanged, que é gerada automaticamente a partir do evento checked. Funciona de forma semelhante ao onClicked, excepto que a acção atribuída será executada quando o estado do botão. Esta é uma propriedade booleana, a qual poderá ser útil para alguns casos de uso específicos.

Neste exemplo, definimos a visibilidade de uma área incorporada com base no estado de um botão comutável:

Controls.Button {
    text: "Toggle!!"
    checkable: true
    checked: true
    onCheckedChanged: myDrawer.visible = checked
}

Kirigami.OverlayDrawer {
    id: myDrawer
    edge: Qt.BottomEdge
    modal: false

    contentItem: Controls.Label {
        text: "Peekaboo!"
    }
}
Uma janela que contém um botão comutável "Toggle" que, quando muda de estado apresenta "Peekaboo" na área do 'contentItem', como uma barra de estado

Botões da barra de ferramentas

Existe um tipo de botão específico para usar nas barras de ferramentas, o Controls.ToolButton . A diferença mais óbvia entre este e um Button convencional é o estilo, onde os botões de ferramentas ficam planos (ainda que isto possa ser alterado com a propriedade booleana flat).

Controls.ToolButton {
    text: "Tool beep..."
    onClicked: showPassiveNotification("Tool boop!")
}
Uma janela que mostra um botão de ferramenta "Tool beep", que é completamente plano

Controlos de selecção

Os controlos de selecção permitem aos utilizadores fazerem uma escolha ou seleccionar uma opção. Existem diferentes tipos que são mais adequados, dependendo das diferente situações.

Opções de Marcação

Uma Controls.CheckBox serve para opções em que as alternativas não são exclusivas e onde cada opção tem uma alternativa bem definida.

Controls.CheckBox {
    text: "Beep!"
    checked: true
}
Controls.CheckBox {
    text: "Boop!"
    checked: false
}
Uma janela que mostra um conjunto de opções de marcação, onde mais que uma opção poderá ser assinalada ao mesmo tempo

Como poderá ver, são simples de usar. A propriedade checked guarda um valor booleano que determina se estavam ou não assinaladas.

Opções exclusivas

Um Controls.RadioButton é desenhado para situações em que o utilizador deverá escolher uma única opção a partir de um conjunto de várias opções.

Estes botões são exclusivos por omissão: só um deles poderá estar assinalado no mesmo item-pai.

Como as opções de marcação, poderão estar assinalados ou não por omissão com a propriedade checked.

ColumnLayout {
    Controls.RadioButton {
        text: "Tick!"
        checked: true
    }
    Controls.RadioButton {
        text: "Tock!"
        checked: false
    }
}
Uma janela que mostra um conjunto de botões de opções exclusivas, onde só um destes botões pode estar assinalado ao mesmo tempo

Comutadores

No computador, a alteração da configuração normalmente envolve a alteração de uma opção e depois aplicar essa alteração com um botão "Aplicar" ou "OK". Em dispositivos móveis, podemos usar os objectos Controls.Switch para esse fim.

Os comutadores poderão alternar entre um estado ligado e desligado. Poderá carregar ou tocar nos mesmos para os comutar, e os mesmos poderão ser arrastados para a posição 'ligado' ou 'desligado'. Mais uma vez, os comutadores poderão ser configurados para estar ligados ou desligados por omissão com a propriedade checked.

Controls.Switch {
    text: "Switchy"
    checked: true
}
Controls.Switch {
    text: "Swootchy"
    checked: false
}
Uma janela que mostra um conjunto de interruptores que funcionam como comutadores

Barras

As barras deslizantes permitem aos utilizadores seleccionarem determinados valores se deslizar uma pega ao longo de um risco. Graças aos QtQuick Controls, existem vários tipos que poderá escolher, dependendo dos valores que gostaria que os seus utilizadores escolhessem na sua aplicação.

Barras normais e com marcações

Um Controls.Slider normal fornece ao utilizador algum controlo fino na selecção que pretendem fazer.

No modo da Esquerda para a Direita, as barras aumentam o seu valor quando as desloca da esquerda para a direita, enquanto que no modo da Direita para a Esquerda, as mesmas funcionam na direcção inversa. Em ambos os modos, as barras com orientação vertical são incrementadas de baixo para cima.

A coloração dá uma reacção visual de quão grande é o valor que está a escolher.

As barras deslizantes têm algumas propriedades interessantes às quais devemos prestar atenção:

  • value: contém o valor onde se encontra a pega, podendo ser definido manualmente para oferecer um valor predefinido válido
  • to: define o intervalo da barra, configurando o valor máximo até onde poderá ir
  • orientation: permite à barra ser disposta numa posição vertical com o Qt.Vertical
Controls.Slider {
    id: normalSlider
    orientation: Qt.Vertical
    value: 5.0
    to: 10.0
}
Uma janela que mostra um conjunto de barras deslizantes, uma horizontal e uma vertical

Outra propriedade útil que podemos usar é o stepSize. Se configurarmos esta com um valor numérico, permite-nos criar uma barra deslizante que se ajusta aos valors que sejam múltiplos do stepSize indicado, sendo estes múltiplos indicados através de traços. Por isso, se configurarmos esta propriedade como 2.0, quando o utilizador arrastar a pega da barra, só poderá seleccionar os valores 0.0, 2.0, 4.0, etc., até ao valor indicado na propriedade to.

Controls.Slider {
    id: tickmarkedSlider
    value: 6.0
    to: 10.0
    stepSize: 2.0
}
Uma janela que mostra um conjunto de barras deslizantes com traços marcados que estão divididos de forma simétrica, onde cada divisão é chamada de 'passo'

Barras deslizantes de intervalos

O QtQuick Controls também fornece Controls.RangeSliders . Estas têm duas pegas, permitindo-lhe definir uma gama de valores entre as duas pegas.

Existem duas propriedades novas a ter em mente: o first.value e o second.value, que guardam os valores das duas pegas. Como na propriedade value das barras normais, estas podem ser predefinidas.

Controls.RangeSlider {
    id: rangeSlider
    to: 10.0
    first.value: 3.0
    second.value: 6.0
}
Uma janela que mostra um conjunto de barras deslizantes com intervalos, com dois círculos amovíveis que são usados para delimitar um dado intervalo

Também a poderemos transformar numa barra com traços, configurando o valor da propriedade stepSize com algum número, da mesma forma que faríamos com uma barra deslizante normal.

Controls.RangeSlider {
    id: rangeTickmarkedSlider
    to: 10.0
    first.value: 4.0
    second.value: 6.0
    stepSize: 2.0
}