强烈推荐一个Python库！制作Web Gui也太简单了！

前言

之前小编用Python做GUI界面，首选就是Tkinter、PyQt5 。但是它们实现起来工作量及代码量太大，还要一步步设计调试界面排版等问题，而且界面最终呈现也不是特别美观，还有就是打包后太大等一系列问题。

最近公司同事刚好有个相关界面开发需求，给我推荐了Python的新型Gui库，不仅可以做本地GUI程序，还可以同步生成一个Web Gui 服务，将Gui界面同步到浏览器上展示。它就是 nicegui。

%20

NiceGui介绍

%20

NiceGui%20是一个简单易用的基于Python的Web-UI框架，其目的是使在Python中开发前端应用程序变得容易。

%20

小编也看了下其源代码，Web相关服务/路由等是基于Python%20FastAPI%20框架构建的。而%20UI%20元素基于%20Vue%20和%20Quasar。NiceGui%20带有许多现成的元素。它甚至允许不同元素之间的值绑定。可以轻松显示各种图表。

%20

主要功能：

%20

%20

预加载了随时可用的%20GUI%20元素，如按钮、标签、复选框、滑块、开关等

%20%20

表情符号图标、SVG%20和%20base64%20支持

%20%20

提供简单的数据绑定

%20%20

用于刷新数据的内置定时器

%20%20

能够渲染%203D%20场景，绘制图表

%20%20

可以轻松显示图像和视频

%20%20

它使自定义页面和布局变得容易，并且内置了对%20Tailwind%20CSS%20的支持

%20

NiceGui的安装和使用

%20

1、安装

%20

使用%20pip%20下载%20NiceGui（仅支持3.7及以上版本）

%20 pip%20install%20nicegui %20

2、编写一个简单代码，测试其功能是否正常

%20 from%20nicegui%20import%20ui #%20创建一个标签 ui.label('Welcome%20to%20NiceGui!')%20%20 #%20创建一个按钮，设置回调函数，调用niceui的弹窗消息通知 ui.button('Click%20Here',%20on_click=lambda:%20ui.notify('Button%20Pressed')) #%20niceui%20运行 ui.run() %20

点击运行后，终端会输出web%20url访问地址，自动打开浏览器

%20 NiceGUI%20ready%20to%20go%20on%20http://localhost:8080,%20and%20http://192.168.0.102:8080 %20

%20

NiceGui%20基本元素的使用

%20

1、图标和链接

%20 ui.label('Display%20Icon') ui.icon('settings',%20color='primary').classes('text-5xl') ui.link('NiceGui%20on%20GitHub',%20'https://github.com/zauberzeug/nicegui') ui.run() %20

从上面的代码创建以下函数：

%20

%20

icon()%20：此函数允许我们在%20UI%20上显示图标。要显示一个图标，我们需要提供一个图标名称。此功能依赖于%20Quasar%20的%20QIcon。可以使用%20CSS、Quasar%20或%20Tailwind%20颜色指定颜色选项。大小选项由%20classes()%20方法使用%20CSS%20单位确定。

%20%20

link()%20此函数使我们能够将链接分配给%20UI%20中的文本。首先，我们指定应链接的文本，然后是相应的网站%20URL。

%20

运行代码将产生以下输出：

%20

%20

2、选择元素

%20

NiceGui%20有不同的选择元素，如切换框、单选框和复选框。

%20 ui.label('Toggle%20Box') toggle%20=%20ui.toggle([1,%202,%203],%20value=1) ui.label('Radio%20Select') radio%20=%20ui.radio(["one",%20"two",%20"three"],%20value=1).props('inline') ui.label('Dropdown%20Select') select%20=%20ui.select(["red",%20"blue",%20"green"],%20value=1) ui.label('Check%20Box') checkbox%20=%20ui.checkbox('check%20me') ui.run() %20

上面代码中的函数包括：

%20

%20

toggle()：此函数可以生成一个切换框，我们在其中通过包含值到标签的映射的字典值列表传递选项。当用户选择一个选项时，它被保存在toggle变量中。

%20%20

radio()：这类似于%20toggle()%20函数，但在这里我们可以选择单选选项。

%20%20

select()：此函数生成一个下拉列表以选择特定选项。与上述函数相比，此函数的输入和存储的输出值相同。

%20%20

checkbox()：当用户选中复选框时，checkbox%20变量被分配一个布尔值%20True。

%20

%20

在这里，我们看到了我们创建的所有选择元素。单击%20Dropdown%20Select，出现下拉操作，允许我们选择其中一个选项。这些只是我们研究过的部分元素。NiceGui%20提供了广泛的元素以在各种场景中使用。

%20

而且%20NiceGui%20支持不同%20UI%20元素之间的绑定值，允许无缝集成。

%20 ui.label("Value%20Bindings") with%20ui.row(): %20%20%20%20radio1%20=%20ui.radio([1,%202,%203],%20value=1).props('inline') %20%20%20%20toggle%20=%20ui.toggle({1:%20'A',%202:%20'B',%203:%20'C'}).props('inline').bind_value(radio1,%20'value') ui.run() %20

在上面的代码中，我们使用%20ui.row()%20元素将两个元素（radio%20和%20toggle）水平分组。要将它们垂直分组，我们可以使用%20ui.column()。toggle()%20函数包含变量%20bind_values()，它将单选选项连接到切换选项。

%20

%20

在上面的图片中，我们可以清楚地看到两个%20UI%20元素之间的值绑定。同样，bind_value()%20函数能够在%20NiceGUI%20提供的不同%20UI%20元素中工作。

%20

3、用户输入和值绑定

%20

允许用户在%20UI%20中输入文本或数字数据的功能。

%20 ui.input(label='Text', %20%20%20%20%20%20%20%20%20on_change=lambda%20e:%20text_input.set_text('输入文本:%20'%20+%20e.value)) text_input%20=%20ui.label() ui.number(label='Number',%20value=3.1415,%20format='%.2f', %20%20%20%20%20%20%20%20%20%20on_change=lambda%20e:%20number_input.set_text('输入数字:%20'%20+%20str(e.value))) number_input%20=%20ui.label() ui.run() %20

上面代码中的函数包括：

%20

%20

input()：使用此函数时，将创建一个空文本框，用户可以在其中键入数据。它有一个名为“%20label%20”的变量，它告诉用户它期望的输入类型。每当用户在输入框中输入内容时，ui.label()%20的%20.set_text()%20函数就会激活并在屏幕上显示键入的文本。

%20%20

number()：此函数的工作方式与%20input()%20函数类似，唯一的区别是此函数接受数字而不是文本

%20

代码运行时，将产生以下输出：

%20

%20

4、数据元素和图表

%20

通过%20NiceGui显示表格数据。

%20 columns%20=%20[ %20%20%20%20{'name':%20'Name',%20'label':%20'Name',%20'field':%20'Name',%20'required':%20True,%20'align':%20'center'}, %20%20%20%20{'name':%20'Sex',%20'label':%20'Sex',%20'field':%20'Sex'}, %20%20%20%20{'name':%20'Age',%20'label':%20'Age',%20'field':%20'Age'} ] rows%20=%20[ %20%20%20%20{'Name':%20'张三',%20'Sex':%20"男",%20'Age':%2022}, %20%20%20%20{'Name':%20'吴梅',%20'Sex':%20"女",%20'Age':%2015}, %20%20%20%20{'Name':%20'沈静',%20'Sex':%20"女",%20'Age':%2025}, %20%20%20%20{'Name':%20'王五',%20'Sex':%20"男",%20'Age':%2018}, ] ui.table(title='Person%20Info',%20columns=columns,%20rows=rows,%20row_key='Name') ui.run() %20

要显示表格，请在列列表中指定列名。每列由列表中的字典表示。包括每列的名称、标签和字段值（通常所有列都相同）。可以根据需要提供额外的键值对。

%20

例如，“required:True”键值对确保名称列需要添加到表中的任何新元素的值。“align”:”center”%20将整个行对齐到该列名称下的居中对齐方式。

%20

接下来是行列表。行列表是包含上述列值的字典列表。这里使用字段名称，我们在字典中提供field:value对。然后使用%20ui.table()%20函数，我们将表格显示到%20UI。在这里我们可以给表格命名。row_key%20的列名包含唯一值。

%20

运行此代码将给出以下输出：

%20

%20

带有%20NiceGui的%20Pandas%20DataFrame

%20

使用%20table()%20函数本身可以显示%20Pandas%20数据。

%20 data%20=%20pd.DataFrame(data={'Name':%20["张三",%20"吴梅"],%20'Age':%20[22,%2015]}) ui.table( %20%20%20%20columns=[{'name':%20column,%20'label':%20column,%20'field':%20column}%20for%20column%20in%20data.columns], %20%20%20%20rows=data.to_dict('records'), ) ui.run() %20

%20

使用%20NiceGUI%20在屏幕上显示图形

%20

使用%20NiceGUI%20中的%20pyplot()%20函数，它在%20UI%20上显示%20matplotlib%20图形。

%20 import%20matplotlib import%20numpy from%20nicegui%20import%20ui with%20ui.pyplot(figsize=(3,%202)): %20%20%20%20x%20=%20numpy.linspace(0.0,%2010000.0,%2010) %20%20%20%20y%20=%20numpy.log(x) %20%20%20%20matplotlib.pyplot.title('Log%20Graph') %20%20%20%20matplotlib.pyplot.plot(x,%20y,%20'-') ui.run() %20

在这里，我们使用%20with%20命令，然后使用%20ui.pyplot()%20函数。我们甚至将图的大小传递给函数。

%20

现在，在with下面，我们编写通过matplotlib绘制图形的代码。这里我们编写了一个简单的图，其中x轴包含从0到10000的值，步长为10，y轴包含它们的对数值。

%20

代码运行时的输出将是:

%20

%20

结论

%20

开发人员使用%20NiceGui（一种%20Python%20Web%20框架）来创建网站应用程序。其提供了必要的工具来开发一个完整的网站，所有的前端部分都完全在%20Python%20中。我们甚至看到了%20NiceGUI%20的不同元素以及如何接受用户输入。最后，我们通过绑定值了解了我们可以在不同的%20UI%20元素之间进行绑定的方法。

%20

如果你对Python感兴趣，想要学习python，这里给大家分享一份Python全套学习资料，都是我自己学习时整理的，希望可以帮到你，一起加油！

%20