介绍
随着机器学习和深度学习网站应用程序的快速增长，开发人员一直在寻找新的 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 来测试其功能，而无需将其下载到机器上。让我们看一些示例代码：
from nicegui import ui
ui.label('Welcome to NiceGUI!')
ui.button('Click Here', on_click=lambda: ui.notify('Button Pressed'))
ui.run()要使用 NiceGUI，我们需要导入库nicegui。我们将在这里使用nicegui的三个函数
**label()**：使用此函数在 UI 上显示文本
**button()**：此函数用于为 UI 创建可单击的按钮。
**notify()**：底部的弹出窗口将显示此函数中编写的内容。
让我们运行代码并查看下面的输出
该应用程序可以从端口 8080 访问。我们看到这里有一个按钮 Click Here。单击该按钮后，会显示一个弹出窗口，告知按钮已按下
NiceGUI 的基本元素
在本节中，我们将研究一些我们将使用 NiceGUI 框架创建的基本元素。
图标和链接
让我们从显示图标和将网站链接到 UI 中的文本开始
from nicegui import ui
ui.label('Display Icon')
ui.icon('fingerprint', color='primary').classes('text-5xl')
ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')
ui.run()从上面的代码创建以下函数：
“icon()”函数允许我们在 UI 上显示图标。要显示一个图标，我们需要提供一个图标名称。此功能依赖于 Quasar 的 QIcon。可以使用 CSS、Quasar 或 Tailwind 颜色指定颜色选项。大小选项由 classes() 方法使用 CSS 单位确定。
“link()”函数使我们能够将链接分配给 UI 中的文本。首先，我们指定应链接的文本，然后是相应的网站 URL。
运行代码将产生以下输出
我们看到屏幕上显示了指纹图标。同样点击“GitHub 上的 NiceGUI”，将我们重定向到 NiceGUI 的 GitHub 页面。
选择元素
NiceGUI 有不同的选择元素，如切换框、单选框和复选框。下面的代码包含从 NiceGUI 导入的所有这些元素。
from nicegui import ui
ui.label('Toggle Box')
toggle = ui.toggle([1, 2, 3], value=1)
ui.label('Radio Selection')
radio = ui.radio(["one","two","three"], value=1).props('inline')
ui.label('Dropdown Select')
select = ui.select(["red","blue","green"], value=1)
ui.label('Check Box')
checkbox = ui.checkbox('check me')
ui.run()上面代码中的函数包括：
**toggle()**：此函数可以生成一个切换框，我们在其中通过包含值到标签的映射的字典值列表传递选项。当用户选择一个选项时，它被保存在toggle变量中。
**radio()**：这类似于 toggle() 函数，但在这里我们可以选择单选选项。
**select()**：此函数生成一个下拉列表以选择特定选项。与上述函数相比，此函数的输入和存储的输出值相同。
**checkbox()**：当用户选中复选框时，checkbox 变量被分配一个布尔值 True。
在这里，我们看到了我们创建的所有选择元素。单击 Dropdown Selection，出现下拉操作，允许我们选择其中一个选项。这些只是我们研究过的部分元素。NiceGUI 提供了广泛的元素以在各种场景中使用。
用户输入和值绑定
在本节中，我们将了解允许用户在 UI 中输入文本或数字数据的功能。
from nicegui import ui
ui.input(label='Text',
on_change=lambda e: text_input.set_text('Your Input: ' + e.value))
text_input = ui.label()
ui.number(label='Number', value=3.1415, format='%.2f',
on_change=lambda e: number_input.set_text('Your Input: ' + str(e.value)))
number_input = ui.label()
ui.run()上面代码中的函数包括：
**input()**：使用此函数时，将创建一个空文本框，用户可以在其中键入数据。它有一个名为“ label ”的变量，它告诉用户它期望的输入类型。每当用户在输入框中输入内容时，ui.label() 的 .set_text() 函数就会激活并在屏幕上显示键入的文本。
**number()**：此函数的工作方式与 input() 函数类似，唯一的区别是此函数接受数字而不是文本
代码运行时，将产生以下输出
文章出处登录后可见！
