NiceGUI:一个超赞的Python UI库

01

引言

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

闲话少说,我们直接开始吧!

02

安装
首先,让我们通过pip工具来安装该库,如下:
pip install nicegui[highcharts]

安装过程如下:

03

举个栗子
首先,让我们从官方文档中的一个例子开始,代码如下:
# https://nicegui.io/documentation/section_data_elementsfrom 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-fullh-64。其中,w-full将使它以响应的方式水平占据整个屏幕,而h-64则指定了垂直方向上的高度。当我们点击UPDATE按钮时,会触发一个回调函数。该回调函数将更新用于生成图表的数据,然后以流畅的方式重新画图呈现。

04

扩展显示数据

观察上图,我们还可以通过更改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库无法做到这一点。这里之所以会这样,是因为数据是在所有用户之间共享的。

05

实现计算器

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

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()

运行上述代码后,结果如下:

 

接着我们来解释上述代码:

我们先从NiceGUI库中导入ui对象

接着我们创建了一个名为calculate的函数,点击"Calculate "按钮时将触发调用该函数。

该函数从两个输入框和下拉菜单中获取数值,执行选定的数学运算,并将结果显示在标签中。

接下来,我们创建构成用户UI组件:两个用于输入数字的标签和输入框,一个用于选择操作的标签和下拉菜单,以及一个用于触发计算的按钮。

此外,我们还指定在点击按钮时需要调用的计算函数。

最后,我们使用命令 ui.run()来启动应用程序并在屏幕上显示用户界面。

06

总结

NiceGUI是一款强大而易用的Python工具,用于制作网页界面。其简单的设计、交互式功能以及与其他工具协同工作的能力使其适用于多种不同类型的项目。

如果你刚刚开始开发自己的网络应用程序,或是一名经验丰富的开发人员,正在寻找一种更有效的方法来创建UI界面,那么NiceGUI是一个值得考虑的选择。

您学废了嘛?

阅读剩余
THE END