Textual – Criando uma caixa de seleção personalizada

Textual é um ótimo pacote de interface de usuário Python. Textual permite criar uma interface semelhante a GUI em seu terminal.

Você pode usar muitos widgets diferentes no Textual. No entanto, o widget que você focará neste tutorial é a humilde caixa de seleção.

As caixas de seleção são usadas para escolhas booleanas. Eles retornam True se marcado e False se desmarcado. Você pode usar uma caixa de seleção como uma dica visual clara para indicar se uma ou mais opções estão ativadas ou desativadas.

Neste tutorial, você aprenderá o seguinte:

• Como criar uma caixa de seleção padrão
• Como personalizar o widget da caixa de seleção

Vamos começar!

Você deve sempre começar com o widget padrão para ver se funciona para você. Com isso em mente, abra seu IDE Python favorito e crie um novo arquivo com o seguinte código:

from textual.app import App, ComposeResult
from textual.containers import VerticalScroll
from textual.widgets import Checkbox


class CheckboxApp(App(None)):

    def compose(self) -> ComposeResult:
        with VerticalScroll():
            yield Checkbox("Mike")

    def on_checkbox_changed(self, event: Checkbox.Changed) -> None:
        self.notify(f"Checkbox value: {event.value}")


if __name__ == "__main__":
    CheckboxApp().run()

O exemplo acima é baseado em um exemplo de código do Documentação textual. Você não precisa usar um Rolagem Vertical container aqui, mas é conveniente ao adicionar uma série de widgets ao container.

Seu foco principal deve estar no Caixa de seleção em si. Aqui, você simplesmente cede de compor()e então você pega o Caixa de seleção.Alterado evento. Quando o evento é acionado, você exibe uma notificação ao usuário indicando que ele alterou o valor da caixa de seleção.

Ao executar este código, você verá algo assim:

No entanto, se quiser deixar as bordas do widget sempre visíveis, você precisará adicionar uma borda ao widget.

Mas e se você quiser que a caixa de seleção também esteja completamente vazia, em vez de um “X” acinzentado? É isso que você aprenderá a fazer na próxima seção!

Como personalizar o widget de caixa de seleção

Ter um “X” acinzentado não é necessariamente uma coisa ruim se você configurou seu aplicativo Textual para ter um fundo mais claro. Mas se estiver usando um fundo padrão ou escuro, você terá alguns problemas de contraste.

Muitos kits de ferramentas GUI mostrarão uma caixa de seleção vazia para seu estado Falso, enquanto o padrão Textual é um “X” acinzentado. Se quiser alterar o caractere mostrado ou torná-lo uma caixa vazia como outros kits de ferramentas, você precisará aprender como personalizar o próprio widget.

Felizmente, criar um widget personalizado em Textual é muito simples. Crie um novo arquivo Python em seu IDE e insira o seguinte código:

from textual.app import App, ComposeResult
from textual.containers import VerticalScroll
from textual.widgets import Checkbox

class CustomCheck(Checkbox):
    BUTTON_INNER = " "

    def toggle(self) -> None:
        if self.value:
            CustomCheck.BUTTON_INNER = " "
        else:
            CustomCheck.BUTTON_INNER = "X"
        self.value = not self.value
        return self


class CheckboxApp(App(None)):
    #CSS_PATH = "checkbox.tcss"

    def compose(self) -> ComposeResult:
        check = CustomCheck("Mike")

        with VerticalScroll():
            yield check

    def on_checkbox_changed(self, event: Checkbox.Changed) -> None:
        self.notify(f"Checkbox value: {event.value}")


if __name__ == "__main__":
    CheckboxApp().run()

Quando você deseja personalizar um widget pré-existente no Textual, quase sempre você o subclassificará. Então aqui, você subclassifica o Caixa de seleção classe para criar um novo Verificação personalizada aula. Em seguida, você substitui o BUTTON_INNER atributo de classe, bem como o alternar() método.

Se você olhar o código-fonte, descobrirá que BUTTON_INNER o padrão é “X”, então aqui você está padronizando para uma string vazia. Então você atualiza alternar() para trocar o “X” quando estiver marcado e trocá-lo novamente quando estiver desmarcado.

A outra mudança é usar a nova classe de widget no código do seu aplicativo.

Para aumentar a visibilidade do widget, você pode adicionar uma borda usando Textual CSS. Crie um novo arquivo chamado caixa de seleção.tcss e adicione o seguinte código a ele:

CustomCheck {
    border: round green;
}

Certifique-se de salvar este arquivo na mesma pasta do arquivo Python.

Agora, ao executar este código, você verá o seguinte:

Bom trabalho! Agora você tem uma caixa de seleção personalizada.

Concluindo

Textual é uma ótima maneira de criar lindas interfaces de usuário em seu terminal. Neste tutorial, você aprendeu como criar um widget de caixa de seleção normal e, em seguida, aprendeu como criar uma caixa de seleção personalizada.

Você pode aplicar esse conhecimento para personalizar outros widgets no Textual. Você precisará estudar atentamente o código do widget para entender como ele funciona e poder modificá-lo com sucesso. Talvez você precise passar por várias iterações para obter exatamente o que deseja.

Não desista! Você chegará lá eventualmente e ficará orgulhoso de si mesmo por ter persistido!

Se você achou este artigo interessante e deseja saber mais sobre Textual, confira os seguintes links: