PyQt布局

lrfgjj2 发表于 2011-12-22 08:53

<DIV>
Qt Designer 布局 
（1） PyQt学习基础是本文要介绍的内容，先来看内容。我们用Qt Designer设计一个对话框。假如我们想设计一个下面的对话框：
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1315090.png" target=_blank><IMG class=fit-image border=0 alt="Qt Designer 布局（1） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1315090.png" width=358 height=247></A>
一、创建工程
打开Designer，在弹出的新建窗体对话框中，选择templatesforms中的Dialog with Button Bottom,点击创建，就会创建一个如下图所示的对话框。
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1315091.png" target=_blank><IMG class=fit-image border=0 alt="Qt Designer 布局（1） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1315091.png" width=406 height=331></A>
如图我们得到了一个带有按钮的对话框，我们选定两个按钮，然后点击右键，删除这两个按钮，然后我们这个form就变空了，以便接下来我们自己设置。
二、放置widgets和buttons等
在Qt Designer窗口左边有一个widget box，里面有很多图标代表了一些widget，我们在Display Widget里面找到Label控件，然后把它拖到我们的窗体form中，放到左上角，选中它，然后我们在Qt Designer窗口右边的属性编辑器中找到“Text”属性，然后把它的值改为“Find &what”，如下图：
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1315092.png" target=_blank><IMG class=fit-image border=0 alt="Qt Designer 布局（1） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1315092.png" width=300 height=321></A>
然后我们再从widget box中的input widgets中找到Line Edit ，把它拖到对话框中Label的右边，对齐。然后在属性编辑器找到ObjectName属性，把值改为findLineEdit。为什么上面的LableName我们不改呢？因为我们不会在程序中用到它，这里改了LineEdit的Name是因为在程序中会用到这个值。
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1315093.png" target=_blank><IMG class=fit-image border=0 alt="Qt Designer 布局（1） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1315093.png" width=356 height=332></A>
然后，在拖一个Label和一个Line Edit分别放到上面的两个widget下面，其中Label的text属性改为“Replace with”，而Line Edit的ObjectName改为replaceLineEdit。结果应该如下图所示：
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1315094.png" target=_blank><IMG class=fit-image border=0 alt="Qt Designer 布局（1） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1315094.png" width=396 height=248></A>
先把上面的保存为：findandreplacedlg.ui
下面，我们在上面的基础上增加两个checkboxs，从widget box中的Buttons中找到Check Box，然后拖两个到对话框中，放到label和line edit的下面。把第一个check box的ObjectName改为caseCheckBox，把它的Text属性值改为&Case sensitive;把第二个check box的ObjectName改为wholCheckBox，Text属性改为Wh&ole words，并且把“checked”状态改为“true”。此时对话框如下所示：
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1315095.png" target=_blank><IMG class=fit-image border=0 alt="Qt Designer 布局（1） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1315095.png" width=398 height=248></A>
下面，在上面基础上添加一个Label和一个ComboBox。其中的Label放到第一个check box的下面，它的Text属性改为&Syntax。然后拖一个ComboBox放到这个Label的右边，它的Objectname设为“syntax ComboBox”。然后我们要给这个ComboBox添加两个Items。方法是：选中这个ComboBox，点击右键，在弹出的菜单中选第一项Edit Items,然后在弹出的对话框中点击图标“ ”，添加一项Item，并把内容改为“Literal text”，然后再同样的方法添加一项“Regular expression_r”。如下图所示：
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1315096.png" target=_blank><IMG class=fit-image border=0 alt="Qt Designer 布局（1） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1315096.png" width=477 height=318></A>
下面我们就要在dialog的右边创建button了，在创建之前。我们还需要向窗口添加两个东西。首先添加一个Vertical Spacer(在widget box中的Spacers group中)，它的作用是当dialog的大小改变时，窗口里的widgets不会布局发生散化或者变乱。第二个需要添加的是Vertical Line(在widget box中的Display widgets中)，把它放到两个LineEdit的右边，用于分割这些widgets和我们即将添加的buttons。如下图所示：
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1315097.png" target=_blank><IMG class=fit-image border=0 alt="Qt Designer 布局（1） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1315097.png" width=424 height=268></A>
下面我们开始创建button。从Button group中拖一个Push Button到窗口中，放到右上位置，把它的ObjectName改为“findButton”，它的text改为“&Find”。
再拖个一个push button放到这个find的下面，ObjectName改为“replaceButton”，text改为“&Replace”。
创建第三个button在replace button的下面，ObjectName改为“replaceAllButton”，text改为“Replace &All”。然后拖一个Vertical spacer放到下面。
最后我们创建第四个button，ObjectName改为“closeButton”，text改为“Close”。
现在所有的widgets和button我们都创建完了，如下图所示：
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1315098.png" target=_blank><IMG class=fit-image border=0 alt="Qt Designer 布局（1） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1315098.png" width=390 height=245></A>
三、完成窗口的布局Layout
关于窗口的布局，不同人可能有不同的喜好，下面简单的演示一下。
首先，我们把Find what和replace With的两个Label和两个Line Edit布局到一起，我们按住shift键，鼠标选中这四个widgets。然后点击菜单Form->Lay Out in a Grid项（或者点击toolbar button）,四个widgets会用红线圈起来，当然这些红线在程序运行时是不会显示的。
然后选择两个CheckBox，点击菜单Form->Lay Out Horizontally，水平布局。
同样我们也把下面的一个Label和ComboBox设为水平布局。
如上所示，现在已经有三个layout了，一个格型布局，两个水平布局。
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1324270.png" target=_blank><IMG border=0 alt="Qt Designer 布局（2） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1324270.png" width=389 height=244></A>
下面我们把这三个布局放到一个布局里面，我们通过鼠标拖拽来选定三个layout，只要覆盖到layout就行，注意不要接触来Vertical Line，但是要接触到Vertical spacer，选中以后，点击菜单Form->Lay Out Vertically。
然后用同样的方法，拖拽选中右边的四个button和一个Vertical spacer，选中以后，点击菜单Form->Lay Out Vertically。
最终我们有了两个垂直的layouts，和中间一个Vertical Line，如下图所示：
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1324271.png" target=_blank><IMG border=0 alt="Qt Designer 布局（2） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1324271.png" width=392 height=243></A>
最后，我们不要选中任何东西，点击菜单Form->Lay Out Horizontally完成最终Form的布局，最终结果如下图所示：
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1324272.png" target=_blank><IMG border=0 alt="Qt Designer 布局（2） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1324272.png" width=388 height=249></A>
可以看到，比上面有了些变化，窗口布局的非常合理和漂亮了。
可以通过预览来看一看。
四、设计工作的一些收尾
我们发现Label的buddy我们还没有弄好，所以在label中会显示我们输入的”&”符号，下面我们编辑一下。点击菜单Edit->Edit Buddies 转到buddy 模式。然后我们为label选择伙伴buddy，选定一个label，然后把它拖到想绑定的buddy上，比如选定Find what Label，然后把它拖到Line Edit上。类似的我们可以绑定三对buddy，如下图所示：
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1324273.png" target=_blank><IMG border=0 alt="Qt Designer 布局（2） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1324273.png" width=388 height=239></A>
按F3可以离开buddy模式，进入到窗口编辑模式。
同样，我们可以设置Tab的顺寻，通过点击Edit->Edit Tab Order，进入到编辑tab order的模式，如下图。然后通过点击来改变顺序，同样按F3可以退出编辑模式.<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1324274.png" target=_blank><IMG border=0 alt="Qt Designer 布局（2） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1324274.png" width=389 height=243></A>
关于button方法的绑定，其中Find，Replace，Replace All三个，需要绑定用户自己写的方法，而colse按钮可以绑定到对话框的reject()，下面看看如何绑定： 点击菜单Edit->Edit Signal/Slots，然后点击close button拖一下到form上，放开鼠标左键，会弹出一个Configure connection的对话框，从左边列表框中点击clicked()，从右边点击reject（），然后点击OK，结束，如下图。
<A href="http://blog.chinaunix.net/link.php?url=http://images.51cto.com%2Ffiles%2Fuploadimg%2F20110704%2F1324275.png" target=_blank><IMG border=0 alt="Qt Designer 布局（2） PyQt学习基础" src="http://images.51cto.com/files/uploadimg/20110704/1324275.png" width=431 height=248></A>
按F3离开模式。
最后可以给这个对话框命名，ObjectName设为：FindAndReplaceDlg，把windowTitle设为“Find and Replace”。其中的ObjectName是我们在程序中要用到这个对话框时，他的类名，或者import的东西。
保存为findandreplacedlg.ui文件。
五，转化ui文件为py文件
打开cmd命令行，在findandreplacedlg.ui文件所在的目录运行下面的命令：
<OL class=dp-xml>
<LI class=alt>pyuic4 -o ui_findandreplacedlg.py findandreplacedlg.ui </LI></OL>
就会在同样的目录生成一个名为ui_findandreplacedlg.py的文件，然后我们就可在别的工程中import这个文件来产生我们想要的对话框了。</DIV>

页: [1]

Chinaunix's Archiver

PyQt布局