原文:秒杀官方实现,python界面库,去掉90%事件代码的nicegui-腾讯云开发者社区-腾讯云
前言
"容易上手,定制性弱。定制性强,难以入手。" 一直是 python 界面库的基本规律。
之前教程说过,nicegui 其实是一个非常普通的事件驱动界面库,运行机制上没有什么特别。虽然它内置一个简单的数据绑定机制,但当前的实现确实不行。
但是,当 nicegui 与数据响应机制结合,一切有了转机。
这是后续 nicegui 教程中最关键的文章,今天通过一个小例子,了解数据驱动的方式使用 nicegui。这种方式就连官方文档也找不到。
先看看效果:
这次需要安装这些库
pip install nicegui ex4nicegui pandas openpyxl pyecharts -U
复制
创建 python 代码文件 main.py
,写上基本的导入和界面运行代码
数据与界面同步
从一个小例子开始。
界面有一个输入框和标签,希望用户输入内容后,下方的标签同步显示:
用 nicegui 官方做法,使用事件:
- 行12:ui.input 第一个参数只是输入框的标题
- 行10:通过控件对象的属性,获取或赋值
为输入框绑定事件,事件函数中处理逻辑。看起来挺合理。
现在,我们尝试以数据为核心的做法:
- 行7:使用 to_ref 创建一个响应式文本数据
- 行11:注意,这里不使用 nicegui 官方控件,而是使用
ex4nicegui
的 rxui 创建 input 控件。它的参数与 nicegui 的 input 一模一样。 - 通过 value 参数,可以设置输入框的输入内容。但是, 这里传入的是 行7 定义的响应式文本。也就是说,现在输入框的内容,已经与这个响应式文本对象同步关联了。
- 行13:通过使用 rxui 创建标签控件,第一个参数就是标签的内容。一样传入同一个响应式文本
就这么简单,现在输入框的内容与标签内容同步联动了!
"就这样?这响应式真无聊!"
现在改一下需求,输入框内容如果是一个颜色值,那么下方的标签字体颜色也会同步变化,演示如下:
代码非常简单:
- 行13:输入内容与标签的颜色绑定,简单直观吧
再次升级需求。现在不希望直接使用文本内容,而是输入内容最后如果有一段带括号包围的颜色值,则设置标签颜色:
代码是这样子:
- 行10-19:定义一个函数,函数返回的就是最终要绑定标签的颜色文本。逻辑不多说,就是普通的 python 文本处理代码
- 行9:为自定义函数打上
ref_computed
装饰器,这使得函数成为一个响应式数据 - 行11:这里使用了 行7 定义的响应式文本,它本身是绑定到输入框。注意,所有响应式数据都是通过
变量名.value
获取值。 - 因为函数中使用了
input
的响应式值,因此,此函数会自动与input
关联。当input
值被修改(显然只有界面上的输入框才能修改),此函数就会被触发,从而通知标签控件更新颜色
发现了没有,完全没有了事件绑定的代码!!
我们只需要掌握几点,就可以使用这种界面编程方式:
1. 找出界面上用户交互的控件,并定义一个可读写响应式对象(to ref),并绑定到对应的控件中。例子中的输入框
2. 凡是通过用户交互变量(例子中的 input
变量) 衍生出来的响应数据,定义只读响应式(ref computed) ,并绑定到需要的控件上。例子中标签颜色
与使用事件的代码相比,响应式的界面代码会更加简洁直观。不仅如此,此时的界面代码完全是声明式,也就具备了"底代码"的能力。比如拖拽布局功能
不要忘记一键三连。你的点赞、收藏、关注,是我创作的动力。
实战
现在,我们开始开篇的演示案例。
仍然按照之前总结的思路,用户选择文件路径,显然我们需要一个文件路径的响应式数据:
- 行11:定义响应式变量,我希望用
r_
前缀表示可读性响应式对象 - 行17-19:官方没有内置的本地文件选择组件,github 仓库有一个官方实现的,不过比较简陋并且不是响应式。这个是我写的组件
- 行23:本地文件组件,不是一个具体显示的组件,因此需要你调用它的
open
函数才能打开。这里我们使用一个按钮,通过设置点击事件即可 - 行21:使用文件选择组件对象的
bind_ref
可以绑定它的结果值
我更喜欢把数据定义与界面代码划分到两个不同的文件,这里为了方便说明,直接放在一个文件
现在只有按钮,看不出来什么具体效果。我们把数据表加载也完成:
- 行15-20:根据选择的文件路径,转成 dataframe
通过 ref_computed 定义的只读响应式对象,我喜欢使用
cp
前缀
接着绑定表格即可:
- 行43:使用原始 nicegui 的折叠组件
- 行44:rxui.table.from_pandas 可以直接给定一个响应式的 dataframe 数据
看看效果:
接下来其实思路都是一模一样。
我们一次性把用户能交互的变量给定义出来:
然后定义衍生的数据:
1. 数据表的列名(字符串列名)
2. 图表的数据。因为我们需要根据选择的x和y轴字段做汇总统计
3. 生成 pyecharts 的对象
4. 为了可以在数据未加载的情况下,把下方的控件给隐藏,定义一个"是否加载了数据"
这里不会把所有代码展开说,都是基本的数据处理代码而已。重点是,这些代码中,都是普通的数据处理代码,而不会出现任何与组件对象相关的代码。
如果你对某些部分的代码不理解,评论区告诉我
这意味着,我们可以无须构建界面,就可以验证逻辑是否正确。我也制作了一些辅助工具,比如下面是一个列出所有响应式数据变量的信息表:
你可以从表中看到每个变量与哪些变量相关联。可以看到他们的动态数据变化。目前这个表格比较简陋,后续再升级。
接下来,重点讲解图表的部分,看看怎么可以轻松使用 pyecharts。
图表
nicegui 官方的图表组件是 highcharts ,不过我知道许多小伙伴很喜欢使用 pyecharts ,所以我特别制作了 echarts 组件。
虽然我本人不喜欢使用 pyecharts ,不过支持 pyecharts 很容易。现在看看怎么使用。
cp_echart_options
最终会被绑定到界面组件 rxui.echarts.from_pyecharts
。
里面的逻辑很简单,只要这个函数返回 pyecharts 的图表对象即可。展开上图行61 的代码:
- 行65:通过
响应式变量.value
获取,然后设置到 pyecharts 的函数参数中即可。必需要注意使用.value
获取值
我不熟悉 pyecharts ,两种图表的代码,都是直接从官网里面拿过来,看看官网的代码:
我们使用的时候,需要把最后一句的 .render
去掉即可。因为这句代码会直接生成 html 文件,这反而不能正确用在 nicegui 中。
本质上,echarts 组件需要的是一个图表配置字典,比如,在 echarts 官网中,随意找一个图表:
- 把对应的配置复制到 python 中,为每个 key 加上引号(也可以使用一些在线工具转换)
- 行25:字典中,可以随意放入响应式变量
- 行59:使用 lazy_input 得到的输入框,在修改内容后,只有按回车键或焦点离开输入框,才会触发值变化
此时就能得到这种效果:
界面代码
数据定义好,界面的代码其实非常简洁:
- 基本上就是样式和绑定的代码