NiceGUI 入门实战：简约风 Python 网页新体验

原创

已于 2025-06-24 14:23:37 修改 · 1.2k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#python #开发语言

于 2025-06-24 13:47:32 首次发布

前言

NiceGUI 是一款用 Python 写前端界面、快速开发交互式网页应用的轻量级框架。它结合了简洁的代码风格和现代化的 UI 组件，让你无缝打造漂亮网页。本篇就带你大概了解下这个神奇的python前端框架，看看是不是你的菜。

NiceGUI 简介

纯 Python 编写，免写 HTML/CSS/JS
基于 FastAPI，支持异步和高性能
丰富组件库：按钮、输入框、图表、弹窗等
适合快速开发工具、仪表盘、管理后台

安装与启动

pip install nicegui

最简示例：

from nicegui import ui

ui.label('你好，NiceGUI!')

ui.run()

访问 http://localhost:8080

在这里插入图片描述

核心组件使用示例

ui.button 按钮事件绑定
ui.input 文本输入框
ui.slider 滑块
ui.chart 图表展示
弹窗、通知、布局组件等

示例：

from nicegui import ui
import random
import time


def show_message(message, sender):
    ui.notify(f'{
     
     sender.text} 被点击！消息内容：{
     
     message}')


# 按钮组件（已适配新版本）
ui.button('基础按钮', on_click=lambda: show_message('普通按钮', ui.button))
ui.button('🚀 表情按钮', on_click=lambda e: ui.notify(f'触发事件：{
     
     e.name}'))

# 输入框组件（已适配新版本）
name_input = ui.input(label='你的名字', value='匿名用户').props('outlined')
ui.button('显示问候', on_click=lambda: ui.notify(f'你好，{
     
     name_input.value}！'))

# 修正后的滑块组件（2.20.0版本语法）
slider_value = ui.label('当前值：50').classes('text-h5')


def update_slider(value):
    slider_value.set_text(f'当前值：{
     
     int(value)}')


# 新版本要求必须使用关键字参数
ui.slider(
    value=50,
    min=0,
    max=100,
    on_change=update_slider
).props('label-always')

# 图表组件（已适配新版本）
chart_data = [{
   
   'x': i, 'y': random.randint(0, 100)} for i in range(10)]
chart = ui.echart([{
   
   'name': '随机数据', 'values': chart_data}]).props('line')


def update_chart():
    while True:
        chart_data.append({
   
   'x': len(chart_data), 'y': random.randint(0, 100)})
        if len(chart_data) > 20:
            chart_data.pop(0)
        chart.update([{
   
   'name': '随机数据', 'values': chart_data}])
        time.sleep(1)


# 修正后的对话框组件（2.20.0版本）
advanced_dialog = ui.dialog()


with advanced_dialog:
    ui.label('对话框内容可以包含任意组件').classes('text-h5 q-mb-md')
    ui