使用PyQt来编写第一个Python GUI程序

本文由 伯乐在线 - Lane 翻译，Daetalus 校稿。未经许可，禁止转载！
英文出处：pythonforengineers.com。欢迎加入翻译小组。

简介

许多人在学习如何建立一个 GUI 应用的时候都感到十分的困难。其中最重要的缘由是，他们不知道应该从何下手。大多数的教程都只有文字，但事实上仅仅依靠文字很难学会 GUI 编程，由于 GUI 应用大多数都是基于视觉上的。

咱们将经过建立一个简单的 GUI 应用来避免上面提到的这些问题，而且向你展现着手开始这件事实际上是多么的简单。一旦你明白了这些基本的知识，之后的进一步学习将会变得十分的容易。

这就是咱们即将完成的东西：

这是一个简单的 GUI 应用，根据输入的价格（price）和税率（tax rate），计算出最终的价格（final price）。

大多数的教程都试图直接经过代码来对 GUI 应用进行布局，可是这样作实在是很费劲。咱们将要作的是利用优秀的 QT Designer 工具来对咱们的应用进行布局。

因此不要再劳神费力的用代码来设计界面了。如今开始全部的东西都将经过图形界面来搞定。

全部的代码都在这里。

前提条件

若是你已经接受了个人建议而且安装了 Anaconda，你应该已经安装好了 PyQt4。若是没有的话，你须要从这里先下载它。

同时你还须要一个 Qt Designer。我建议你下载整个的 QT 套件，由于其中还包含了许多其余有用的工具。

开始着手

提示：当你须要查看更多细节的时候，你能够经过点击下方的任意图片来查看其原图。（译者注：你可能须要查看原始连接来查看原图）

打开 QT Designer。在弹出的窗口中，选择 Main Window，这样它会给你一个空白的画板。

接下来在左侧选择Text Edit：

将Text Edit 拖动到主窗口：

看见右边我粗略的用红圈框起来的部分了吗？那就是定义这个对象的名字的地方。这个名字将是咱们经过 Python 代码调用到这个对象的变量名，因此请尽可能取一个有意义的名称。

我将它取名为price_box，由于咱们会在这里输入价格。而后咱们须要给这个输入框添加一个 label，以便让用户更加清楚这个输入框的做用。

我在上图中圈出了 label。把它拖动到主窗口当中来。

如今它被默认称做TextLabel。双击并将其命名为Price。你还能够将这段文字字体加大而且设置为粗体，就像下边看到的这样：

对于税率（tax）输入框，咱们会使用另外的一个东西。找到spin box：

左侧用圈框起来的部分就是一个spin box。它会限定你能输入的值。其实并非非得要用spin box，这样作只不过是为了更好地展现 QT Creator 所能提供的各类不一样的组件。将spin box 拖到窗口中。而后咱们要作的第一件事情就是将objectName 改成一个有意义的名字，例如我将其设置为tax_rate。请记住这将会是你在 Python 代码中调用它的时候会使用到的变量名。

咱们能够为咱们的spin box 设置一个默认值。我选择将其设置为 20：

若是你仔细观察上图，你会发现咱们也能够设置它的最小值和最大值。不过我并不打算去更改他们。

一样地，我会为它添加一个标签叫作Tax Rate。而后看看咱们接下来会用到的圈起来的Push Button：

好的，如今选择Push Button 而后将其拖动到咱们的窗口中来。

这个按钮如今显示的是PushButton，这并非一个颇有意义的名字。到了这一步，你应该知道该怎么更改它了。不过在此以前，咱们要把这个按钮的名字（不是显示用的文字列）改成calc_tax_button。

而后，咱们能够修改真正的显示文字列了：

而后选择另一个Text Edit 并将其拖动到窗口中。你不须要给它添加标签，由于咱们会把咱们的结果输出到这里。把它的名字改成results_window（下图中没有画出来，但你应该已经知道该如何操做了）。

若是你以为须要的话，你能够添加一个大标题。这是一个简单的label box 而且将字体加大了。

如今保存你的成果：

这个文件在下一部分咱们编写代码的时候将会用到，因此最好把它存在一个咱们方便访问的地方。

咱们建立的只是一个简单的 XML 文件。用任意一个文本编辑器打开它，你能够看到这样的内容：

编写代码

Qt 代码是面向对象的，而且简单易学。全部咱们添加的组件都是一个对象，而且都拥有本身的方法好比toPlainText()（用来读取输入框中的值）。这让它使用起来很是方便。

在你编写代码以前，你必需要使用一些函数来进行配置。我确信官方的文档中确定有提到过这个，可是我如今打死也找不到这些文档了，因此我只能经过官方的例程（以及网上的一些教程）中总结出了这一小段代码来进行配置。我已经把这些函数上传到了 pyqt_skeleton.py。

这些代码很是有用，每当你想要建立一个新的 PyQt 项目的时候，就在这段代码的基础上添加你本身的代码吧。

这段代码以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import sys from PyQt4 import QtCore, QtGui, uic   qtCreatorFile = "" # Enter file here.   Ui_MainWindow, QtBaseClass = uic.loadUiType(qtCreatorFile)   class MyApp(QtGui.QMainWindow, Ui_MainWindow):      def __init__( self ):          QtGui.QMainWindow.__init__( self )          Ui_MainWindow.__init__( self )          self .setupUi( self )   if __name__ = = "__main__" :      app = QtGui.QApplication(sys.argv)      window = MyApp()      window.show()      sys.exit(app.exec_())

其中须要注意的是第三行：

1	qtCreatorFile = "" # Enter file here.

你须要在这里填入你先前建立的文件的地址。这个文件将会被内置的函数载入:

1	Ui_MainWindow, QtBaseClass = uic.loadUiType(qtCreatorFile)

让咱们大体地看一看这段代码：

1 2 3 4 5

if __name__ = = "__main__" :      app = QtGui.QApplication(sys.argv)      window = MyApp()      window.show()      sys.exit(app.exec_())

这段主程序建立了一个新的 Qt Gui 应用。，每一个 QT 应用均可以经过命令行进行配置，因此必须传入sys.argv 参数。不过如今咱们用不到这个。最后，咱们建立了一个MyApp 类，这个类继承于 Qt 库而且调用了父类的初始化函数：

1 2 3 4 5

class MyApp(QtGui.QMainWindow, Ui_MainWindow):      def __init__( self ):          QtGui.QMainWindow.__init__( self )          Ui_MainWindow.__init__( self )          self .setupUi( self )

你不必定非得要了解这些代码的细节。你只须要在它的基础上继续开发就行了。

下载pyqt_skeleton.py 这个文件，并将它重命名为pyqt_first.py。这是由于咱们不想去改动到源文件。而后要作的第一件事就是在代码中导入咱们本身的 XML 文件，这个 XML 文件包含了咱们的这个 GUI 信息。将下面的这一行：

1	qtCreatorFile = "" # Enter file here.

替换为

1	qtCreatorFile =  "tax_calc.ui"

这样就能把咱们的 GUI 文件载入到内存中。如今，咱们的 GUI 中最关键的组件就是咱们的这个按钮了。一旦咱们按下这个按钮，就会发生一些神奇的事情。到底会发生什么？这就须要咱们告诉代码当按下Calculate Tax 按钮的时候该怎么作了。在__init__ 函数中，添加以下的内容：

1	self .calc_tax_button.clicked.connect( self .CalculateTax)

这段代码有什么用？还记得咱们把按钮命名为了calc_tax_button 吗？（这是这个按钮对象的名字，不是按钮上显示的提示字符串。）clicked 是一个内置的函数，当有按钮被点击的时候它会被自动调用（很神奇吧）。全部的 QT 组件都有特定的函数，你能够经过 Google 来查看详细。这段代码的最后部分是connect(self.CalculateTax)。这意味着这个按钮会被连接到一个叫作self.CalculateTax 的函数，这样之后每当用户按下这个按钮的时候，这段代码都会被调用。

咱们尚未实现这个函数。因此让咱们动手开始写吧。

在MyApp 类中，添加另一个函数。咱们须要先看看整个函数，而后再去了解它的细节：

1 2 3 4 5 6

def CalculateTax( self ):          price = int ( self .price_box.toPlainText())          tax = ( self .tax_rate.value())          total_price = price  + ((tax / 100 ) * price)          total_price_string = "The total price with tax is: " + str (total_price)          self .results_window.setText(total_price_string)

好了，让咱们一行一行的分析上面的代码。

咱们如今要作两件事：读取价格和税率，而后计算最终的价格。好了开始吧。请记住，咱们要经过咱们设定的名字来调用这些组件（这就是我让你不要用默认的通用名称好比box1 的缘由，不然的话咱们在写代码的时候会很恼火）。

1	price = int ( self .price_box.toPlainText())

price_box.toPlainText() 是一个内置的能够读取输入框中的值的函数。顺便提一句，虽然你用得多了之后确定能记住这些函数，由于他们的名字取得很规范，可是你不必一开始就去记忆全部这些函数。我每次都是经过 Google 诸如 “Qt Textbox 读取数据”一类的关键字来找到我所须要的函数。

经过函数读取到的是一个 string 类型的值，因此咱们须要把他转换成 integer 类型并存在一个price变量中。

而后读取税率：

1	tax = ( self .tax_rate.value())

一样的，value() 是读取spinbox 中值的函数。感谢 Google。

咱们如今已经获得了以上两个值，这样咱们就能用很是高大上的数学公式来计算咱们的最终价格了：

1 2	total_price = price  + ((tax / 100 ) * price) total_price_string = "The total price with tax is: " + str (total_price)

咱们新建了一个 string 变量来储存咱们的最终价格。由于最终直接显示在应用上的将会是一个 string 类型的值：

1	self .results_window.setText(total_price_string)

在results_window 中，咱们调用了setText() 函数，它能显示咱们计算出的最终价格的字符串。

最后运行咱们写好的程序：

1	python pyqt_first.py

好了，这就是一个简单的 PyQt 教程。

若是你还想要体验更多好玩儿的东西，你能够试着用一用别的组件，不过先提醒一句，你要是放了太多的组件在你的应用中的话，用起来可能会有点费劲…

关于做者： Lane