界面的制作一直是 Python 的痛！使用 Python 制作桌面端界面是非常痛苦的过程(又难学又难看)。不过，Python 已经出现了几个基于web前端的库，他们的基本机制大同小异，如果对 界面操作性没有太大要求，那么这些库就比较适合你 。

这个系列基于 pywebio 的一系列实战应用，让我们从实战中学习这个库的使用！

如果对你有帮助，记得转发推荐给你的好友！

你的点赞、收藏是对我的最大鼓励！

本节源码回复"pywebio"即可获取

本文是对多种交互界面的套路，以及 pywebio 中对应解决方式的讲解。是本系列后续实战案例的关键，如果你是能尽快上手 pywebio 或 streamlit 这些库，那么请务必好好理解

上一节：

Python新晋界面库pywebio，不会这个技巧不可能用好它

本节最终效果：

• 选择文件加载
• 文本框输入查询条件，下方刷新显示筛选结果

安装库：

pip install -U pywebio

布局

虽然需求比较简单，但我们还是希望培养一种好习惯。

首先利用作用域对整个页面做布局：

• 行9-11：这是本系列第一节的内容
• 行13：定义一个作用域 query_input
• 行15：使用 pin.put_input 得到一个不阻塞的输入框
• 行16：执行查询按钮，此时我们还没有输入第二个参数
• 行18：定义一个作用域 table ，里面就是用于显示表格

这里定义作用域是为了方便后续对页面的不同部分内容做修改

关于作用域，pin 等内容都在本系列章节有详细讲解，请回看

其实现在界面就可以正常显示，但是当点击"查询"按钮时，就会报错：

这是因为我们没有告诉按钮，点击时要执行什么操作

查询逻辑

现在可以定义按钮点击时的处理：

• 行10-13：定义函数，接受一个 DataFrame 参数
• 行11：现在可以通过 pin 获取输入框的内容，注意此时的 pin_query 要与行21 的对应
• 行12：此时体现作用域的作用，我们可以在代码任何位置上更新表格
• 行27：hold 方法相当重要，因为当你看到数据表出现时，自定义函数已经执行完毕，hold 方法让 pywebio 保持自定义中定义的所有数据(包括自定义函数)，否则点击按钮不会起作用(因为函数 when click query 已经被销毁)

如果输入框与按钮在同一行，界面会比较合理：

• 行22：output.put_row([控件1,控件2,……]) 可以让多个控件放置同一行上

现在界面：

有时候我们只是简单对一列作为条件筛选，每次都要输入长长的查询字符串，太麻烦了！

下一节，我们继续增强功能，效果如下：

• 自动列出数据表中的文本类型的列名，只需要选择即可
• 选择列后，会出现列中各类文本的选项，同样只需要选择即可(单选或多选)

推荐阅读：

1. Python简单实用web界面，pywebio常见的3种交互套路
2. Python新晋界面库pywebio，不会这个技巧不可能用好它