NiceGUI：一个超赞的Python UI库

赵卓不凡

已于 2024-04-28 21:20:34 修改

阅读量640

点赞数 11

分类专栏： Python 文章标签： python ui

于 2024-04-28 20:59:30 首次发布

本文链接：https://blog.csdn.net/sgzqc/article/details/138289466

版权

Python 专栏收录该内容

137 篇文章 37 订阅

订阅专栏

1. 引言

NiceGUI是一个基于Python的简单用户界面框架，可与浏览器或桌面应用程序流畅运行。无论你是制作小型网络应用程序、还是玩机器人项目，NiceGUI 都能以其简单的界面和众多的功能满足你的需求。这篇文章的目的是通过向大家展示如何构建和部署NiceGUI 应用程序，并列举该库的优缺点。

闲话少说，我们直接开始吧！

2. 安装

首先，让我们通过pip工具来安装该库，如下：

 pip install nicegui[highcharts]

安装过程如下：

在这里插入图片描述

3. 举个栗子

首先，让我们从官方文档中的一个例子开始，代码如下：

# https://nicegui.io/documentation/section_data_elements
from nicegui import ui 
from random import random

chart = ui.highchart({
    'title': False,
    'chart': {'type': 'bar'},
    'xAxis': {'categories': ['A', 'B']},
    'series': [
        {'name': 'Alpha', 'data': [0.1, 0.2]},
        {'name': 'Beta', 'data': [0.3, 0.4]},
    ],
}).classes('w-full h-64')

def update():
    chart.options['series'][0]['data'][0] = random()
    chart.update()

ui.button('Update', on_click=update)
ui.run()

运行后结果如下：
在这里插入图片描述
在上述代码中，niceui模块允许大家创建一个UI元素。在这个例子中，我们首先创建了一个 highchart 元素，然后为其设置了 w-full 和 h-64。其中，w-full 将使它以响应的方式水平占据整个屏幕，而 h-64 则指定了垂直方向上的高度。当我们点击UPDATE按钮时，会触发一个回调函数。该回调函数将更新用于生成图表的数据，然后以流畅的方式重新画图呈现。

4. 扩展显示数据

观察上图，我们还可以通过更改update回调函数用以添加新的显示条形图，代码如下：

def update():
    char_list = ["C","D","T","P","G","F"]
    chart.options["xAxis"]["categories"].append(random.choice(char_list))
    for series in chart.options['series']:
        series["data"].append(random.random())
    chart.update()

运行后，结果如下：
在这里插入图片描述
上述代码，每次点击UPDATE按钮后，会触发新增一行数据，并重新显示画图。请注意此时刷新页面并不会造成数据丢失！其他 Python UI 库无法做到这一点。这里之所以会这样，是因为数据是在所有用户之间共享的。

5. 实现计算器

计算器示例有两个可输入数字的空格、一个可以选择需要执行的操作（加、减、乘或除）的下拉菜单和一个点击执行计算的按钮。点击按钮后，计算结果将显示在屏幕上的标签中。

from nicegui import ui

def calculate():
    num1 = float(ui.input_number1.value)
    num2 = float(ui.input_number2.value)
    operation = ui.select.value
    if operation == 'add':
        result = num1 + num2
    elif operation == 'subtract':
        result = num1 - num2
    elif operation == 'multiply':
        result = num1 * num2
    elif operation == 'divide':
        result = num1 / num2
    else:
        result = 'Invalid operation'
    ui.label(f'Result: {result}')

ui.label('Number 1:')
ui.input_number1 = ui.number_input()
ui.label('Number 2:')
ui.input_number2 = ui.number_input()

ui.label('Operation:')
ui.select = ui.select(options=['add', 'subtract', 'multiply', 'divide'])
ui.button('Calculate', on_click=calculate)
ui.run()