使用终极 GUI 框架 NiceGUI 提升你的 Python 应用程序

介绍

随着机器学习和深度学习网站应用程序的快速增长，开发人员一直在寻找新的 Web 框架，以便更轻松地构建这些网站应用程序。

数据科学应用程序的普及程度已经上升，因此新的框架也在增加。开发人员创建了许多新的框架，这些框架被证明对构建这些网站应用程序很有帮助。其中一个框架就是NiceGUI。在本文中，我们将关注这个框架以及如何使用它构建简单的应用程序。

学习目标

• 了解 NiceGUI

• 学习使用 NiceGUI 编写基本元素

• 了解值绑定的工作原理

• 使用 NiceGUI 在 UI 中显示数据

• 使用 NiceGUI 构建应用程序

目录

• 介绍

• 什么是 NiceGUI？

• 安装 NiceGUI

• NiceGUI 的基本元素

• 用户输入和值绑定

• 数据元素和图表

  • 带有 NiceGUI 的 Pandas DataFrame

• 用例和应用程序

• 结论

什么是 NiceGUI？

NiceGUI是一个简单易用的基于Python的Web-UI框架，其目的是使在Python中开发前端应用程序变得容易。

NiceGUI Framework 的 UI 元素基于 Vue 和 Quasar。NiceGUI带有许多现成的元素。它甚至允许不同元素之间的值绑定。NiceGUI 可以轻松显示各种图表。它的开发人员选择在 Fast API Framework 之上构建它，因为它具有快速的性能和用户友好的界面。

NiceGUI 中的样式随着 CSS、Tailwind 和 Quasar 的变化而变化。默认情况下，它允许自定义样式。使用 NiceGUI 构建从短脚本到仪表板再到完整的机器人项目，甚至是机器学习网站应用程序。

一些功能包括：

• 预加载了随时可用的 GUI 元素，如按钮、标签、复选框、滑块、开关等

• 表情符号图标、SVG 和 base64 支持

• 提供简单的数据绑定

• 用于刷新数据的内置定时器

• 能够渲染 3D 场景，绘制图表

• 可以轻松显示图像和视频

• 它使自定义页面和布局变得容易，并且内置了对 Tailwind CSS 的支持

安装 NiceGUI

像使用 pip 的其他普通 Python 包一样下载 NiceGUI。

python3 -m pip install nicegui

请注意，NiceGUI 甚至提供了一个 Docker Image 来测试其功能，而无需将其下载到机器上。让我们看一些示例代码：

1. from nicegui import ui
3. ui.label('Welcome to NiceGUI!')
4. ui.button('Click Here', on_click=lambda: ui.notify('Button Pressed'))
6. ui.run()

要使用 NiceGUI，我们需要导入库nicegui。我们将在这里使用nicegui的三个函数

• **label()**：使用此函数在 UI 上显示文本

• **button()**：此函数用于为 UI 创建可单击的按钮。

• **notify()**：底部的弹出窗口将显示此函数中编写的内容。

让我们运行代码并查看下面的输出

该应用程序可以从端口 8080 访问。我们看到这里有一个按钮 Click Here。单击该按钮后，会显示一个弹出窗口，告知按钮已按下

NiceGUI 的基本元素

在本节中，我们将研究一些我们将使用 NiceGUI 框架创建的基本元素。

图标和链接

让我们从显示图标和将网站链接到 UI 中的文本开始

1. from nicegui import ui
3. ui.label('Display Icon')
4. ui.icon('fingerprint', color='primary').classes('text-5xl')
5. ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')
7. ui.run()

从上面的代码创建以下函数：

• “icon()”函数允许我们在 UI 上显示图标。要显示一个图标，我们需要提供一个图标名称。此功能依赖于 Quasar 的 QIcon。可以使用 CSS、Quasar 或 Tailwind 颜色指定颜色选项。大小选项由 classes() 方法使用 CSS 单位确定。

• “link()”函数使我们能够将链接分配给 UI 中的文本。首先，我们指定应链接的文本，然后是相应的网站 URL。

运行代码将产生以下输出

我们看到屏幕上显示了指纹图标。同样点击“GitHub 上的 NiceGUI”，将我们重定向到 NiceGUI 的 GitHub 页面。

选择元素

NiceGUI 有不同的选择元素，如切换框、单选框和复选框。下面的代码包含从 NiceGUI 导入的所有这些元素。

1. from nicegui import ui
3. ui.label('Toggle Box')
4. toggle = ui.toggle([1, 2, 3], value=1)
6. ui.label('Radio Selection')
7. radio = ui.radio(["one","two","three"], value=1).props('inline')
9. ui.label('Dropdown Select')
10. select = ui.select(["red","blue","green"], value=1)
12. ui.label('Check Box')
13. checkbox = ui.checkbox('check me')
15. ui.run()

上面代码中的函数包括：

• **toggle()**：此函数可以生成一个切换框，我们在其中通过包含值到标签的映射的字典值列表传递选项。当用户选择一个选项时，它被保存在toggle变量中。

• **radio()**：这类似于 toggle() 函数，但在这里我们可以选择单选选项。

• **select()**：此函数生成一个下拉列表以选择特定选项。与上述函数相比，此函数的输入和存储的输出值相同。

• **checkbox()**：当用户选中复选框时，checkbox 变量被分配一个布尔值 True。

在这里，我们看到了我们创建的所有选择元素。单击 Dropdown Selection，出现下拉操作，允许我们选择其中一个选项。这些只是我们研究过的部分元素。NiceGUI 提供了广泛的元素以在各种场景中使用。

用户输入和值绑定

在本节中，我们将了解允许用户在 UI 中输入文本或数字数据的功能。

1. from nicegui import ui
3. ui.input(label='Text',
4.          on_change=lambda e: text_input.set_text('Your Input: ' + e.value))
5. text_input = ui.label()
7. ui.number(label='Number', value=3.1415, format='%.2f',
8.           on_change=lambda e: number_input.set_text('Your Input: ' + str(e.value)))
9. number_input = ui.label()
11. ui.run()

上面代码中的函数包括：

• **input()**：使用此函数时，将创建一个空文本框，用户可以在其中键入数据。它有一个名为“ label ”的变量，它告诉用户它期望的输入类型。每当用户在输入框中输入内容时，ui.label() 的 .set_text() 函数就会激活并在屏幕上显示键入的文本。

• **number()**：此函数的工作方式与 input() 函数类似，唯一的区别是此函数接受数字而不是文本

代码运行时，将产生以下输出

探索 NiceGUI 中的 UI 元素

在上图中，当用户输入输入字段时，用户的输入会显示在屏幕上。NiceGUI 支持不同 UI 元素之间的绑定值，允许无缝集成。让我们探讨一个例子。

1. from nicegui import ui
3. ui.label("Value Bindings")
5. with ui.row():
6.     radio1 = ui.radio([1, 2, 3], value=1).props('inline')
7.     toggle = ui.toggle({1: 'A', 2: 'B', 3: 'C'}).props('inline').bind_value(radio1, 'value')
9. ui.run()

在上面的代码中，我们使用 ui.row() 元素将两个元素（radio 和 toggle）水平分组。要将它们垂直分组，我们可以使用 ui.column()。toggle() 函数包含变量 bind_values()，它将单选选项连接到切换选项。例如，在收音机中选择 1 会将开关切换到 A，而选择 2 会将其切换到 B。

在上面的图片中，我们可以清楚地看到两个 UI 元素之间的值绑定。同样，bind_value() 函数能够在 NiceGUI 提供的不同 UI 元素中工作。

数据元素和图表

在本节中，我们将看到 NiceGUI 提供的数据元素。我们将探讨如何使用 NiceGUI 在 UI 上显示表格和图表。首先，我们将从通过 NiceGUI 显示表格数据开始。显示它的代码将是：

1. from nicegui import ui
3. columns = [
4.     {'name': 'Name', 'label': 'Name', 'field': 'Name', 'required': True, 'align': 'center'},
5.     {'name': 'Employee-ID', 'label': 'Employee-ID', 'field': 'Employee-ID'},
6.     {'name': 'experience', 'label': 'experience', 'field': 'experience'}
7.     ]
8. rows = [
9.     {'Name': 'Akash', 'Employee-ID':1230, 'experience': 5},
10.     {'Name': 'Karen', 'Employee-ID': 1245, 'experience': 10},
11.     {'Name': 'Thanish', 'Employee-ID': 1980, 'experience': 9},
12.     {'Name': 'Samuel', 'Employee-ID': 1120, 'experience': 8},
13.     ]
15. ui.table(title='Employee Data',columns=columns, rows=rows, row_key='Name')
17. ui.run()

要显示表格，请在列列表中指定列名。每列由列表中的字典表示。包括每列的名称、标签和字段值（通常所有列都相同）。可以根据需要提供额外的键值对。

例如，“required:True”键值对确保名称列需要添加到表中的任何新元素的值。“align”:”center” 将整个行对齐到该列名称下的居中对齐方式。

接下来是行列表。行列表是包含上述列值的字典列表。这里使用字段名称，我们在字典中提供field:value对。然后使用 ui.table() 函数，我们将表格显示到 UI。在这里我们可以给表格命名。row_key 的列名包含唯一值。运行此代码将给出以下输出

带有 NiceGUI 的 Pandas DataFrame

我们甚至可以使用 NiceGUI 显示 Pandas Dataframe。使用 table() 函数本身可以显示 Pandas 数据。

1. import pandas as pd
2. from nicegui import ui
4. data = pd.DataFrame(data={'Name': ["Karan", "Shoaib"], 'Role': ["Developer", "Designer"]})
5. ui.table(
6.     columns=[{'name': column, 'label': column, 'field': column} for column in data.columns],
7.     rows=data.to_dict('records'),
8. )
10. ui.run()

现在我们将看看如何使用 NiceGUI 在屏幕上显示图形。使用 NiceGUI 函数，我们可以在屏幕上显示通过 matplotlib 绘制的图。为此，我们使用 NiceGUI 中的 pyplot() 函数，它在 UI 上显示 matplotlib 图形。代码将是：

1. import matplotlib
2. import numpy
3. from nicegui import ui
5. with ui.pyplot(figsize=(3, 2)):
6.     x = numpy.linspace(0.0, 10000.0, 10)
7.     y = numpy.log(x)
8.     matplotlib.pyplot.title('Log Graph')
9.     matplotlib.pyplot.plot(x, y, '-')
11. ui.run()

在这里，我们使用 with 命令，然后使用 ui.pyplot() 函数。我们甚至将图的大小传递给函数。现在，在with下面，我们编写通过matplotlib绘制图形的代码。这里我们编写了一个简单的图，其中x轴包含从0到10000的值，步长为10，y轴包含它们的对数值。代码运行时的输出将是:

你可以在上面的屏幕上看到该图。使用 NiceGUI，我们不仅可以显示 matplotlib 图形，我们还可以显示通过 Plotly 制作的图形。

用例和应用程序

NiceGUI 类似于其他 Web 框架，可以在不同的开发场景中提供帮助，例如：

• 机器学习 UI：凭借其众多元素，NiceGUI 成为为机器学习应用程序创建前端部件的最佳库之一。在处理需要大量用户输入的 ML 应用程序时，NiceGUI 提供的不同选择元素将真正派上用场

• 快速原型制作：无需编写 HTML、CSS 或 Javascript 文件，并且能够完全在 NiceGUI 中编写从显示文本到选择框再到图形的所有内容，从而减少了开发快速原型的大量工作。NiceGUI 提供的大量元素有助于创建成熟的工作原型。

• 仪表板应用程序： NiceGUI 允许开发人员通过其图表元素轻松显示不同的图表。需要注意的一件好事是 NiceGUI 甚至可以显示 3D 场景。它甚至带有进度条来展示数据的加载。它具有不同的数据元素，可以在屏幕上显示不同类型的 Python 数据类型。

结论

开发人员使用 NiceGUI（一种 Python Web 框架）来创建网站应用程序。NiceGUI 提供了必要的工具来开发一个完整的网站，所有的前端部分都完全在 Python 中。我们甚至看到了 NiceGUI 的不同元素以及如何接受用户输入。最后，我们通过绑定值了解了我们可以在不同的 UI 元素之间进行绑定的方法。

本文的一些要点包括：

• NiceGUI 带有不同的即用型 UI 元素。

• 它为用户提供创建多页面网站的功能。

• NiceGUI 内置了数据绑定。

• 基于 FastAPI 将内容提供给网络。

☆ END ☆

如果看到这里，说明你喜欢这篇文章，请转发、点赞。微信搜索「uncle_pn」，欢迎添加小编微信「 woshicver」，每日朋友圈更新一篇高质量博文。

↓扫描二维码添加小编↓