强烈推荐一个Python库！制作Web Gui也太简单了！

点击上方“蓝色字体”关注我，选择“设为星标”！

回复“电子书”领取超多经典计算机书籍

前言

之前小编用Python做GUI界面 ，首选就是Tkinter、PyQt5 。但是它们实现起来工作量及代码量太大，还要一步步设计调试界面排版等问题，而且界面最终呈现也不是特别美观，还有就是打包后太大等一系列问题。

最近公司同事刚好有个相关界面开发需求，给我推荐了Python的新型Gui库，不仅可以做本地GUI程序，还可以同步生成一个Web Gui 服务，将Gui界面同步到浏览器上展示。它就是 nicegui 。

NiceGui介绍

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

小编也看了下其源代码，Web相关服务/路由等是基于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!')    
# 创建一个按钮，设置回调函数，调用niceui的弹窗消息通知  
ui.button('Click Here', on_click=lambda: ui.notify('Button Pressed'))  
# niceui 运行  
ui.run()

点击运行后，终端会输出web url访问地址，自动打开浏览器

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

NiceGui 常用API

1、图标和链接

• • icon() ：此函数允许我们在 UI 上显示图标。要显示一个图标，我们需要提供一个图标名称。此功能依赖于 Quasar 的 QIcon。可以使用 CSS、Quasar 或 Tailwind 颜色指定颜色选项。大小选项由 classes() 方法使用 CSS 单位确定。
• • link() 此函数使我们能够将链接分配给 UI 中的文本。首先，我们指定应链接的文本，然后是相应的网站 URL。
• 

效果展示：

2、选择元素

NiceGui 有不同的选择元素，如切换框、单选框和复选框。

• • toggle()：此函数可以生成一个切换框，我们在其中通过包含值到标签的映射的字典值列表传递选项。当用户选择一个选项时，它被保存在toggle变量中。
• • radio()：这类似于 toggle() 函数，但在这里我们可以选择单选选项。
• • select()：此函数生成一个下拉列表以选择特定选项。与上述函数相比，此函数的输入和存储的输出值相同。
• • checkbox()：当用户选中复选框时，checkbox 变量被分配一个布尔值 True。
• 效果展示：

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

而且 NiceGui 支持不同 UI 元素之间的绑定值，允许无缝集成。

在上面的代码中，我们使用 ui.row() 元素将两个元素（radio 和 toggle）水平分组。要将它们垂直分组，我们可以使用 ui.column()。toggle() 函数包含变量 bind_values()，它将单选选项连接到切换选项。

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

3、用户输入和值绑定

允许用户在 UI 中输入文本或数字数据的功能。

上面代码中的函数包括：

• • input()：使用此函数时，将创建一个空文本框，用户可以在其中键入数据。它有一个名为“ label ”的变量，它告诉用户它期望的输入类型。每当用户在输入框中输入内容时，ui.label() 的 .set_text() 函数就会激活并在屏幕上显示键入的文本。
• • number()：此函数的工作方式与 input() 函数类似，唯一的区别是此函数接受数字而不是文本

效果展示：

4、数据元素和图表

通过 NiceGui显示表格数据。

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

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

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

效果展示：

带有 NiceGui的 Pandas DataFrame

使用 table() 函数本身可以显示 Pandas 数据。

使用 NiceGUI 在屏幕上显示图形

使用 NiceGUI 中的 pyplot() 函数，它在 UI 上显示 matplotlib 图形。

在这里，我们使用 with 命令，然后使用 ui.pyplot() 函数。我们甚至将图的大小传递给函数。

现在，在with下面，我们编写通过matplotlib绘制图形的代码。这里我们编写了一个简单的图，其中x轴包含从0到10000的值，步长为10，y轴包含它们的对数值。

代码运行时的输出将是:

结论

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

写到最后

感谢您的一路陪伴，用代码构建世界，一起探索充满未知且奇妙的魔幻旅程。如果您对Python编程技巧、好玩实用的开源项目、行业新知趣事和各类技术干货等充满兴趣，那么不要错过未来我为大家奉上的精彩内容！点击 关注 ， 让您的探索学习之旅更加丰富多彩，我们一同成长，一同前行！ 🚀💻📚

求一键三连 ： 点赞、转发、在看

↓推荐关注↓

公众号内回复关键字“ 电子书 ”领取PDF格式的电子书籍( Python入门、异步编程、网络爬虫、高性能编程、数据分析与挖掘实战、Spring、Linux、CSS、VUE、自动化测试、程序员面试宝典 等)。

表情包小程序推荐 「嗨玩表情」 搞笑/可爱/萌宠等热门表情包、头像、壁纸应有仅有，资源还在不断更新中，欢迎大家前往体验！

↓小程序推荐 点击即可体验↓

● 四款国内外远程桌面软件横测：ToDesk、向日葵、TeamViewer、AnyDesk

● 新一代开源语音库CoQui TTS冲到了GitHub 20.5k Star

● 最新最全 VSCODE 插件推荐（2023版）

● 一款构建AI数字人项目开源了！自动实现音视频同步！

● 「多线程大杀器」Python并发编程利器：ThreadPoolExecutor，让你一次性轻松开启多个线程，秒杀大量任务！

如果本文对您有帮助，也请帮忙点个 赞👍 + 在看 哈！❤️

在看你就赞赞我！