前一教程(python窗口编程-1：窗口编程的基本概念与框架 )介绍了窗口编程的基本概念：控件、布局、窗口、事件。

这次教程，我们将做一个简单的窗口项目：计算器。我们会学习到：

  1. 窗口的风格和灵活的布局方法：掌握随心设计窗口的方法
  2. 数字数位处理的基本逻辑：掌握计算机对数字处理的基本方法
  3. 基于状态的软件处理逻辑分析法：掌握分析复杂业务逻辑的利器

这次的重点的窗口的风格和布局。




python控件框输出_控件


列控件(Column)

我们在前次课程中学习到，窗口的简单布局是通过一个二维列表来定义的。每一行中的元素放在一个行列表中，然后把每个行列表作为元素，再放到一个布局列表中。这就构成了整个窗口的布局。在很多情况下，这种布局方法都够用了。但看看下面这种情况：


python控件框输出_myeclipse窗口布局控件任意_02


这个计算器的窗口布局，所有其他的控件都没什么问题，包括宽幅的按钮0，我们只需在本行加宽这个按钮即可。真正麻烦的是右下方的等于按钮，占了两行，它应该放在上面的一行，还是下面的一行呢？

这就必须引入一个为了自由布局不可或缺的关键控件：列控件(Column)。列控件是不可见的，它的作用是作为容器容纳其他控件。这里的布局是这样的：


python控件框输出_myeclipse窗口布局控件任意_03


最下面的一行包括两个控件，一个是Column控件，一个按钮控件。其中的Column控件里面又放了两行按钮，其中一行有三个按钮，另一行有两个按钮。

控件的大小

通过Column能够控制行列，下一步的工作就是设置控件的大小。在这个系统中，控件大小的单位是字符宽度，不够精细，但确实也无需那么精细。

比如，每个按钮的大小是(4,2)，意思是宽4个字符宽，高度2个字符高。由于字符高是字符宽的两倍，所以这样设置后，按钮就呈现正方形。

0按钮的宽度是普通按钮的两倍+间距，我们用(10,2)，正合适。

等于按钮的高度是普通按钮的2倍+间距，我们用(4,5)，正合适。

窗口的风格

做一个好看窗口应用，还有一些细节的设置是必不可少。

首先是窗口的风格：窗口的整体配色有很多种，我们可以根据自己的喜好，任意选择。执行下面这行代码：

sg.theme_previewer()

可以看到类似这样的一个效果，展示了所有可用的风格。


python控件框输出_myeclipse窗口布局控件任意_04


再执行这行代码：

print(sg.theme_list())

可以在控制台打印出所有可用的风格编码，对于我们一般编程来说，足够用了。

我们的计算器，使用了深棕色风格1：

sg.theme('DarkBrown1')

按钮的颜色

选择风格后，有时在个别的地方设置不同的效果，比如我们的数字按钮是黄色，但计算按钮是灰色。这就必须单独设计控件的颜色，按钮颜色设置的代码如下：

sg.Button('C', size=btnSize, button_color=('black','silver'))

我们看到颜色的设置是通过一个两个元素的元组(tuple)，前一个是字体颜色，后一个按钮底色。比如上面代码的意思就是“黑色在银色”上，代表字体是黑色，底色是银灰色。

文本框的相关设置

计算器的显示屏，是用一个文本框来表示的，这里有更多的设置。代码如下：

[sg.Text(' '*10+'0.', size=(15, 1), key='show', justification='right', background_color='white', text_color='brown', font=('FX-LED',20))]

我们注意到文本框大小的设置与按钮的逻辑是一样的。

计算器显示屏一般是右对齐，所以这里设置justification='right'。

文本框底色的设置，用的是background_color='white'

文本框文字颜色的设置：text_color='brown'

字体的设置：font=('FX-LED',20)，含义是字体名是FX-LED，字体大小是20号字。

值得一提的是：FX-LED是一个第三方字体，特点是数字的显示模拟数码管的效果，这样看起来更像计算器的显示屏。这种字体有很多，朋友可以自行上网寻找，或直接向一声索取。

完整代码如下：

import PySimpleGUI as sgsg.theme('DarkBrown1')btnSize=(4,2)leftButton= [            [sg.Button('1', size=btnSize),sg.Button('2', size=btnSize),sg.Button('3', size=btnSize)],            [sg.Button('0', size=(10,2)),sg.Button('.', size=btnSize)]            ]layout = [  [sg.Text(' '*10+'0.', size=(15, 1), key='show', justification='right', background_color='white', text_color='brown', font=('FX-LED',20))],            [sg.Button('C', size=btnSize, button_color=('black','silver')),sg.Button('±', size=btnSize, button_color=('black','silver')),sg.Button('/', size=btnSize, button_color=('black','silver')),sg.Button('*', size=btnSize, button_color=('black','silver'))],            [sg.Button('7', size=btnSize),sg.Button('8', size=btnSize),sg.Button('9', size=btnSize),sg.Button('-', size=btnSize, button_color=('black','silver'))],            [sg.Button('4', size=btnSize),sg.Button('5', size=btnSize),sg.Button('6', size=btnSize),sg.Button('+', size=btnSize, button_color=('black','silver'))],            [sg.Column(leftButton, pad=(0,0)), sg.Button('=', size=(4,5), button_color=('black','silver'))]         ]window = sg.Window('计算器', layout)event, values = window.read() window.close()

文档

下面是最后一个关于布局的问题。课程中所讲到的控件和控件的属性都是有限的，我们在编程中想使用更多的控件，或者想对控件做更丰富的设置，怎么办呢？

这就必须查阅文档，见下方的扩展链接。

我们使用的PySimpleGUI库，它的完整文档目前只有英文文档，所以我们必须能够阅读英文。学习编程的朋友，英文水平不会太差。其实是没办法的事，因为大量的新资料都是英文的。

中国的软件行业确实发展很快，在有些领域甚至有所领先，但对比西方的差距仍然很大。或许几十年后学习编程的朋友可以有充分的中文资料，甚至外国人必须学习中文以便能够更好的编程。但目前乃至可见的未来，我们只能接受现实，把英文学好，才能提高自身的水平，缩小中西方差距。


python控件框输出_控件_05