????????上一章中我們從頭一步一步地新建項目并運行了窗口，本章就正式踏入Qt界面編程之路。在本章節(jié)，我們先用代碼編寫界面，進行簡單的控件放置，然后用代碼進行布局；之后使用Qt?Designer進行控件放置和界面布局，這使得復雜界面的設計變得簡單起來。
1.主窗口的組成
? ? ? ? 對于界面設計來說，Qt的窗口相當于一張畫布，設計人員可以在這張畫布上任意的繪畫，我們按照“國際慣例”，先實現(xiàn)一個“Hello World”字符顯示作為入門demo。
? ? ? ? 在上一章中，新建的空白項目直接運行的窗口如下：
????????這個窗口看似空空如也，實則暗藏玄機，窗口上有幾個默認的控件，見下圖：
? ? ? ? ?從上圖標示可以看出，窗口的上部分是菜單欄，下部分是狀態(tài)欄，中間那個大區(qū)域是中心控件。菜單欄是放置菜單的地方；狀態(tài)欄可以顯示如一些操作動作或信息；中心控件是我們所謂的“畫布”，用來放置控件、布局的地方。
2使用代碼放置控件
? ? ? ? 我們暫時不去管菜單欄和狀態(tài)欄，這個我們之后再慢慢玩。中心控件區(qū)域是我們放置控件的地方，我們用代碼編寫在中心控件區(qū)域放置一個“Hello World”字符。
? ? ? ? 在編寫代碼之前，我們先看下Qt自動生成的mainwindow.cpp文件中的內容：
#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
}
MainWindow::~MainWindow()
{
delete ui;
}
? ? ? ? 該文件默認有三個部分，分別是頭文件包含、構造函數(shù)、析構函數(shù)，我們在構造函數(shù)中放置一個用于顯示字符串的標簽，該控件是QLabel（使用之前先包含QLabel的頭文件），并將該標簽的文本設置為“Hello World”，代碼如下：
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel> // 包含QLabel的頭文件
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
/* 實例一個QLabel對象指針label，
* 并將中心控件的指針（this->centralWidget()返回中心控件的指針）傳入QLabel的構造函數(shù)，
* 表示QLabel的父類是中心控件，即QLabel會顯示在中心控件區(qū)域 */
QLabel *label = new QLabel(this->centralWidget());
// 設置標簽文本
label->setText("Hello World");
}
MainWindow::~MainWindow()
{
delete ui;
}
? ? ? ? 上述增加的代碼給出了注釋，運行程序，顯示的窗口如下：
? ? ? ? ?當看到窗口中出現(xiàn)了“HelloWorld”字符串，恭喜你，實現(xiàn)了Qt第一個界面程序。
? ? ? ? 這里必須指明一點，就是Qt編程中實例的控件一般情況下都是使用指針變量，這樣控件不會隨著函數(shù)的生命周期結束而結束，如果你在構造函數(shù)中這樣聲明QLabel變量：
QLabel label(this->centralWidget());
label.setText("Hello World");
? ? ? ? 那么你在運行后會發(fā)現(xiàn)窗口還是空空如也，沒有顯示你想要的字符串。因為label這個變量是構造函數(shù)的局部變量，當構造函數(shù)運行完畢后，label變量也隨之釋放。使用指針變量，只要不是人為地去釋放指針，則指針變量會一直存在。
? ? ? ? 雖然實現(xiàn)了“Hello?World”字符串在窗口中顯示，但是你可能會想，如何將這個字符串放置在窗口的其它位置。在研究字符串放置的位置之前，我們得先知道窗口的坐標是如何規(guī)定的，下面我們看下Qt窗口的坐標系統(tǒng)是什么樣的，見下圖：
? ? ? ? ?從圖中可以看出，Qt窗口的左上角坐標是(0,0)，向右走是X軸正方向，向下走是Y軸正方向。那么，這個窗口究竟多大的呢，我們可以使用函數(shù)獲取，再將它們顯示在標簽上，見如下代碼：
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel> // 包含QLabel的頭文件
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 獲取窗口寬度
int width = this->width();
// 獲取窗口高度
int height = this->height();
QLabel *label = new QLabel(this->centralWidget());
// 顯示出窗口寬度和高度
label->setText(QString::number(width) + " " + QString::number(height));
}
MainWindow::~MainWindow()
{
delete ui;
}
? ? ? ? 以上代碼中，先通過this->width()和this->height()兩個函數(shù)獲取窗口的寬度和高度，然后顯示在標簽中。其中QString::number(width)和QString::number(height)是將數(shù)值轉換成字符串，因為setText()函數(shù)只能傳入字符串變量QString。運行程序，顯示的窗口如下：
? ? ? ? 從窗口中顯示的字符串可以看到，該窗口的寬度是800像素點，高度是600像素點。接下來我們將“Hello World”的標簽換個位置放置，代碼修改如下：
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel> // 包含QLabel的頭文件
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
QLabel *label = new QLabel(this->centralWidget());
// 設置文本
label->setText("Hello World");
// 設置標簽的位置和大小
label->setGeometry(0, 300, 80, 30);
}
MainWindow::~MainWindow()
{
delete ui;
}
? ? ? ? 這里使用了QLabel的函數(shù)setGeometry(int ax, int ay, int aw, int ah)，該函數(shù)有四個參數(shù)，依次是控件要設置的x軸坐標、y軸坐標、控件的寬度、控件的高度，這里我們設置“Hello?World”標簽的位置為(0,300)，標簽的寬度為80、高度為30。這里要注意的是，Qt中所有的控件的起始坐標都是控件的左上角，放置的位置也是以控件的(0,0)坐標為參考點，比如說這里把“Hello?World”標簽放置在窗口的(0,300)位置，準確地說，是把標簽的(0,0)坐標點放置在窗口的(0,300)位置 。運行程序，顯示的窗口如下：
? ? ? ? ?“Hello?World”字符串放置在了我們設置的地方，程序運行成功！
3使用代碼進行界面布局
? ? ? ? 我們在界面上放置3個控件，分別是標簽控件QLabel、行輸入控件QLineEdit和按鈕控件QPushButton，代碼如下：
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel> // 包含QLabel的頭文件
#include <QLineEdit> // 包含QLineEdit的頭文件
#include <QPushButton> // 包含QPushButton的頭文件
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 標簽控件
QLabel *label = new QLabel(this->centralWidget());
// 設置標簽文本
label->setText("Hello World");
// 設置位置和大小
label->setGeometry(0, 0, 80, 25);
// 行輸入控件
QLineEdit *lineEdit = new QLineEdit(this->centralWidget());
// 設置位置和大小
lineEdit->setGeometry(100, 0, 80, 25);
// 按鈕控件
QPushButton *pushButton = new QPushButton(this->centralWidget());
// 設置按鈕文本
pushButton->setText("我是按鈕");
// 設置位置和大小
pushButton->setGeometry(200, 0, 80, 25);
}
MainWindow::~MainWindow()
{
delete ui;
}
? ? ? ? 運行程序，顯示的窗口如下：
? ? ? ? ?可以看到，三個控件按我們給定的位置和大小在窗口中水平排列，因為我們給定的是控件的絕對位置和絕對大小，所以控件的位置和大小不會隨著窗口的大小變化而自動變化，有時會出現(xiàn)窗口顯示不全控件的情況，如下圖所示：
? ? ? ? ?為了讓控件的位置和大小隨著窗口大小的改變而自動變化，使控件能夠自適應窗口的變化，我們使用Qt的水平布局控件QHBoxLayout。QHBoxLayout是水平布局控件，放置在QHBoxLayout里的控件會自動水平分布，并且隨著QHBoxLayout的大小變化而自動變化，代碼如下：
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel> // 包含QLabel的頭文件
#include <QLineEdit> // 包含QLineEdit的頭文件
#include <QPushButton> // 包含QPushButton的頭文件
#include <QHBoxLayout> // 包含QHBoxLayout的頭文件
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 標簽控件
QLabel *label = new QLabel;
// 設置標簽文本
label->setText("Hello World");
// 行輸入控件
QLineEdit *lineEdit = new QLineEdit;
// 按鈕控件
QPushButton *pushButton = new QPushButton;
// 設置按鈕文本
pushButton->setText("我是按鈕");
// 水平布局控件
QHBoxLayout *hBoxLayout = new QHBoxLayout(this->centralWidget());
hBoxLayout->addWidget(label);
hBoxLayout->addWidget(lineEdit);
hBoxLayout->addWidget(pushButton);
}
MainWindow::~MainWindow()
{
delete ui;
}
? ? ? ? 運行程序，顯示的窗口如下：
? ? ? ? ?可以看出，三個控件水平分布在窗口中，將窗口的橫坐標填充滿，當我們縮小或放大窗口時，控件的大小和位置會跟隨著窗口的大小變化而變化，起到控件自適應窗口大小的效果。
? ? ? ? 當然，有水平布局控件就有垂直布局控件，我們將上面的QHBoxLayout改為QVBoxLayout看看什么效果，代碼如下：
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel> // 包含QLabel的頭文件
#include <QLineEdit> // 包含QLineEdit的頭文件
#include <QPushButton> // 包含QPushButton的頭文件
#include <QVBoxLayout> // 包含QVBoxLayout的頭文件
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 標簽控件
QLabel *label = new QLabel;
// 設置標簽文本
label->setText("Hello World");
// 行輸入控件
QLineEdit *lineEdit = new QLineEdit;
// 按鈕控件
QPushButton *pushButton = new QPushButton;
// 設置按鈕文本
pushButton->setText("我是按鈕");
// 垂直布局控件
QVBoxLayout *vBoxLayout = new QVBoxLayout(this->centralWidget());
vBoxLayout->addWidget(label);
vBoxLayout->addWidget(lineEdit);
vBoxLayout->addWidget(pushButton);
}
MainWindow::~MainWindow()
{
delete ui;
}
? ? ? ? 運行程序，顯示的窗口如下：
? ? ? ? ?可以看出，三個控件按垂直方向分布，當縮小窗口后，三個控件的大小和位置會隨窗口的改變而改變。比如，窗口縮小后，效果如下圖：
? ? ? ? ?窗口是不是變得緊湊且美觀了一些。
? ? ? ??QHBoxLayout和QVBoxLayout可以相互嵌套使用，除了這兩個布局控件，Qt還有網(wǎng)格布局控件QGridLayout和表單布局控件QFormLayout，大家可以自行了解，在需要的時候使用。文章來源：http://www.zghlxwxcb.cn/news/detail-471225.html
4總結
? ? ? ? 在這一章中，我們使用代碼放置了幾個控件，并使用了QHBoxLayout和QVBoxLayout布局控件對其進行了水平布局和垂直布局。這一章通過編寫代碼放置控件并布局，只是讓我們初步了解Qt的界面編程，對于復雜點的界面設計，我推薦大家使用Qt自帶的界面設計軟件Qt?Designer，使用它可以大大簡化界面設計的工作量，并且設計邏輯清晰易于維護，界面直觀，所見即所得。但如果涉及到控件大小和位置的動態(tài)修改，還是得使用代碼直接編程。文章來源地址http://www.zghlxwxcb.cn/news/detail-471225.html
到了這里，關于Qt使用代碼放置控件并布局的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
