火星网校
Python简单实用web界面，pywebio常见的3种交互套路
发布时间：2024-01-18 16:37:52 浏览量：422次
界面的制作一直是 Python 的痛！使用 Python 制作桌面端界面是非常痛苦的过程(又难学又难看)。不过，Python 已经出现了几个基于web前端的库，他们的基本机制大同小异，如果对 界面操作性没有太大要求，那么这些库就比较适合你 。
这个系列基于 pywebio 的一系列实战应用，让我们从实战中学习这个库的使用！
如果对你有帮助，记得转发推荐给你的好友！
你的点赞、收藏是对我的最大鼓励！
本节源码回复"pywebio"即可获取
本文是对多种交互界面的套路，以及 pywebio 中对应解决方式的讲解。是本系列后续实战案例的关键，如果希望尽快上手 pywebio 或 streamlit 这些库，请务必好好理解
上一节：
Python终于可以简单做个漂亮界面！pywebio做一个数据查询器
安装库：
pip install -U pywebio界面交互的方式
最常见的界面是只显示，而用户不能交互。
这其实与普通使用 print 输出信息到控制台一样：
如果把控制台换成浏览器上的页面，那就是 pywebio 中的各种输出方法：
一问一答
其实，python 控制台也有一种交互方式—— input：
- 这里的重点是，input 这句代码会停住，直到用户按下回车。
- 编程上这叫"阻塞"，代码执行就像流水，从上而下执行，"阻塞"使得水流停住，不再往下走
对应在 pywebio 中的就是各种输入方法—— input 模块：
- 这是一个让用户输入2个数字，然后把求和结果显示出来的界面
- 注意，一旦用户确定输入成功，输入框就会消失
重点：
- 这种流程就像不断向用户提问，界面上的内容必须等用户回答后，才会继续显示，我称为"一问一答"
- 一旦整个页面的内容都输出完毕，也就是上面的函数执行完毕。此时函数中的所有数据都不复存在
- 如果要重来一次，只能浏览器刷新页面，此时上面的函数又被重新调用
- 这是 pywebio 推荐使用的流程。
作用域修复
"一问一答" 模式中有一个重要的问题， 输出的内容无法改变 。
这种模式无法实现如下效果：
- 第一次让用户输入之前，就显示一个表格
- 每次输入后，表格都会立即更新
pywebio 为此提供了"作用域"的概念：
- 作用域 概念很简单，你可以用一个名字定义页面上某个区域
- 后面你可以随时修改指定区域的输出内容(增加、删除等都可以)
- 行8：定义一个叫 "msg" 的区域，这个区域里面输出一个表格
- 行14：用户输入第一个数字后，可以更新 msg 区域，使用 参数 clear=True ，去掉原来的内容，然后重新生成一个新表格
此时，把更新操作放入一个函数，代码就能简化：
import pywebio
import pywebio.output as output
import pywebio.input as input
def main():
output.put_markdown('# 数字求和示例')
def show_table(num1='',num2='',ret=''):
with output.use_scope('msg',clear=True):
output.put_table([
['数字1','数字2','结果'],
[num1,num2,ret]
])
show_table()
ip1 = input.input('输入第一个数字',type=input.NUMBER)
show_table(ip1)
ip2 = input.input('输入第二个数字',type=input.NUMBER)
show_table(ip1,ip2,ip1 + ip2)
重点：
- 作用域 的作用是让已经输出的内容，在后续用户交互中得到持续更新
- 通常用在大面积的内容持续更新
"占位符"输出
前面的例子使用作用域其实有点小题大做，毕竟用户每次输入后只需要更新表格中的一个格子。
pywebio 为此提供了"占位符"的概念：
- 行8-10：定义占位符
- 行12：输出表格，把占位符放入表格
- 行18：把输入的内容设置到指定的占位符中，此时表格中的占位符就能刷新
重点：
- 占位符的目的是让已经输出的内容的某些部分，在后续用户交互中得到更新
- 通常被用在输出控件的一个小区域，比如表格的某个格子
本节重点介绍 pywebio 关于"一问一答" 的内容持续更新知识点：
- 输入方法是用户交互的唯一途径
- 输入方法是阻塞
- 一旦用户成功输入，输入控件会消失
某些需求下，点2，点3是一种缺点，当然 pywebio 也有对应的解决方式。
下一节会讲解剩余两种界面交互方式以及 pywebio 中的应对套路
推荐阅读：
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
大家今天走运了,我就把自己总结出来的学习UI设计的一些经验与大家一起分享吧。想做一个好的UI设计师除了应该具有一定的审美能力,还要了解整个产品的...
最新文章
