Предисловие

Я использовал его раньшеPython создает графический интерфейс,Первый выборTkinter、PyQt5 . Однако рабочая нагрузка и код, необходимые для их реализации, слишком велики, и они требуют поэтапного проектирования и отладки макета интерфейса и других вопросов. Более того, финальное представление интерфейса не отличается особой красотой, а также есть свои недостатки. ряд проблем, таких как слишком большой размер после упаковки.

Недавно у коллеги в компании возникла необходимость в разработке соответствующего интерфейса, и он порекомендовал мне новую библиотеку графического интерфейса Python. Она может не только создавать локальные программы с графическим интерфейсом, но и одновременно генерировать веб-страницы. Gui Сервис, синхронизируйте интерфейс Gui с браузером для отображения. это nicegui。

Введение в NiceGui

NiceGui — это простая и удобная в использовании среда веб-интерфейса на основе Python, призванная упростить разработку интерфейсных приложений на Python.

Редактор также ознакомился с исходным кодом веб-служб, маршрутизации и т. д., основанных на Python. FastAPI Каркас построен. и UI элементы, основанные на Vue и Quasar。NiceGui В комплекте много готовых элементов. Он даже позволяет связывать значения между различными элементами. Различные диаграммы могут быть легко отображены.

Основные функции:

• • Предварительно загружен и готов к использованию GUI элемент,нравитьсякнопка、Этикетка、флажок、ползунок、выключательждать
• • Иконки эмодзи, SVG и base64 поддерживать
• • Обеспечьте простотуизданныеобязательность
• • для обновленияданныеизВстроенный таймер
• • способен оказать 3D сцена,Рисовать диаграммы
• • можно легко отобразитьИзображение и видео
• • это делаетПользовательская страница и макетстать легким,И встроенная поддержка Tailwind CSS.

Установка и использование NiceGui

1. Установка

использовать pip скачать NiceGui（Только поддержка 3.7 и выше）

pip install nicegui

2. Напишите простой код, чтобы проверить, нормально ли он работает.

from nicegui import ui
# Создать ярлык
ui.label('Welcome to NiceGui!')  
# Создайте кнопку, установите функцию обратного вызова и вызовите уведомление всплывающего сообщения niceuiiz.
ui.button('Click Here', on_click=lambda: ui.notify('Button Pressed'))
# niceui бегать
ui.run()

После нажатия кнопки «Выполнить» терминал выведет адрес доступа к веб-URL и автоматически откроет браузер.

NiceGUI ready to go on http://localhost:8080, and http://192.168.0.102:8080

Общий API NiceGui

1. Иконки и ссылки

• • icon() : Эта функция позволяет нам UI отображается на значке. Чтобы отобразить значок, нам нужно указать имя значка. Эта функция зависит от Quasar из QIcon。Можетиспользовать CSS、Quasar или Tailwind Цвет определяет параметры цвета. Варианты размеров предоставляются classes() методиспользовать CSS Единица определена.
• • link() Эта функция позволяет нам назначать ссылки на UI в тексте. Сначала указываем, что должна быть ссылка на текст, затем на соответствующий сайт. URL。

Дисплей эффектов:

2. Выберите элементы

NiceGui имеет разные элементы выбора.,нравитьсяпереключатель、переключательифлажок。

• • toggle()：этотфункция Можетсоздатьпереключатель,Мы передаем опцию, в которой содержится значение для метки из списка значений словаря. Когда пользователь выбирает вариант,Он сохраняется в переменной toggle.
• • radio()：Это похоже на toggle() Функция, но здесь мы можем выбрать опцию радио.
• • select()：этотфункция Создайте раскрывающийся список для выбора конкретного параметра.。с вышеизложеннымфункцияпо сравнению с,Эта функция ввода и хранения и выходного значения одинакова.
• • checkbox()：Когда пользователь выбираетфлажокчас,checkbox Переменной присвоено логическое значение True。
• Дисплей эффектов:

Здесь мы видим все созданные нами элементы выделения. щелкнуть Dropdown Выберите, появится раскрывающийся список, позволяющий выбрать один из вариантов. Это лишь некоторые из элементов, которые мы рассмотрели. Ницца Гуй Предоставляет широкий спектризэлементв различныхсценасерединаиспользовать。

А NiceGui поддерживает привязку значений между различными элементами пользовательского интерфейса, обеспечивая плавную интеграцию.

В приведенном выше коде мы используем ui.row() элемент объединяет два элемента (радио и переключить) для горизонтальной группировки. Чтобы сгруппировать их по вертикали, мы можем использовать ui.column()。toggle() функция содержит переменные bind_values(), который соединяет параметры радио для переключения параметров.

На изображении выше мы ясно видим привязку значений между двумя элементами пользовательского интерфейса. Аналогично, функцияbind_value() может работать в различных элементах пользовательского интерфейса, предоставляемых NiceGUI.

3. Пользовательский ввод и привязка значений

Функции, которые позволяют пользователям вводить текстовые или числовые данные в пользовательский интерфейс.

Функции в приведенном выше коде включают в себя:

• • input()：использоватьэтотфункциячас,создаст пустое текстовое поле,пользователь Может在其середина键入данные.У него есть имя под названием“ label ”из переменной, которая сообщает пользователю, что он ожидает от типа ввода. Всякий раз, когда пользователь вводит что-то в поле ввода, ui.label(). из .set_text() Функция будет активирована и на экране отобразится на типе текста.
• • number()：этотфункцияизметод работы и input() Функция аналогична, с той лишь разницей, что эта функция принимает цифры вместо текста.

Дисплей эффектов:

4. Элементы данных и диаграммы

Отображение табличных данных через NiceGui.

Чтобы отобразить таблицу,Укажите имена столбцов в списке столбцов。Каждый столбец состоит из спискав Представление в словаре。включить каждый столбецизимя、Этикеткаизначение поля（Обычно все столбцы одинаковы）。Может Предоставьте дополнительные при необходимостиизпара ключ-значение。

Например, пара ключ-значение «required:True» гарантирует, что столбцу имени требуется значение для любых новых элементов, добавляемых в таблицу. "align":"center" Выравнивает всю строку по центру под этим именем столбца.

Далее идет список строк。Список строк содержит значения вышеуказанного столбца.изсписок словарей。здесьиспользовать Полеимя,Мы предоставляем пары поле:значение в словаре. Затем используйте ui.table() функция, мы отображаем таблицу для Пользовательский интерфейс. Здесь мы можем назвать таблицу. строка_ключ Имена столбцов содержат уникальные значения.

Дисплей эффектов:

Pandas DataFrame с NiceGui

использовать table() Сама функция может быть отображена Pandas данные.

использовать NiceGUI отображать графику на экране

использовать NiceGUI в pyplot() функция, которая UI отображается на matplotlib графика.

Здесь мы используем with заказать, затем использовать ui.pyplot() функция. Мы даже передаем в функцию размер графика.

Теперь ниже мы пишем код для рисования графика через matplotlib. Здесь мы написали простой график, где ось X содержит значения от 0 до 10000 с шагом 10, а ось Y содержит их логарифмические значения.

Результат выполнения кода будет следующим:

в заключение

Разработчикиспользовать NiceGui (а Python Web framework) для создания веб-приложений. Он предоставляет необходимые инструменты для разработки полноценного веб-сайта со всеми интерфейсными частями внутри. Python середина. мы даже видели NiceGUI Различные элементы и способы принятия пользовательского ввода. Наконец, путем привязки значений мы узнали, что можем UI Как связать элементы.