Une autre bibliothèque d'interface graphique Python, simple et facile à utiliser

Note du petit livre perdu du garçon

je dois finir de lire

dix

minute

Lecture rapide en seulement 4 minutes

environnement

python 3.9.16

nicegui 1.3.9

avant-propos

Dans le développement d'applications informatiques modernes, l'interface utilisateur graphique (GUI) constitue une partie importante de l'interaction de l'utilisateur avec le programme. Cependant, le développement d’interfaces graphiques nécessite souvent une grande quantité de code et une mise en page complexe, ce qui pose certains défis aux développeurs. Dans cet article de blog, je présenterai nicegui, une bibliothèque d'interface utilisateur graphique facile à utiliser qui permet de simplifier le développement d'interfaces graphiques et de permettre aux développeurs de créer plus rapidement des interfaces utilisateur attrayantes.

Principe de réalisation

nicegui est développé sur la base du langage de programmation Python et utilise une manière déclarative pour décrire l'interface utilisateur. Sa conception s'inspire du HTML et du CSS dans le développement Web et décrit les composants et les styles de l'interface à travers une syntaxe structurée similaire.

L'idée principale de nicegui est de diviser l'interface utilisateur en plusieurs composants, chacun avec ses propres propriétés et styles. Les développeurs peuvent utiliser les bibliothèques de composants fournies par nicegui, telles que des boutons, des zones de texte, des menus déroulants, etc., pour définir et disposer ces composants via un code simple. Dans le même temps, nicegui prend également en charge les composants personnalisés et les développeurs peuvent étendre la bibliothèque de composants en fonction de leurs propres besoins.

Installer

Vous pouvez utiliser pip pour installer, l'opération spécifique est la suivante

pip install nicegui

exemple de code

Vous trouverez ci-dessous un exemple de code nicegui simple

from nicegui import ui


ui.label('Hello NiceGUI!')
ui.button('BUTTON', on_click=lambda: ui.notify('button was pressed'))


ui.run()

Dans le code ci-dessus, importez d'abord le module ui dans nicegui, qui contient les composants couramment utilisés

L'étiquette et le bouton sont utilisés dans l'exemple, par défaut, ils sont disposés verticalement et la méthode run est utilisée pour démarrer le service

Exécutez le script ci-dessus, vous pouvez visiter http://127.0.0.1:8080 dans le navigateur pour voir l'effet

Cliquez sur le bouton BOUTON et un message d'invite s'affichera ci-dessous

Ensuite, regardons un exemple complet

from dataclasses import dataclass, field
from typing import Callable, List


from nicegui import ui




@dataclass
class TodoItem:
    name: str
    done: bool = False




@dataclass
class ToDoList:
    title: str
    on_change: Callable
    items: List[TodoItem] = field(default_factory=list)


    def add(self, name: str, done: bool = False) -> None:
        self.items.append(TodoItem(name, done))
        self.on_change()


    def remove(self, item: TodoItem) -> None:
        self.items.remove(item)
        self.on_change()




@ui.refreshable
def todo_ui():
    if not todos.items:
        ui.label('List is empty.').classes('mx-auto')
        return
    ui.linear_progress(sum(item.done for item in todos.items) / len(todos.items), show_value=False)
    with ui.row().classes('justify-center w-full'):
        ui.label(f'Completed: {sum(item.done for item in todos.items)}')
        ui.label(f'Remaining: {sum(not item.done for item in todos.items)}')
    for item in todos.items:
        with ui.row().classes('items-center'):
            ui.checkbox(value=item.done, on_change=todo_ui.refresh).bind_value(item, 'done')
            ui.input(value=item.name).classes('flex-grow').bind_value(item, 'name')
            ui.button(on_click=lambda item=item: todos.remove(item), icon='delete').props('flat fab-mini color=grey')




todos = ToDoList('My Weekend', on_change=todo_ui.refresh)
todos.add('Order pizza', done=True)
todos.add('New NiceGUI Release')
todos.add('Clean the house')
todos.add('Call mom')


with ui.card().classes('w-80 items-stretch'):
    ui.label().bind_text_from(todos, 'title').classes('text-semibold text-2xl')
    todo_ui()
    add_input = ui.input('New item').classes('mx-12')
    add_input.on('keydown.enter', lambda: (todos.add(add_input.value), add_input.set_value('')))


ui.run()

Ce code crée une application simple de liste de tâches en utilisant nicegui. Analysons sa fonction et sa logique étape par étape

Tout d’abord, les modules et classes nécessaires sont importés. Le module dataclasses fournit une classe de données décoratrice pour créer des classes de données concises et puissantes. Une classe de données est une classe spéciale principalement utilisée pour stocker des données et ne contient généralement que des propriétés et aucune méthode.

Ensuite, deux classes de données sont définies : TodoItem et ToDoList. TodoItem représente une tâche à faire et possède deux propriétés : name et done, où done indique si la tâche à faire est terminée. ToDoList représente la liste des tâches à effectuer et possède trois attributs : title, on_change et items, parmi lesquels items se trouve une liste d'objets TodoItem. ToDoList fournit également des méthodes d'ajout et de suppression pour ajouter et supprimer des éléments de tâche.

Ensuite, une fonction d'interface utilisateur appelée todo_ui est définie et marquée comme fonction d'interface utilisateur actualisable à l'aide du décorateur @ui.refreshable. La fonction todo_ui est utilisée pour restituer l'interface de la liste de tâches.

Dans la fonction todo_ui, vérifiez d'abord si la liste de tâches est vide, si elle est vide, affichez une étiquette avec le contenu La liste est vide., et affichez-la au centre. Ensuite, utilisez ui.linear_progress pour créer une barre de progression linéaire qui affiche la proportion de tâches terminées, calculez le nombre de tâches terminées et divisez par le nombre total de tâches, et transmettez cette valeur à la fonction ui.linear_progress. Ensuite, utilisez ui.row pour créer un conteneur de disposition de lignes et ajoutez deux étiquettes au conteneur pour afficher le nombre de tâches terminées et le nombre de tâches restantes. En parcourant chaque élément de la liste de tâches, le nombre de tâches terminées et le nombre de tâches restantes sont calculés et affichés dans l'étiquette. Ensuite, utilisez ui.row et ui.checkbox pour créer une disposition de lignes et une case à cocher pour afficher et modifier l'état d'achèvement de la tâche. Liez la valeur de la case à cocher en définissant le paramètre value et utilisez le paramètre on_change pour spécifier la fonction de rappel à appeler lorsque l'état de la case à cocher change. Utilisez la méthode bind_value pour lier la valeur de la case à cocher avec la propriété done de l'objet d'élément de tâche afin de réaliser une mise à jour dynamique. Ensuite, utilisez ui.row et ui.input pour créer une disposition de lignes et une zone de saisie pour afficher et modifier le nom de la tâche. Liez la valeur de la zone de saisie avec l'attribut name de l'objet à faire en définissant la valeur initiale de la zone de saisie et en utilisant la méthode bind_value.

Enfin, utilisez ui.row et ui.button pour créer une disposition de lignes et un bouton de suppression pour supprimer la tâche. Spécifiez la fonction de rappel à appeler lorsque vous cliquez sur le bouton en définissant le paramètre on_click du bouton et utilisez une expression lambda pour transmettre l'objet todo en tant que paramètre. Utilisez la méthode props pour définir le style et l’icône du bouton.

Dans le programme principal, une instance ToDoList todos est créée, le titre est défini sur My Weekend et la fonction todo_ui est spécifiée pour actualiser l'interface lorsque la liste de tâches change. Ensuite, certaines tâches initiales sont ajoutées en appelant la méthode todos.add. Ensuite, utilisez ui.card pour créer un conteneur de cartes et définir son style. Dans le conteneur de cartes, créez une étiquette et utilisez la méthode bind_text_from pour lier son texte à l'attribut title de l'instance todos afin d'obtenir une mise à jour dynamique. Ensuite, appelez la fonction todo_ui pour afficher l'interface de la liste de tâches. Créez une zone de saisie add_input pour ajouter une nouvelle tâche. En écoutant l'événement keydown.enter de la zone de saisie add_input, lorsque l'utilisateur appuie sur la touche Entrée, appelez la méthode todos.add pour utiliser la valeur de la zone de saisie. en tant que nouvel élément de tâche Ajoute l'élément à la liste et réinitialise la valeur de la zone de saisie à une chaîne vide.

Enfin, appelez ui.run pour démarrer la boucle d'événements de l'application nicegui, affichez l'interface et attendez l'interaction de l'utilisateur.

Grâce à cet exemple de projet, nous pouvons voir la simplicité et la facilité d'utilisation de nicegui, et les développeurs peuvent rapidement créer une interface d'application entièrement fonctionnelle.

Les références

https://github.com/zauberzeug/nicegui ( https://github.com/zauberzeug/nicegui )

https://nicegui.io/documentation ( https://nicegui.io/documentation )

Planète du savoir gratuit

Une autre bibliothèque d'interface graphique Python, simple et facile à utiliser

Je suppose que tu aimes