网站导航
> 技术文档 > Python神器NiceGUI：手把手带你从0到精通，写GUI界面从未如此简单！

Python神器NiceGUI：手把手带你从0到精通，写GUI界面从未如此简单！

网友: 技术文档 2025-09-04 00:26:20

“

前言：Python做GUI总得折腾PyQt、Tkinter这些庞然大物，写个简单界面都像是在搬砖。忽然，我想起了 NiceGUI——一个超轻量、超简单、超好用的Python GUI框架！想着很多小伙伴可能还没用过，那必须得给你们整一期深入教程了！🔥

 编程资料、学习路线图、源代码、软件安装包等！【点击这里免费领取】！  

🎉 NiceGUI 是个啥？

NiceGUI 是一个基于 Python + Web 的 GUI 框架，它的 界面直接在浏览器里运行，但代码写起来像 Tkinter 一样简单。最重要的是，它完全 不需要前端知识，适合咱们这种专注于 Python 的人。

安装起来也超级简单：

pip install nicegui

然后，跑一个最简单的例子👇

from nicegui import ui  ui.label(\'Hello, NiceGUI!\')  # 显示文本ui.run()  # 运行服务器

运行后，你的浏览器里就会打开一个页面，显示 “Hello, NiceGUI!”，这也太丝滑了吧？！😂

📌 核心功能详解：从入门到进阶

NiceGUI 提供了丰富的 组件和功能，花姐带你飞，从 基础到进阶 一步步搞懂它的强大之处！

1️⃣ Text Elements（文本组件）

文本组件是 GUI 里最基础的内容，比如 标题、段落、代码框 等。

👀 示例：不同类型的文本
from nicegui import ui  ui.label(\'普通文本\')ui.markdown(\'# 这是一级标题\\n## 这是二级标题\')ui.html(\'支持 HTML 代码哦！\')ui.run()

图片

🌟 重点：

  • ui.label() 👉 适用于普通文本。

  • ui.markdown() 👉 适用于带格式的文本。

  • ui.html() 👉 可以直接嵌入 HTML 代码。

2️⃣ Controls（控制组件）

UI 交互怎么能少了按钮、输入框、滑块这些小玩意呢？

👀 示例：按钮+输入框
from nicegui import ui  def on_click():    ui.notify(\'你点击了按钮！🎉\')ui.button(\'点我！\', on_click=on_click)ui.input(label=\'请输入点啥\', placeholder=\'开始输入\',         on_change=lambda e: result.set_text(\'你输入的内容为: \' + e.value),         validation={\'输入的内容太长了\': lambda value: len(value) < 20})result = ui.label()ui.run()

图片

🌟 重点：

  • ui.button(\'文本\', on_click=回调函数) 👉 让按钮拥有点击事件。

  • ui.input(\'提示文本\') 👉 创建输入框，并可以绑定事件。

  • ui.notify(\'xxx\') 👉 创建 通知框，可用于提示用户操作反馈！

😂 有趣的地方：
可以用 notify() 来整点整活，比如输入 666 时弹出“老板牛逼！”😂

3️⃣ Audiovisual Elements（音视频组件）

NiceGUI 也支持 播放音频、视频、图片等多媒体内容，可以用来做 数据可视化，甚至可以做个 Web 版的音乐播放器！

👀 示例：展示图片+播放音频
from nicegui import ui  ui.image(\'https://picsum.photos/300\')  # 显示一张随机图片ui.audio(\'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3\', autoplay=True)ui.run()

图片

🌟 重点：

  • ui.image(\'图片路径\') 👉 可以加载本地/网络图片。

  • ui.audio(\'音频路径\', autoplay=True) 👉 播放音频，支持自动播放。

😂 细节注意：
如果想让音频自动播放，部分浏览器可能需要 用户交互（比如点击一下页面）。

4️⃣ Data Elements（数据展示组件）

有时候我们需要展示数据，比如表格、进度条、统计信息等。

👀 示例：表格+进度条
from nicegui import ui  columns = [    {\'name\': \'姓名1\', \'label\': \'姓名\', \'field\': \'name\', \'required\': True, \'align\': \'left\'},    {\'name\': \'年龄1\', \'label\': \'年龄\', \'field\': \'age\', \'sortable\': True},]rows = [    {\'name\': \'哪吒\', \'age\': 18},    {\'name\': \'张飞\', \'age\': 21},    {\'name\': \'三太子\'},]ui.table(columns=columns, rows=rows, row_key=\'name\')ui.linear_progress(0.5)  # 50% 进度条ui.run()

图片

🌟 重点：

  • ui.table(columns=..., rows=...) 👉 轻松创建数据表格。

  • ui.linear_progress(0.5) 👉 进度条，值在 0~1 之间。

💡 开发者容易忽视的小细节：
table 里的 columns 需要 name 和 label，否则不会正常显示！

5️⃣ Binding Properties（数据绑定）

NiceGUI 让 前端界面和 Python 代码的数据同步 变得异常简单，不需要手动监听事件，只要 绑定属性，前端改了，Python 变量自动更新！

👀 示例：输入框 + 实时同步数据
from nicegui import uidata = {\'name\': \'花姐\', \'age\': 17}ui.label().bind_text_from(data, \'name\', backward=lambda n: f\'Name: {n}\')ui.label().bind_text_from(data, \'age\', backward=lambda a: f\'Age: {a}\')ui.button(\'年龄变成 18 岁\', on_click=lambda: data.update(age=18))ui.run()

图片

🌟 重点：

  • bind_text_from 直接绑定数据，逻辑清晰，无需额外的监听器

  • 如果 data 的值是从数据库、API 或传感器获取的，你不需要不停 刷新 UI，数据变化 = UI 变化，完美！

💡 你可能忽略的细节：
用 globals().update(变量=值) 可以让匿名函数修改外部变量，否则 Lambda 不能直接改外部变量！

6️⃣ Page Layout（页面布局）

一个好看的界面离不开 布局，NiceGUI 里有 栅格系统、侧边栏、分区容器 这些布局工具。

👀 示例：左右布局 + 侧边栏
from nicegui import ui  with ui.row():    ui.button(\'左边的按钮\')    ui.button(\'右边的按钮\')with ui.column():    ui.label(\'上面的文字\')    ui.label(\'下面的文字\')with ui.tabs().classes(\'w-full\') as tabs:    one = ui.tab(\'Tab1\')    two = ui.tab(\'Tab2\')with ui.tab_panels(tabs, value=two).classes(\'w-full\'):    with ui.tab_panel(one):        ui.label(\'我是Tab1\')    with ui.tab_panel(two):        ui.label(\'我是Tab2\')ui.run()

图片

🌟 重点：

  • ui.row() 👉 水平布局，组件并排放置。

  • ui.column() 👉 垂直布局，组件上下排列。

  • ui.tabs() 👉 Tab标签页，适合用于分类展示信息 。

7️⃣ Styling & Appearance（界面美化）

默认的 NiceGUI 界面已经很清爽，但如果想要 更个性化的设计，可以调整 颜色、字体、样式！

👀 示例：自定义颜色+暗黑模式
from nicegui import uidark = ui.dark_mode()ui.label(\'主题切换：\')ui.button(\'黑色主题\', on_click=dark.enable ,color=\"green\")ui.button(\'浅色主题\', on_click=dark.disable ,color=\"red\")ui.run()

图片

图片

🌟 重点：

  • color=\'xxx\' 👉 改变组件颜色，如 red、blue 等。

  • ui.dark_mode() 👉 一键切换 暗黑模式！

💡 细节注意：
有些组件不支持 color，但可以用 .style(\'background-color: xxx\') 来手动调整！

8️⃣ Action & Events（用户交互）

NiceGUI 支持各种事件监听，如 点击、悬停、拖拽、键盘输入 等。

👀 示例：单击 + 鼠标悬停 + 键盘事件
from nicegui import ui  def on_key(e):    ui.notify(f\'你按了 {e.key}\')ui.keyboard(on_key)with ui.row():    ui.button(\'A\', on_click=lambda: ui.notify(\'你点击了按钮 A.\'))    ui.button(\'B\').on(\'click\', lambda: ui.notify(\'你点击了按钮 B.\'))with ui.row():    ui.button(\'C\').on(\'mousemove\', lambda: ui.notify(\'鼠标移动到了 C 按钮上面了\'))    ui.button(\'D\').on(\'mousemove\', lambda: ui.notify(\'鼠标移动到了 D 按钮上面了\'), throttle=0.5)ui.run()

图片

🌟 重点：

  • click 👉 监听单击事件。

  • mousemove 👉 监听鼠标悬停。

  • ui.keyboard(函数) 👉 监听键盘输入事件。

😂 有趣的地方：
可以做个“精神测验”：如果用户按 F，就弹出 你真的有点东西！😂

9️⃣ Pages & Routing（多页面管理）

如果想要 多个页面，NiceGUI 也支持 路由功能！

👀 示例：创建多个页面
from nicegui import ui  @ui.page(\'/\')def main():    ui.label(\'这是主页\')    ui.link(\'去设置页\', \'/settings\')@ui.page(\'/settings\')def settings():    ui.label(\'这是设置页\')    ui.link(\'返回主页\', \'/\')ui.run()

图片

图片

🌟 重点：

  • @ui.page(\'/路径\') 👉 定义不同的页面。

  • ui.link(\'文本\', \'路径\') 👉 创建页面跳转链接。

💡 细节注意：
如果页面刷新后数据丢失，可以用 ui.storage 存储数据！

🔟 Configuration & Deployment（配置与部署）

NiceGUI 内置了 FastAPI 服务器，可以很方便地 部署到云端 或 打包成独立应用！

👀 示例：修改端口号 + 部署
from nicegui import ui  ui.label(\'Hello, NiceGUI!\')ui.run(host=\'0.0.0.0\', port=8080)  # 指定端口

🌟 重点：

  • host=\'0.0.0.0\' 👉 让局域网设备访问。

  • port=8080 👉 指定端口，默认是 8080。

💡 部署方式：

  • 本地运行：直接 python app.py。

  • 服务器部署：用 gunicorn 或 uvicorn 运行后端。

  • 打包成可执行文件exe： nicegui-pack --onefile --name \"myapp\" app.py

🎯 结语：NiceGUI 让 Python GUI 开发变得更简单！

写完这篇文章，我不得不感叹 NiceGUI 太香了！

  • ✅ 代码极简，比 PyQt、Tkinter 轻松 100 倍！

  • ✅ 界面美观，不需要前端基础，直接就是 Web 界面！

  • ✅ 功能强大，数据展示、交互控制、音视频播放一应俱全！

如果你也对 GUI 开发感兴趣，那就赶紧试试 NiceGUI 吧！🤩
想学习更多NiceGUI的内容可登录官网：https://nicegui.io/查看

 编程资料、学习路线图、源代码、软件安装包等！【点击这里免费领取】！  

网络标签：

相关问题