PyQt布局

lrfgjj2

Qt Designer 布局

（1） PyQt學習基礎是本文要介紹的內容，先來看內容。我們用Qt Designer設計一個對話框。假如我們想設計一個下面的對話框：

一、創(chuàng)建工程

打開Designer，在彈出的新建窗體對話框中，選擇templatesforms中的Dialog with Button Bottom,點擊創(chuàng)建，就會創(chuàng)建一個如下圖所示的對話框。

如圖我們得到了一個帶有按鈕的對話框，我們選定兩個按鈕，然后點擊右鍵，刪除這兩個按鈕，然后我們這個form就變空了，以便接下來我們自己設置。

二、放置widgets和buttons等

在Qt Designer窗口左邊有一個widget box，里面有很多圖標代表了一些widget，我們在Display Widget里面找到Label控件，然后把它拖到我們的窗體form中，放到左上角，選中它，然后我們在Qt Designer窗口右邊的屬性編輯器中找到“Text”屬性，然后把它的值改為“Find &what”，如下圖：

然后我們再從widget box中的input widgets中找到Line Edit ，把它拖到對話框中Label的右邊，對齊。然后在屬性編輯器找到ObjectName屬性，把值改為findLineEdit。為什么上面的LableName我們不改呢？因為我們不會在程序中用到它，這里改了LineEdit的Name是因為在程序中會用到這個值。

然后，在拖一個Label和一個Line Edit分別放到上面的兩個widget下面，其中Label的text屬性改為“Replace with”，而Line Edit的ObjectName改為replaceLineEdit。結果應該如下圖所示：

先把上面的保存為：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”狀態(tài)改為“true”。此時對話框如下所示：

下面，在上面基礎上添加一個Label和一個ComboBox。其中的Label放到第一個check box的下面，它的Text屬性改為&Syntax。然后拖一個ComboBox放到這個Label的右邊，它的Objectname設為“syntax ComboBox”。然后我們要給這個ComboBox添加兩個Items。方法是：選中這個ComboBox，點擊右鍵，在彈出的菜單中選第一項Edit Items,然后在彈出的對話框中點擊圖標“ ”，添加一項Item，并把內容改為“Literal text”，然后再同樣的方法添加一項“Regular expression_r”。如下圖所示：

下面我們就要在dialog的右邊創(chuàng)建button了，在創(chuàng)建之前。我們還需要向窗口添加兩個東西。首先添加一個Vertical Spacer(在widget box中的Spacers group中)，它的作用是當dialog的大小改變時，窗口里的widgets不會布局發(fā)生散化或者變亂。第二個需要添加的是Vertical Line(在widget box中的Display widgets中)，把它放到兩個LineEdit的右邊，用于分割這些widgets和我們即將添加的buttons。如下圖所示：

下面我們開始創(chuàng)建button。從Button group中拖一個Push Button到窗口中，放到右上位置，把它的ObjectName改為“findButton”，它的text改為“&Find”。

再拖個一個push button放到這個find的下面，ObjectName改為“replaceButton”，text改為“&Replace”。

創(chuàng)建第三個button在replace button的下面，ObjectName改為“replaceAllButton”，text改為“Replace &All”。然后拖一個Vertical spacer放到下面。

最后我們創(chuàng)建第四個button，ObjectName改為“closeButton”，text改為“Close”。

現(xiàn)在所有的widgets和button我們都創(chuàng)建完了，如下圖所示：

三、完成窗口的布局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設為水平布局。

如上所示，現(xiàn)在已經有三個layout了，一個格型布局，兩個水平布局。

下面我們把這三個布局放到一個布局里面，我們通過鼠標拖拽來選定三個layout，只要覆蓋到layout就行，注意不要接觸來Vertical Line，但是要接觸到Vertical spacer，選中以后，點擊菜單Form->Lay Out Vertically。

然后用同樣的方法，拖拽選中右邊的四個button和一個Vertical spacer，選中以后，點擊菜單Form->Lay Out Vertically。

最終我們有了兩個垂直的layouts，和中間一個Vertical Line，如下圖所示：

最后，我們不要選中任何東西，點擊菜單Form->Lay Out Horizontally完成最終Form的布局，最終結果如下圖所示：

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

可以通過預覽來看一看。

四、設計工作的一些收尾

我們發(fā)現(xiàn)Label的buddy我們還沒有弄好，所以在label中會顯示我們輸入的”&”符號，下面我們編輯一下。點擊菜單Edit->Edit Buddies 轉到buddy 模式。然后我們?yōu)閘abel選擇伙伴buddy，選定一個label，然后把它拖到想綁定的buddy上，比如選定Find what Label，然后把它拖到Line Edit上。類似的我們可以綁定三對buddy，如下圖所示：

按F3可以離開buddy模式，進入到窗口編輯模式。

同樣，我們可以設置Tab的順尋，通過點擊Edit->Edit Tab Order，進入到編輯tab order的模式，如下圖。然后通過點擊來改變順序，同樣按F3可以退出編輯模式.

關于button方法的綁定，其中Find，Replace，Replace All三個，需要綁定用戶自己寫的方法，而colse按鈕可以綁定到對話框的reject()，下面看看如何綁定：
點擊菜單Edit->Edit Signal/Slots，然后點擊close button拖一下到form上，放開鼠標左鍵，會彈出一個Configure connection的對話框，從左邊列表框中點擊clicked()，從右邊點擊reject（），然后點擊OK，結束，如下圖。

按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這個文件來產生我們想要的對話框了。