12月02, 2019

Python 做 UI 超 easy!(2.1)——设计第一个视窗

项目目标

  1. 实现一个 one-shot 窗口,
  2. 使用 Input 组件读取用户姓名,
  3. 使用 Popup 组件提示欢迎信息。

回顾

上一节展示了 PySimpleGUI 的强大易用。今天我们再回头看一下上一节的这个程序,是怎么做到的。

image.png

万事开头难嘛,第一个任务简单点没问题。

开始

使用 Online IDE

很多人在学习 Python 的时候,迎面第一个问题就是开发环境的问题。这里我推荐大家使用这款在线编辑环境,确保所有人都可以得到一致的结果,便于学习。

规划蓝图

首先,我们展开想象,绘制一副蓝图,看我们的产品应该是什么样的。 title

这已经是一个典型的现代视窗应用。

title

这个视窗中包含:

  • Text * 1, 一个文本标签,只显示文本。
  • Input * 1,一个输入框,用户可以输入信息。
  • Button * 1,一个按钮
  • Window * 1,最外围的窗口,上面三个组件都承载在 Window 里。

Tips Python 中的约定:

- 所有的 “类” 名,首字母大写,比如图中的 Text、Button、Input、Window 都是 PySimpleGUI 中的类。
- 类中的 “保护成员变量”,是以下划线开头的小写单词,
- 类中的 “私有成员变量”,是以两个下划线开头的小写单词,
- 类中的 “meta data”(Python 定义的变量),是以双下划线开头、双下划线结尾的小写单词

title

如上图所示,PySimpleGUI 将视窗划分为行,在每个行里,从左往右填充组件。整个视窗可以如下表示:

title

可以看到整个视窗由两行构成。PySimpleGUI 用二维 list 表示视窗,上面的示意图,转换为 list,保存在变量 layout 中。注意 Text、Input 等等类是 PySimpleGUI 中的类,需要 PySimpleGUI.Text、PySimpleGUI.Input 这样使用,我们还指定了 PySimpleGUI 的别名是 sg,就可以用 sg.Text、sg.Input 使用这些类:

import PySimpleGUI as sg
layout = [ [sg.Text("Name"), sg.Input()], [sg.Button("OK")] ]

几个类的初始化

  • sg.Text 接受一个参数,指出它应当显示的文字。
  • sg.Input 不传入参数,保持默认即可。
  • sg.Button 接受一个参数,指出按钮上的文字。

创建窗口

上面我们只是定义的蓝图,蓝图中包含了视窗里的所有组件,但是没有 Window,这是因为 Window 是一个特殊的组件,其他组件要在 Windows 中显示。

sg.Window 第一个参数指定窗口左上角的标题,第二个参数是一个二维 list,按行指定所有的组件。我们将创建的视窗保存在 window 变量中。

import PySimpleGUI as sg
layout = [ [sg.Text("Name"), sg.Input()], [sg.Button("OK")] ]

window = sg.Window("Hello App", layout)

显示窗口

变量 window 中保存了视窗对象,就是蓝图中最外面,包含关闭按钮、标题的窗口。如果你运行上面的代码,右上侧窗口看不到任何视窗出现,这是因为我们只是创建了 Window 类的一个实例 window。

Tips: 注意 Python 是大小写敏感的,这里 Window 和 window 表示的是不同的事物: Window 是在 PySimpleGUI 中定义的视窗类, window 是 Window 类的实例,表示具体的某个窗口。

如果要显示 window,需要调用 window 的 read 方法,不需要传入任何参数,函数调用不要忘记输入小括号!

import PySimpleGUI as sg
layout = [ [sg.Text("Name"), sg.Input()], [sg.Button("OK")] ]

window = sg.Window("Hello App", layout)

window.read()

再次点击 run,你会看到我们需要的窗口。

title

前面提过,

PySimpleGUI 将视窗划分为行,在每个行里,从左往右填充组件。

可以看到所有的组件都是靠左的,这个问题我们暂时搁置,起码已经大体看到蓝图变为现实了!

总结

清楚每个变量的类型,哪些是类,哪些是它的实例,哪些是字符串,对编写正确的代码非常重要。

我们已经实现了窗口,但是现在点击窗口会退出,没有任何有意义的功能,我们会在明天继续完善它,直到实现项目目标


我是你忘不了的智慧

  • 导入第三方库的方法。 Python 中用下面的方法导入第三方库:

    import PySimpleGUI as sg
    

    除了 Python 内置基本类型外,Python 拥有大量的第三方库可用。这些库是由一些技能高超,充满热情、无私的开发者贡献的。通常都是开源的,并且允许使用到商业软件中。如果你有特别喜欢的第三方库,可以去它的官网,也许会看到类似 “Buy me a cup of coffee” 的捐赠连接,支持作者。

    绝大多数第三方库,都可以用 pip(python 2)或者 pip3(python 3)安装。如果你的计算机安装了 python,你可以打开命令行这样安装:

    pip3 install PySimpleGUI
    

    import 指令中 “as sg”,可以对库的名称指定别名。好比我们会简称一个人 “小高”。上面我们为 PySimpleGUI 指定了别名 sg,所有用到 PySimpleGUI 的地方,可以直接用 sg,省点事儿。

  • 通过 库名.xx 可以访问库里的对象或者函数。
  • 调用函数:
    func()        # 无参数函数
    func(arg1)        # 一个位置参数的函数
    func(arg1, arg2)    # 多个位置参数的函数
    func(arg1, arg2, key1 = arg3, key2 = arg4) # 位置参数、键参数混合的情况
    
  • 字符串的拼接

    # 以下方法效果相同
    result = str1 + str2
    result = "{}{}".format(str1, str2)
    result = "".join([str1, str2])
    result = "%s%s" % (str1, str2)
    

    然而,字符串拼接时,并不是真的在 str1 后追加 str2。Python 中 String 是不可变对象。那字符串是怎么修改的呢?很简单——Python 重新创建字符串,内容是新的字符串值。 当 str1 = "hello" 时: title

    随后 str1 = "hello1",原来的 "hello" 会直接被抛弃,Python 会创建新的 String 对象,值是 “hello1”,与原来的 “hello” 毫无关系!随后的某个时候,“hello” 所占有的内存会被垃圾回收机制(GC)释放。 title 同样的,执行完 str1 和 str2 的拼接后,result 保存的是全新创建的 String 对象 “helloworld”,str1 和 str2 的值则不会受影响。 title

本文链接:http://www.thinkinpython.com/post/PySimpleGUI2_1.html

-- EOF --