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