Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1261402
  • 博文数量: 164
  • 博客积分: 2993
  • 博客等级: 少校
  • 技术积分: 1718
  • 用 户 组: 普通用户
  • 注册时间: 2011-06-24 11:42
文章分类

全部博文(164)

文章存档

2014年(1)

2013年(36)

2012年(90)

2011年(37)

分类: 网络与安全

2011-08-12 11:12:09

Qt Designer 布局

(1) PyQt学习基础是本文要介绍的内容,先来看内容。我们用Qt Designer设计一个对话框。假如我们想设计一个下面的对话框:

Qt Designer 布局 (1) PyQt学习基础

一、创建工程

打开Designer,在弹出的新建窗体对话框中,选择templatesforms中的Dialog with Button Bottom,点击创建,就会创建一个如下图所示的对话框。

Qt Designer 布局 (1) PyQt学习基础

如图我们得到了一个带有按钮的对话框,我们选定两个按钮,然后点击右键,删除这两个按钮,然后我们这个form就变空了,以便接下来我们自己设置。

二、放置widgets和buttons等

Qt Designer窗口左边有一个widget box,里面有很多图标代表了一些widget,我们在Display Widget里面找到Label控件,然后把它拖到我们的窗体form中,放到左上角,选中它,然后我们在Qt Designer窗口右边的属性编辑器中找到“Text”属性,然后把它的值改为“Find &what”,如下图:

Qt Designer 布局 (1) PyQt学习基础

然后我们再从widget box中的input widgets中找到Line Edit ,把它拖到对话框中Label的右边,对齐。然后在属性编辑器找到ObjectName属性,把值改为findLineEdit。为什么上面的LableName我们不改呢?因为我们不会在程序中用到它,这里改了LineEdit的Name是因为在程序中会用到这个值。

Qt Designer 布局 (1) PyQt学习基础

然后,在拖一个Label和一个Line Edit分别放到上面的两个widget下面,其中Label的text属性改为“Replace with”,而Line Edit的ObjectName改为replaceLineEdit。结果应该如下图所示:

Qt Designer 布局 (1) PyQt学习基础

先把上面的保存为: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”。此时对话框如下所示:

Qt Designer 布局 (1) PyQt学习基础

下面,在上面基础上添加一个Label和一个ComboBox。其中的Label放到第一个check box的下面,它的Text属性改为&Syntax。然后拖一个ComboBox放到这个Label的右边,它的Objectname设为“syntax ComboBox”。然后我们要给这个ComboBox添加两个Items。方法是:选中这个ComboBox,点击右键,在弹出的菜单中选第一项Edit Items,然后在弹出的对话框中点击图标“ ”,添加一项Item,并把内容改为“Literal text”,然后再同样的方法添加一项“Regular expression_r”。如下图所示:

Qt Designer 布局 (1) PyQt学习基础

下面我们就要在dialog的右边创建button了,在创建之前。我们还需要向窗口添加两个东西。首先添加一个Vertical Spacer(在widget box中的Spacers group中),它的作用是当dialog的大小改变时,窗口里的widgets不会布局发生散化或者变乱。第二个需要添加的是Vertical Line(在widget box中的Display widgets中),把它放到两个LineEdit的右边,用于分割这些widgets和我们即将添加的buttons。如下图所示:

Qt Designer 布局 (1) PyQt学习基础

下面我们开始创建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我们都创建完了,如下图所示:

Qt Designer 布局 (1) PyQt学习基础

三、完成窗口的布局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了,一个格型布局,两个水平布局。

Qt Designer 布局 (2) PyQt学习基础

下面我们把这三个布局放到一个布局里面,我们通过鼠标拖拽来选定三个layout,只要覆盖到layout就行,注意不要接触来Vertical Line,但是要接触到Vertical spacer,选中以后,点击菜单Form->Lay Out Vertically。

然后用同样的方法,拖拽选中右边的四个button和一个Vertical spacer,选中以后,点击菜单Form->Lay Out Vertically。

最终我们有了两个垂直的layouts,和中间一个Vertical Line,如下图所示:

Qt Designer 布局 (2) PyQt学习基础

最后,我们不要选中任何东西,点击菜单Form->Lay Out Horizontally完成最终Form的布局,最终结果如下图所示:

Qt Designer 布局 (2) PyQt学习基础

可以看到,比上面有了些变化,窗口布局的非常合理和漂亮了。

可以通过预览来看一看。

四、设计工作的一些收尾

我们发现Label的buddy我们还没有弄好,所以在label中会显示我们输入的”&”符号,下面我们编辑一下。点击菜单Edit->Edit Buddies 转到buddy 模式。然后我们为label选择伙伴buddy,选定一个label,然后把它拖到想绑定的buddy上,比如选定Find what Label,然后把它拖到Line Edit上。类似的我们可以绑定三对buddy,如下图所示:

Qt Designer 布局 (2) PyQt学习基础

按F3可以离开buddy模式,进入到窗口编辑模式。

同样,我们可以设置Tab的顺寻,通过点击Edit->Edit Tab Order,进入到编辑tab order的模式,如下图。然后通过点击来改变顺序,同样按F3可以退出编辑模式.Qt Designer 布局 (2) PyQt学习基础

关于button方法的绑定,其中Find,Replace,Replace All三个,需要绑定用户自己写的方法,而colse按钮可以绑定到对话框的reject(),下面看看如何绑定:
点击菜单Edit->Edit Signal/Slots,然后点击close button拖一下到form上,放开鼠标左键,会弹出一个Configure connection的对话框,从左边列表框中点击clicked(),从右边点击reject(),然后点击OK,结束,如下图。

Qt Designer 布局 (2) PyQt学习基础

按F3离开模式。

最后可以给这个对话框命名,ObjectName设为:FindAndReplaceDlg,把windowTitle设为“Find and Replace”。其中的ObjectName是我们在程序中要用到这个对话框时,他的类名,或者import的东西。

保存为findandreplacedlg.ui文件。

五,转化ui文件为py文件

打开cmd命令行,在findandreplacedlg.ui文件所在的目录运行下面的命令:

  1. pyuic4 -o ui_findandreplacedlg.py findandreplacedlg.ui 

就会在同样的目录生成一个名为ui_findandreplacedlg.py的文件,然后我们就可在别的工程中import这个文件来产生我们想要的对话框了。

阅读(1914) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~