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

项目目标 1. 实现一个 one shot 窗口， 1. 使用 Input 组件读取用户姓名， 1. 使用 Popup 组件提示欢迎信息。回顾上一节展示了 PySimpleGUI 的强大易用。今天我们再回头看一下上一节的这个程序，是怎么做到的。万事开头难嘛，第一个任务简单点没问题。开始使用 Online IDE 很多人在学习 Python 的时候

项目目标

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

回顾

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

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

开始

使用 Online IDE

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

前往 https://repl.it/，并注册账号，
点击右上角， new repl
编程语言选择 Tkinter，点击 create repl。
进入编辑视图

规划蓝图

首先，我们展开想象，绘制一副蓝图，看我们的产品应该是什么样的。 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 使用这些类：

python

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 变量中。

python

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 方法，不需要传入任何参数，函数调用不要忘记输入小括号！

python

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 中用下面的方法导入第三方库：
python
```
import PySimpleGUI as sg
```
除了 Python 内置基本类型外，Python 拥有大量的第三方库可用。这些库是由一些技能高超，充满热情、无私的开发者贡献的。通常都是开源的，并且允许使用到商业软件中。如果你有特别喜欢的第三方库，可以去它的官网，也许会看到类似 “Buy me a cup of coffee” 的捐赠连接，支持作者。
绝大多数第三方库，都可以用 pip（python 2）或者 pip3（python 3）安装。如果你的计算机安装了 python，你可以打开命令行这样安装：
python
```
pip3 install PySimpleGUI
```
import 指令中 “as sg”，可以对库的名称指定别名。好比我们会简称一个人 “小高”。上面我们为 PySimpleGUI 指定了别名 sg，所有用到 PySimpleGUI 的地方，可以直接用 sg，省点事儿。
通过库名.xx 可以访问库里的对象或者函数。

调用函数：

python

func()		# 无参数函数
func(arg1)		# 一个位置参数的函数
func(arg1, arg2)	# 多个位置参数的函数
func(arg1, arg2, key1 = arg3, key2 = arg4) # 位置参数、键参数混合的情况

字符串的拼接
python
```
# 以下方法效果相同
result = str1 + str2
result = "{}{}".format(str1, str2)
result = "".join([str1, str2])
result = "%s%s" % (str1, str2)
```
然而，字符串拼接时，并不是真的在 str1 后追加 str2。Python 中 String 是不可变对象。那字符串是怎么修改的呢？很简单——Python 重新创建字符串，内容是新的字符串值。当 str1 = “hello” 时：
随后 str1 = “hello1”，原来的 “hello” 会直接被抛弃，Python 会创建新的 String 对象，值是 “hello1”，与原来的 “hello” 毫无关系！随后的某个时候，“hello” 所占有的内存会被垃圾回收机制（GC）释放。同样的，执行完 str1 和 str2 的拼接后，result 保存的是全新创建的 String 对象 “helloworld”，str1 和 str2 的值则不会受影响。

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

项目目标

回顾

开始

使用 Online IDE

规划蓝图

几个类的初始化

创建窗口

显示窗口

总结

我是你忘不了的智慧

几个类的初始化

显示窗口