作者 主題: [分享]使用Qt Designer設計視窗  (閱讀 10701 次)

0 會員 與 1 訪客 正在閱讀本文。

caterpillar

  • 可愛的小學生
  • *
  • 文章數: 14
  • 良葛格
    • 檢視個人資料
    • 良葛格學習筆記
[分享]使用Qt Designer設計視窗
« 於: 2003-07-21 11:38 »
Qt是使用C++語法,在Source Level跨平台的視窗程式設計方案,您可以使用Qt來開發Linux或Windows下的視窗程式,而Qt也提供了繪圖、檔案存取、網路等等相關的模組,使得它不再限於開發視窗程式。

弟最近研究Qt有一小段時間,也完成了一些基本的入門教學文件,各位可以來看看,瞭解如何使用Qt的網友,可以藉由Qt Designer來協助設計視窗外觀,所視即所得的環境可以省去不少的版面配置時間。

http://www.caterpillar.onlyfun.net/phpBB2/

相關內容均在Qt Programming下。

以下貼上Qt Designer的入門文件:

========================================================

在開發Qt視窗程式時,我們可以使用Qt Designer的所視即所得環境,協助我們進行視窗外觀的設計,並透過指令產生對應的*.h與*.cpp檔案,這邊介紹Qt Designer的一些簡單的使用方法。

首先開啟Qt Designer,執行選單中的[File/New]指令(或按Ctrl+N)新增要使用的視窗類型,如下圖所示:


接下來的畫面與Visual Basic很像,我們在左邊的Toolbox選擇元件,在中間的表單區域以拖拉的方式配置元件,在右邊的Property Editor設定相關屬性,假設我們的元件如下配置:


接下來我們進行簡單的Signals - Slots連結,執行選單中的[Tools/Connect Signal/Slots]指令(或按F3),然後選擇發出Signal的元件,接著會出現以下視窗,在這邊我們簡單的設定按下按鈕後關閉視窗:


您可以執行選單中的[Preview/Preview Form]指令(或按Crtl+T)來預覽配置成果,接下來我們執行[File/Save]指令(或按Ctrl+S),將之儲存為form1.ui檔,這個檔案一堆描述元件屬性的標籤所組成,我們可以使用下面的指令來產生*.h檔:
代碼: [選擇]
uic -o form1.h form1.ui

然後我們使用下面的指令產生*.cpp檔:
代碼: [選擇]
uic -i form1.h -o form1.cpp form1.ui

您可以直接開啟這兩個檔案來看看它們的內容,並根據實際需求再作些修改,下面是我們產生的*.h檔內容:
代碼: [選擇]
/****************************************************************************
** Form interface generated from reading ui file 'form1.ui'
**
** Created: 銝�  7��21 11:11:59 2003
**      by: The User Interface Compiler ($Id: qt/main.cpp   3.1.2   edited Dec 19 11:45 $)
**
** WARNING! All changes made in this file will be lost!
****************************************************************************/

#ifndef FORM1_H
#define FORM1_H

#include <qvariant.h>
#include <qwidget.h>

class QVBoxLayout;
class QHBoxLayout;
class QGridLayout;
class QPushButton;
class QLabel;

class Form1 : public QWidget
{
    Q_OBJECT

public:
    Form1( QWidget* parent = 0, const char* name = 0, WFlags fl = 0 );
    ~Form1();

    QPushButton* pushButton1;
    QLabel* textLabel1;

protected:

protected slots:
    virtual void languageChange();

};

#endif // FORM1_H


下面是產生的*.cpp內容:
代碼: [選擇]
/****************************************************************************
** Form implementation generated from reading ui file 'form1.ui'
**
** Created: 銝�  7��21 11:12:43 2003
**      by: The User Interface Compiler ($Id: qt/main.cpp   3.1.2   edited Dec 19 11:45 $)
**
** WARNING! All changes made in this file will be lost!
****************************************************************************/

#include "form1.h"

#include <qvariant.h>
#include <qpushbutton.h>
#include <qlabel.h>
#include <qlayout.h>
#include <qtooltip.h>
#include <qwhatsthis.h>

/*
 *  Constructs a Form1 as a child of 'parent', with the
 *  name 'name' and widget flags set to 'f'.
 */
Form1::Form1( QWidget* parent, const char* name, WFlags fl )
    : QWidget( parent, name, fl )
{
    if ( !name )
setName( "Form1" );

    pushButton1 = new QPushButton( this, "pushButton1" );
    pushButton1->setGeometry( QRect( 80, 130, 131, 31 ) );

    textLabel1 = new QLabel( this, "textLabel1" );
    textLabel1->setGeometry( QRect( 50, 50, 191, 51 ) );
    QFont textLabel1_font(  textLabel1->font() );
    textLabel1_font.setPointSize( 18 );
    textLabel1->setFont( textLabel1_font );
    textLabel1->setAlignment( int( QLabel::AlignCenter ) );
    languageChange();
    resize( QSize(293, 215).expandedTo(minimumSizeHint()) );
    clearWState( WState_Polished );

    // signals and slots connections
    connect( pushButton1, SIGNAL( clicked() ), this, SLOT( close() ) );
}

/*
 *  Destroys the object and frees any allocated resources
 */
Form1::~Form1()
{
    // no need to delete child widgets, Qt does it all for us
}

/*
 *  Sets the strings of the subwidgets using the current
 *  language.
 */
void Form1::languageChange()
{
    setCaption( tr( "Form1" ) );
    pushButton1->setText( tr( "Click me" ) );
    textLabel1->setText( tr( "Qt Designer" ) );
}


我們使用下面這個main.cpp程式來測試成果:
代碼: [選擇]
#include "form1.h"
#include <qapplication.h>

int main(int argc, char **argv) {
    QApplication app(argc, argv);

    Form1 *fm = new Form1();
    app.setMainWidget(fm);
    fm->show();

    return app.exec();
}


下圖為執行結果,按下按鈕會關閉視窗: