Controlos e elementos interactivos

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!")
    }

}

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!"
    }
}

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!")
}

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
}

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

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
}

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
}

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
}

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
}

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
}