Python NiceGUI：轻松打造强大的网页界面

NiceGUI 是一个基于 Python 的 UI 框架，可轻松创建网页界面。它允许开发者为 Web 应用构建图形用户界面（GUI），而无需掌握 HTML、CSS 或 JavaScript。

本文将讲解如何使用 NiceGUI 创建友好的用户界面。如果您是 Python 新手，建议先学习我们的Python 入门课程，再继续攻读Python 编程技能路径以夯实基础。

什么是 NiceGUI？

NiceGUI 是一个 Python 库，帮助您仅用 Python 代码创建基于 Web 的用户界面。如果您是 Python 开发者，想构建 UI 又想避开 HTML、CSS 或 JavaScript，那么 NiceGUI 就是为您准备的。它的底层由三项技术提供支持：

FastAPI 负责后端操作。
Vue.js 负责前端交互。
Tailwind CSS 负责样式。

不过（这其实正是 NiceGUI 的要点），您并不需要理解这些技术也能高效使用 NiceGUI。它足够灵活，可胜任小型 Web 应用乃至更复杂的项目。这也是 NiceGUI 的一大优势——可达性强。即使您刚接触 Python，也能用极少的代码创建可用的界面。下面我们看段代码，我来展示一下我的意思。

NiceGUI 入门

这里我将介绍安装流程，并带您创建第一个简单应用。

安装流程

安装 NiceGUI 有多种方式，可按您的偏好选择。以下是具体做法。请在终端或命令提示符中运行下列命令。我根据常用工具分别给出选项。

通过 pip 安装

pip install nicegui技术支持

通过 PyPI 安装

python3 -m pip install nicegui技术支持

通过 Docker 安装

docker pull zauberzeug/nicegui技术支持

通过 conda-forge 安装

首先，将 conda-forge 添加到您的渠道列表：

conda config --add channels conda-forge
conda config --set channel_priority strict技术支持

启用 conda-forge 渠道后，运行以下命令安装 NiceGUI：

conda install nicegui技术支持

第一个简单应用

安装完成后，就可以创建我们的第一个界面了。我们先看一个基础示例——显示一条简单的问候信息。先创建一个新的 Python 文件（例如 app.py），然后写入以下代码：

# Importing the module 
from nicegui import UI

# pass the text
ui.label('Hello World')

# run it
ui.run()技术支持

现在运行代码。您可以保存后点击运行按钮执行，或在终端中输入以下命令：

python app.py技术支持

使用 NiceGUI 显示标签。图片来源：作者。

NiceGUI 的关键特性

NiceGUI 因其简洁、交互性强以及集成能力而愈发受欢迎。下面概述其对开发者有用的特性。

用户友好的界面

与 Streamlit 或 Dash 等工具不同，您可以使用 NiceGUI 以极少的代码创建图形用户界面。示例如下：

from nicegui import ui
	ui.label('Hello NiceGUI!')
	ui.button('BUTTON', on_click=lambda: ui.notify('button was pressed'))
	ui.run()技术支持

在上述代码中，我定义了一个按钮并处理其点击事件。当我点击按钮时，会弹出消息button was pressed。就这么简单。虽然这不是最复杂的示例，但可以看到我无需配置或编写复杂逻辑，就快速搭建了一个可用的 UI。

带有按钮与通知的 NiceGUI 界面。图片来源：作者。

实时交互

借助 NiceGUI，您可以创建在浏览器中即时响应的实时交互式 UI。后端的更改会通过 WebSocket 连接立刻反映到前端。服务器与客户端之间持续通信，使您无需刷新页面即可看到更新。

from nicegui import ui
slider = ui.slider(min=0, max=100, value=50)
ui.label().bind_text_from(slider, 'value')
ui.run()技术支持

当您移动滑块时，标签会即时更新且无需重新加载页面。这体现了 NiceGUI 相较于 Streamlit 和 Dash 等框架的优势——在这些框架中，实现更新可能需要更多工作。

创建滑块。图片来源：作者。

可视化元素与布局

NiceGUI 提供丰富的组件与布局选项，包括按钮、滑块、图表和 3D 元素。您可以将这些元素排布为行、列与卡片，无需编写 HTML 或 CSS。示例如下：

from nicegui import ui
with ui.column():
    ui.button('Button 1')
    ui.button('Button 2')
with ui.row():
    with ui.card().style('width: 300px; height: 150px'):
        ui.label('Temperature')
        ui.slider(min=0, max=100, value=20)
    
    with ui.card().style('width: 500px; height: 400px'):  # Adjusting the size of the card
        ui.label('Line Chart')
        ui.echart({
            'title': {'text': 'Sample Line Chart', 'left': 'center', 'textStyle': {'fontSize': 18}},
            'xAxis': {
                'type': 'category',
                'data': ['Category A', 'Category B', 'Category C'],
                'axisLabel': {'rotate': 0}  # Ensures the labels are not rotated
            },
            'yAxis': {'type': 'value'},
            'series': [{
                'name': 'Values',
                'data': [1, 2, 3],
                'type': 'line',
                'smooth': True,  # Makes the line smoother
                'label': {'show': True}  # Shows data points on the chart
            }]
        })
ui.run()技术支持

我使用这段代码创建了一个交互式布局。代码先从 NiceGUI 导入所需模块，然后创建一个包含两个按钮的列，以及一个包含两张卡片的行。第一张卡片是温度控制区，有标签和用于调节温度的滑块。第二张卡片包含折线图。最后通过 ui.run() 运行并显示结果。

创建可视化元素与布局。图片来源：作者。

与外部库集成

如果您从事数据科学或可视化，有个好消息——NiceGUI 能很好地与 NumPy、Matplotlib、Plotly 等主流 Python 库配合使用。比如您在做需要复杂数据处理或可视化的数据科学项目，此时依旧可以像平时那样在 Python 中使用这些库，NiceGUI 会在基于 Web 的界面中为您展示结果。

下面示例展示了如何将 NiceGUI 与 Matplotlib、NumPy 组合，用于在网页界面中创建基础数据可视化。首先运行以下命令安装所需库：

pip install nicegui numpy matplotlib技术支持

接着创建一个简单的 Python 脚本，生成图像并用 NiceGUI 展示：

import numpy as np
import matplotlib.pyplot as plt
from nicegui import ui

# Generate some data using NumPy
x = np.linspace(0, 10, 100)
y = np.sin(x)

# Create a Matplotlib plot
plt.plot(x, y)
plt.title('Sine Wave')
plt.xlabel('X-axis')
plt.ylabel('Y-axis')

# Save the plot to display it in the web interface
plt.savefig('sine_wave_plot.png')

# Define the NiceGUI interface
@ui.page('/')
def main_page():
    # Display the plot using NiceGUI
    ui.image('sine_wave_plot.png')

# Run the NiceGUI application
ui.run()技术支持

使用 NiceGUI、Matplotlib 与 NumPy 创建的交互式图表。图片来源：作者。

高级特性与应用场景

您已经了解了 NiceGUI 的基础用法，下面来看看它的一些高级特性，帮助您构建更复杂、更具交互性的 Web 应用。

数据仪表板

除了基础布局，您还可以用 NiceGUI 构建展示实时数据的仪表板。可按以下思路实现：

使用 NiceGUI 在无需刷新页面的情况下更新屏幕上的数据。
通过 Matplotlib 或 Plotly 添加图表与可视化。
用按钮与下拉菜单让用户自定义所见内容。

例如，我使用 NiceGUI 与 Matplotlib 创建了一个展示实时股价的金融仪表板。

from nicegui import ui
import plotly.express as px
import pandas as pd

# Sample data
df = pd.DataFrame({
    'time': ['10:00', '10:05', '10:10'],
    'stock_price': [100, 102, 105]
})

# Create a Plotly line chart
fig = px.line(df, x='time', y='stock_price', title='Stock Price Over Time')

# Use NiceGUI to display the chart
with ui.card():
    ui.plotly(fig)
ui.run()技术支持

使用 NiceGUI 与 Plotly 构建的实时股票仪表板。图片来源：作者。

您还可以将应用连接到流式数据的 API。借助 Matplotlib 或 Plotly 自动刷新图表，随着新数据到来即时更新，为用户提供实时的市场视图。

机器学习界面

NiceGUI 也非常适合机器学习项目。您可以这样用它：

创建便于调整模型行为的易用界面。
实时展示模型输出结果。
让用户在训练前后探索数据。

例如，我为线性回归创建了一个界面：

from nicegui import ui
import numpy as np
import plotly.graph_objects as go

X = np.array([1, 2, 3, 4, 5])
y = np.array([1, 6, 8, 7, 9])

# Slope and intercept
slope = 2.2
intercept = 0.6

# Create the initial figure with two traces
fig = go.Figure()
fig.add_trace(go.Scatter(x=X, y=y, mode='markers', name='Data'))  # Actual data points
# The prediction line uses the manually set slope and intercept
y_pred = slope * X + intercept
fig.add_trace(go.Scatter(x=X, y=y_pred, mode='lines', name='Prediction'))
fig.update_layout(title='Linear Regression Model',
                  xaxis_title='X',
                  yaxis_title='Y',
                  height=400)

def update_model():
    
    y_pred = slope * X + intercept

    # Update the results with the fixed slope and intercept
    result.set_text(f"Slope: {slope:.2f}, Intercept: {intercept:.2f}")

    # Update the prediction line in the plot
    chart.update_traces(y=y_pred, selector=dict(name="Prediction"))

# Create the UI
with ui.card().classes('w-full'):
    ui.label('Linear Regression Demo').classes('text-h6')
    ui.button('Update Model', on_click=update_model).classes('my-2')
    result = ui.label(f"Slope: {slope:.2f}, Intercept: {intercept:.2f}")
    chart = ui.plotly(fig).classes('w-full')

ui.run()技术支持

将 NiceGUI 集成到机器学习中。图片来源：作者。

NiceGUI 与其他 Python UI 框架对比

启动新项目时，您可能会将 NiceGUI 与 Streamlit、Dash、JustPy 等流行替代方案进行比较。每个框架都有其优缺点，会影响项目开发。下面我们从易用性与性能角度做个比较。

Feature	NiceGUI	Streamlit	Dash
Ease of Use	Simple, few lines of code. Python functions for events.	Easy for data apps and prototypes. Tricky for complex apps.	More control but requires more code.
Performance	Fast with FastAPI, handles many users well.	Slower, reloads entire app for changes.	Fast with Flask, needs more setup for some features.
Best For	Tasks requiring performance and scalability.	Quick prototypes, less suited for complex apps.	Complex apps, with more customization.

Deploying NiceGUI Applications

应用构建完成后，您会希望与他人分享。部署能让用户在互联网上或本地网络访问您的应用。由于 NiceGUI 应用基于 Python，您有多种部署选项。

云端部署选项

您可以选择 Google Cloud Run 或 AWS——两种最受欢迎的云端部署方式。以下是在这些平台上部署应用的基本步骤：

确保您的 NiceGUI 应用在本地可正常运行。
调整主机与端口等设置以适配云环境。
为所选云平台准备必要的配置文件。
打包应用并推送到云平台的镜像仓库。
使用云平台提供的工具部署容器化应用。

具体流程会因平台不同而略有差异，但几乎所有云平台都提供易用的界面与 CLI 工具，即便是云托管新手也能顺利完成。

Docker 支持

Docker 允许您将应用及其依赖打包进单个容器，便于在任意支持 Docker 的系统上部署。NiceGUI 同样提供官方 Docker 镜像，十分适合容器化部署，并能为您抽象掉大量部署复杂度。

该Docker 镜像包含所有必要依赖，确保开发与生产环境的一致性。当然，您也可以基于官方镜像扩展，加入应用所需的其他依赖。一般部署流程包括以下步骤：

为您的应用创建 Dockerfile。
构建容器镜像。
将镜像部署到选定的托管平台。

结论

NiceGUI 是一个易用、支持实时交互、且可与其他主流库配合使用的 Python 框架。无论是小型项目还是大型项目，NiceGUI 都是不错的选择。

想进一步了解 GUI 如何塑造工作的未来，请查看《GUI 与工作的未来》教程。如果您正在开发 AI 应用并寻找另一种构建用户界面的方案，请参阅这篇教程：使用 Gradio 在 Python 中为 AI 应用构建用户界面。

作者

Laiba Siddiqui

LinkedIn Twitter

我是内容策略专家，热衷于将复杂主题化繁为简。我曾帮助 Splunk、Hackernoon 和 Tiiny Host 等公司为其受众打造兼具吸引力与信息量的内容。

NiceGUI 常见问题

我可以在 NiceGUI 中使用 JavaScript 实现高级交互吗？

使用 NiceGUI 时您无需编写 JavaScript，但仍可加入自定义 JavaScript 代码来实现高级交互与动画。

NiceGUI 是否支持主题自定义？

NiceGUI 使用 Tailwind CSS 进行样式设计。您可以修改其配置以创建自定义主题，并将其应用到 NiceGUI 应用中。

我可以将 NiceGUI 与数据库一起使用吗？

可以，您可以通过 Python 的相关库将 NiceGUI 与数据库集成。

NiceGUI 如何处理会话管理？

NiceGUI 的会话管理可借助 FastAPI 的会话与 Cookie 管理功能来实现。您也可以创建并管理用户会话与有状态交互。

主题

Python 数据科学

主题

技术

Python NiceGUI：轻松打造强大的网页界面

使用 AI 探索

什么是 NiceGUI？

NiceGUI 入门

安装流程

通过 pip 安装

通过 PyPI 安装

通过 Docker 安装

通过 conda-forge 安装

第一个简单应用

NiceGUI 的关键特性

用户友好的界面

实时交互

可视化元素与布局

与外部库集成

高级特性与应用场景

数据仪表板

机器学习界面

NiceGUI 与其他 Python UI 框架对比

Deploying NiceGUI Applications

云端部署选项

Docker 支持

结论

NiceGUI 常见问题

主题

在 DataCamp 学习 Python

金融基础知识在 Python 中

Python Web 爬取

Python 开发人员

主题

技术

在 DataCamp 学习 Python

金融基础知识在 Python 中

Python Web 爬取

Python 开发人员

什么是 NiceGUI？

NiceGUI 入门

安装流程

通过 pip 安装

通过 PyPI 安装

通过 Docker 安装

通过 conda-forge 安装

第一个简单应用

NiceGUI 的关键特性

用户友好的界面

实时交互

可视化元素与布局

与外部库集成

高级特性与应用场景

数据仪表板

机器学习界面

NiceGUI 与其他 Python UI 框架对比

Deploying NiceGUI Applications

云端部署选项

Docker 支持

结论

NiceGUI 常见问题

主题

在 DataCamp 学习 Python

金融基础知识 在 Python 中

Python Web 爬取

Python 开发人员

在 DataCamp 学习 Python

金融基础知识 在 Python 中

Python Web 爬取

Python 开发人员

金融基础知识在 Python 中

金融基础知识在 Python 中