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.0
import QtQuick.Controls 2.2 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.5

Kirigami.Page {

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

}
Um botão recém-carregado

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 propriedade onCheckedChanged. Funciona de forma semelhante ao onClicked, excepto que a acção atribuída será executada quando a propriedade checked mudar. A checked é 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!"
    }
}
Um botão comutável

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 botão 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!")
}
Um botão de ferramenta

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

As opções de marcação servem 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
}
Um conjunto de opções de marcação

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

Os botões de opções exclusivas são desenhados 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
    }
}
Um conjunto de opções exclusivas

Comutadores

os comutadores são desenhados principalmente para serem usados em dispositivos móveis.

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 comutadores 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
}
Um conjunto de comutadores

Barras

As barras 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

Uma barra normal fornece ao utilizador algum controlo fino na selecção que pretendem fazer.

Por omissão, as barras vão da esquerda para a direita (e de baixo para cima, quando estiverem na vertical). 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
}
Um conjunto de barras deslizantes

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
}
Um conjunto de barras com marcações de traços

Barra deslizante de intervalos

O QtQuick Controls também fornece barras deslizantes com intervalo. 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
}
Um conjunto de barras deslizantes de intervalos

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
}