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

简介: 强烈推荐一个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 元素之间进行绑定的方法。

相关文章
|
23天前
|
存储 人工智能 测试技术
如何使用LangChain的Python库结合DeepSeek进行多轮次对话?
本文介绍如何使用LangChain结合DeepSeek实现多轮对话,测开人员可借此自动生成测试用例,提升自动化测试效率。
224 125
如何使用LangChain的Python库结合DeepSeek进行多轮次对话?
|
15天前
|
监控 数据可视化 数据挖掘
Python Rich库使用指南:打造更美观的命令行应用
Rich库是Python的终端美化利器,支持彩色文本、智能表格、动态进度条和语法高亮,大幅提升命令行应用的可视化效果与用户体验。
69 0
|
2月前
|
运维 Linux 开发者
Linux系统中使用Python的ping3库进行网络连通性测试
以上步骤展示了如何利用 Python 的 `ping3` 库来检测网络连通性,并且提供了基本错误处理方法以确保程序能够优雅地处理各种意外情形。通过简洁明快、易读易懂、实操性强等特点使得该方法非常适合开发者或系统管理员快速集成至自动化工具链之内进行日常运维任务之需求满足。
120 18
|
2月前
|
机器学习/深度学习 API 异构计算
JAX快速上手:从NumPy到GPU加速的Python高性能计算库入门教程
JAX是Google开发的高性能数值计算库,旨在解决NumPy在现代计算需求下的局限性。它不仅兼容NumPy的API,还引入了自动微分、GPU/TPU加速和即时编译(JIT)等关键功能,显著提升了计算效率。JAX适用于机器学习、科学模拟等需要大规模计算和梯度优化的场景,为Python在高性能计算领域开辟了新路径。
181 0
JAX快速上手:从NumPy到GPU加速的Python高性能计算库入门教程
|
2月前
|
数据采集 存储 Web App开发
Python爬虫库性能与选型实战指南:从需求到落地的全链路解析
本文深入解析Python爬虫库的性能与选型策略,涵盖需求分析、技术评估与实战案例,助你构建高效稳定的数据采集系统。
254 0
|
2月前
|
存储 监控 安全
Python剪贴板监控实战:clipboard-monitor库的深度解析与扩展应用
本文介绍了基于Python的剪贴板监控技术,结合clipboard-monitor库实现高效、安全的数据追踪。内容涵盖技术选型、核心功能开发、性能优化及实战应用,适用于安全审计、自动化办公等场景,助力提升数据管理效率与安全性。
104 0
|
5月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
7月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
1215 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
7月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。

推荐镜像

更多