前言

"容易上手，定制性弱。定制性强，难以入手。" 一直是 python 界面库的基本规律。

之前教程说过，nicegui 其实是一个非常普通的事件驱动界面库，运行机制上没有什么特别。虽然它内置一个简单的数据绑定机制，但当前的实现确实不行。

但是，当 nicegui 与数据响应机制结合，一切有了转机。

这是后续 nicegui 教程中最关键的文章，今天通过一个小例子，了解数据驱动的方式使用 nicegui。这种方式就连官方文档也找不到。

先看看效果：

这次需要安装这些库

创建 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 得到的输入框，在修改内容后，只有按回车键或焦点离开输入框，才会触发值变化

此时就能得到这种效果：

界面代码

数据定义好，界面的代码其实非常简洁：

• 基本上就是样式和绑定的代码

这个案例要不要做成一个视频，把完整的编码过程展现？

需要源码的小伙伴，评论区告诉我