在開發Qt視窗程式時，可以使用Qt所附的Qt Designer，進行所視即所得的視窗外觀設計，並透過指令產生對應的*.h，Qt Designer的文件可以參考線上的 Qt Designer 手冊，這邊則簡介Qt Designer的一些簡單的使用方法。



Qt Designer執行檔為Qt安裝目錄下bin目錄的designer，執行之後可選擇要開發的元件類型，或執行選單中的[File/New Form]指令（或按Ctrl+N）：









接下來以設計一個簡單的Widget為例，上圖中選擇Widget，並按下Create按鈕，接下來出現以下畫面：









您可以使用拖曳的方式，將左邊的元件拖至中間的表單設計空間進行排列配置，例如拖曳一個QLabel及QPushButton，並適當的於畫面中直接修改顯示文字，於元件上按右鍵，可以取得各種功能項目進行設定：









接下來可以於右方的Signal/Slot Editor，按下+號可以新增Signal/Slot的連接，例如新增QPushButton的clicked()與表單元件的close()之連結：







您可以執行選單中的[Form/Preview]指令（或按Crtl+R）來預覽配置成果，接下來執行[File/Save Form]指令（或按Ctrl+S），假設將之儲存為HelloForm.ui檔案，這個檔案一堆描述元件屬性的標籤所組成，可以使用uic（UI Compiler）指令來產生*.h檔案：


uic -o HelloForm.h HelloForm.ui




Qt4的uic會在HelloForm.h以inline函式的方式宣告並實作相關的程式，所以不需要如Qt3時再額外產生*.cpp檔案，產生的HelloForm.h檔案內容如下所示：


/********************************************************************************


** Form generated from reading ui file 'HelloForm.ui'


**


** Created: Mon Mar 10 18:04:39 2008


**      by: Qt User Interface Compiler version 4.3.3


**


** WARNING! All changes made in this file will be lost when recompiling ui file!


********************************************************************************/





#ifndef HELLOFORM_H


#define HELLOFORM_H





#include 


#include 


#include 


#include 


#include 


#include 


#include 





class Ui_Form


{


public:


QPushButton *pushButton;


QLabel *label;





void setupUi(QWidget *Form)


{


if (Form->objectName().isEmpty())


Form->setObjectName(QString::fromUtf8("Form"));


Form->resize(311, 212);


pushButton = new QPushButton(Form);


pushButton->setObjectName(QString::fromUtf8("pushButton"));


pushButton->setGeometry(QRect(120, 140, 75, 23));


label = new QLabel(Form);


label->setObjectName(QString::fromUtf8("label"));


label->setGeometry(QRect(50, 60, 231, 31));





retranslateUi(Form);


QObject::connect(pushButton, SIGNAL(clicked()), Form, SLOT(close()));





QMetaObject::connectSlotsByName(Form);


} // setupUi





void retranslateUi(QWidget *Form)


{


Form->setWindowTitle(


QApplication::translate("Form", "Form", 0, QApplication::UnicodeUTF8));


pushButton->setText(


QApplication::translate("Form", "PushButton", 0, QApplication::UnicodeUTF8));


label->setText(


QApplication::translate(


"Form", "略...", 0, QApplication::UnicodeUTF8));


Q_UNUSED(Form);


} // retranslateUi





};





namespace Ui {
    class Form: public Ui_Form {}; // 範例將會把Form名稱改為HelloForm名稱
} // namespace Ui





#endif // HELLOFORM_H



最後粗體字的部份，namespace的Ui名稱或class的Form名稱可以修改，例如把Form名稱改為HelloForm。



您有兩種方式可以使用這設計出來的元件，一個方式是直接使用setUi()方法設定一個QWidget實例給它並顯示之，例如：


#include 


#include 


#include "HelloForm.h"





int main(int argc, char *argv[]) {


QApplication app(argc, argv);





QWidget *window = new QWidget;





Ui::HelloForm *form = new Ui::HelloForm;


     form->setupUi(window);





     window->show();





return app.exec();


}



或者是自訂Widget，同時繼承QWidget與Ui::HelloForm的方式，記得執行setupUi()，例如：


#include 


#include 


#include "HelloForm.h"





class HelloWidget : public QWidget, public Ui::HelloForm {


public:


HelloWidget(QWidget *parent = 0) : QWidget(parent)


{ setupUi(this); }


};





int main(int argc, char *argv[]) {


QApplication app(argc, argv);





HelloWidget *window = new HelloWidget;


window->show();





return app.exec();


}



程式撰寫完畢之後，執行以下指令進行建置：


qmake -project
qmake
make




下圖為執行成果的參考畫面：
arrow
arrow
    全站熱搜

    狼翔月影 發表在 痞客邦 留言(0) 人氣()