|
前言 '容易上手，定制性弱。定制性强，难以入手。' 一直是 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 值被修改(显然只有界面上的输入框才能修改)，此函数就会被触发，从而通知标签控件更新颜色 发现了没有，完全没有了事件绑定的代码！！ 我们只需要掌握几点，就可以使用这种界面编程方式： 找出界面上用户交互的控件，并定义一个可读写响应式对象(to_ref)，并绑定到对应的控件中。例子中的输入框 凡是通过用户交互变量(例子中的 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 数据 看看效果： 接下来其实思路都是一模一样。 我们一次性把用户能交互的变量给定义出来： 然后定义衍生的数据： 数据表的列名(字符串列名) 图表的数据。因为我们需要根据选择的x和y轴字段做汇总统计 生成 pyecharts 的对象 为了可以在数据未加载的情况下，把下方的控件给隐藏，定义一个'是否加载了数据' 这里不会把所有代码展开说，都是基本的数据处理代码而已。重点是，这些代码中，都是普通的数据处理代码，而不会出现任何与组件对象相关的代码。 如果你对某些部分的代码不理解，评论区告诉我 这意味着，我们可以无须构建界面，就可以验证逻辑是否正确。我也制作了一些辅助工具，比如下面是一个列出所有响应式数据变量的信息表： 你可以从表中看到每个变量与哪些变量相关联。可以看到他们的动态数据变化。目前这个表格比较简陋，后续再升级。 接下来，重点讲解图表的部分，看看怎么可以轻松使用 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 得到的输入框，在修改内容后，只有按回车键或焦点离开输入框，才会触发值变化 此时就能得到这种效果： 界面代码 数据定义好，界面的代码其实非常简洁： 基本上就是样式和绑定的代码 这个案例要不要做成一个视频，把完整的编码过程展现？ |
|
|
