QT布局管理詳解QVBoxLayout與QHBoxLayout及QGridLayout的使用
更新時(shí)間：2022年06月23日 09:48:02 作者：紅客白帽
在這篇文章中，你將知道水平布局、垂直布局、網(wǎng)格布局如何輕松上手，以純代碼方式展示。對(duì)齊方式，大小設(shè)置，圖片頭像匹配標(biāo)簽，布局器里面的組件大小隨意切換大小，認(rèn)真看完這篇文章，QT布局管理器熟練使用
main.cpp
#include "mainwindow.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
return a.exec();
}mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include<QPushButton>
#include <QMainWindow>
#include <QTextCodec>//解決字符編碼亂碼問(wèn)題
#include<QTextEdit>
#include <QSlider>//滑動(dòng)桿
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
public slots:
private:
Ui::MainWindow *ui;
QTextCodec *codec;
QWidget *window;
QPushButton *button1;
QPushButton *button2;
QPushButton *button3;
QPushButton *button4;
QPushButton *button5;
QWidget *win;//方便全局使用
QWidget *newweigdet;
};
#endif // MAINWINDOW_Hmainwindow.cpp
我就不一一舉例了，具體在代碼中滲透
//=============================布局管理器全精通
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QString>
#include<QStringLiteral>
#include<QDebug>//控制臺(tái)輸出
//==========================布局管理器
#include<QVBoxLayout>//水平
#include<QHBoxLayout>//垂直
#include<QHBoxLayout>//網(wǎng)格
#include<QRadioButton>
#include <QLineEdit>
#include <QCheckBox>
#include<QLabel>
#include<QPixmap>
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
codec = QTextCodec::codecForName("gbk");//設(shè)置字符編碼
codec->setCodecForLocale(codec);
setWindowTitle(codec->toUnicode("UI學(xué)習(xí)筆記"));
win = new QWidget;//創(chuàng)建一個(gè)窗口部件
newweigdet = new QWidget;
newweigdet->hide();
QHBoxLayout *hlay = new QHBoxLayout();//創(chuàng)建水平布局
QPushButton *bt1 = new QPushButton("bt1");
bt1->setFixedSize(100,40);//設(shè)置寬高，位置不變
QPushButton *bt2 = new QPushButton("bt2");
QPushButton *bt3 = new QPushButton("bt3");
QPushButton *bt4 = new QPushButton("bt4");
bt2->setFixedSize(100,40);//設(shè)置寬高，位置不變
bt3->setFixedSize(100,40);//設(shè)置寬高，位置不變
// qDebug()<<bt1->x()<<" "<<bt1->y()<<" "<<bt1->width()<<" "<<bt1->height();
// bt1->setGeometry(0,0,800,640);
hlay->addWidget(bt1);
hlay->addWidget(bt2);
hlay->addWidget(bt3);
hlay->addWidget(bt4);
hlay->setSpacing(30);//設(shè)置組件之間的距離
//hlay->setContentsMargins(10,10,10,10);//設(shè)置內(nèi)部控件與邊框的距離
//新建垂直布局
QVBoxLayout *vlay = new QVBoxLayout();
//創(chuàng)建3個(gè)QRadioButton
QRadioButton *rb1 = new QRadioButton("QRadioButton 1");
QRadioButton *rb2 = new QRadioButton("QRadioButton 2");
QRadioButton *rb3 = new QRadioButton("QRadioButton 3");
//將水平布局放入垂直布局
vlay->addItem(hlay);
vlay->addWidget(rb1);
vlay->addWidget(rb2);
vlay->addWidget(rb3);
vlay->setSpacing(30);//設(shè)置組件之間的距離
vlay->setContentsMargins(30,10,10,10);//設(shè)置內(nèi)部控件與邊框的距離
/*控件大小范圍限定
通過(guò)上面的代碼我們發(fā)現(xiàn)一個(gè)現(xiàn)象：程序中并沒(méi)有去設(shè)置子控件的大小，
其默認(rèn)大小是Qt自動(dòng)設(shè)置的，同時(shí)在窗口大小改變時(shí)，控件大小也會(huì)隨之調(diào)整。
然而有時(shí)候我們并不想要這樣的效果，我們只想讓控件大小保持在某一范圍內(nèi)，
這時(shí)就需要用到下面幾個(gè)API進(jìn)行設(shè)置了。*/
//設(shè)置按鈕bt4最小寬度和最大寬度
bt4->setMinimumWidth(60);
bt4->setMaximumWidth(70);
bt4->setFixedSize(50,50);//設(shè)置這個(gè)部件的寬和高【重要】
QHBoxLayout *hlay2 = new QHBoxLayout();
QPushButton *btOK = new QPushButton("OK");
QPushButton *btCancel= new QPushButton("Cancel");
hlay2->addWidget(btOK);
//增加可伸縮空間
hlay2->addStretch();//拉扯不影響大小【重點(diǎn)】
hlay2->addWidget(btCancel);
vlay->addItem(hlay2);
QHBoxLayout *hlay3 = new QHBoxLayout();
QPushButton *bt61 = new QPushButton("bt61");
QPushButton *bt62= new QPushButton("bt62");
QPushButton *bt63= new QPushButton("bt63");
// bt61->setFixedSize(100,40);//設(shè)置寬高，位置不變
// bt62->setFixedSize(100,40);//設(shè)置寬高，位置不變
// bt63->setFixedSize(100,40);//設(shè)置寬高，位置不變
hlay3->addWidget(bt61);
hlay3->addWidget(bt62);
hlay3->addWidget(bt63);
//Qt中可以設(shè)定控件的拉伸系數(shù)，也可以理解為控件的縮放比例。
hlay3->setStretchFactor(bt61,1);
hlay3->setStretchFactor(bt62,2);
hlay3->setStretchFactor(bt63,3);
vlay->addItem(hlay3);
win->setLayout(vlay);//水平和垂直組件放在這個(gè)QWidget
win->show();//顯示
bt4->setFixedSize(100,50);
bt4->setText(codec->toUnicode("下一頁(yè)內(nèi)容"));
connect(bt4,&QPushButton::clicked,[&](){
on_pushButton_clicked();
});//設(shè)置信號(hào)與槽 上一章已經(jīng)出過(guò)文章了
}
MainWindow::~MainWindow()
{
delete ui;
}
//網(wǎng)格布局
void MainWindow::on_pushButton_clicked()
{
win->hide();//隱藏上一個(gè)窗口
// 構(gòu)建控件 頭像、用戶名、密碼輸入框等
QLabel *pImageLabel = new QLabel;
QLineEdit *pUserLineEdit = new QLineEdit;
QLineEdit *pPasswordLineEdit = new QLineEdit;
QCheckBox *pRememberCheckBox = new QCheckBox;
QCheckBox *pAutoLoginCheckBox = new QCheckBox;
QPushButton *pLoginButton = new QPushButton;
QPushButton *pRegisterButton = new QPushButton;
QPushButton *pForgotButton = new QPushButton;
QPushButton *page_up = new QPushButton;
pLoginButton->setFixedHeight(30);//設(shè)置寬
pUserLineEdit->setFixedWidth(200);//設(shè)置寬
// 設(shè)置頭像
QPixmap pixmap("C:/Users/SuJieYin/Pictures/Saved Pictures/2.png");
pImageLabel->setFixedSize(90, 90);
pImageLabel->setPixmap(pixmap);
pImageLabel->setScaledContents(true);//圖片適應(yīng)標(biāo)簽
// 設(shè)置文本
pUserLineEdit->setPlaceholderText(codec->toUnicode("QQ號(hào)碼/手機(jī)/郵箱"));//顯示中文
pPasswordLineEdit->setPlaceholderText(codec->toUnicode("密碼"));
pPasswordLineEdit->setEchoMode(QLineEdit::Password);//隱藏
pRememberCheckBox->setText(codec->toUnicode("記住密碼"));
pAutoLoginCheckBox->setText(codec->toUnicode("自動(dòng)登錄"));
pLoginButton->setText(codec->toUnicode("登錄"));
pRegisterButton->setText(codec->toUnicode("注冊(cè)賬號(hào)"));
pForgotButton->setText(codec->toUnicode("找回密碼"));
page_up->setText(codec->toUnicode("上一頁(yè)"));
QGridLayout *pLayout = new QGridLayout();
// 頭像 第0行，第0列開始，占3行1列
pLayout->addWidget(pImageLabel, 0, 0, 3, 1);
// 用戶名輸入框 第0行，第1列開始，占1行2列
pLayout->addWidget(pUserLineEdit, 0, 1, 1, 2);
pLayout->addWidget(pRegisterButton, 0, 4);
// 密碼輸入框 第1行，第1列開始，占1行2列
pLayout->addWidget(pPasswordLineEdit, 1, 1, 1, 2);
pLayout->addWidget(pForgotButton, 1, 4);
// 記住密碼 第2行，第1列開始，占1行1列 水平居左 垂直居中
pLayout->addWidget(pRememberCheckBox, 2, 1, 1, 1, Qt::AlignLeft | Qt::AlignVCenter);
// 自動(dòng)登錄 第2行，第2列開始，占1行1列 水平居右 垂直居中
pLayout->addWidget(pAutoLoginCheckBox, 2, 2, 1, 1, Qt::AlignRight | Qt::AlignVCenter);
// 登錄按鈕 第3行，第1列開始，占1行2列
pLayout->addWidget(pLoginButton, 3, 1, 1, 2);
pLayout->addWidget(page_up,3,4);//設(shè)置上一頁(yè)在第三行第四列
connect(page_up,&QPushButton::clicked,[&](){
win->show();
});
// 設(shè)置水平間距
pLayout->setHorizontalSpacing(10);
// 設(shè)置垂直間距
pLayout->setVerticalSpacing(10);
// 設(shè)置外間距
pLayout->setContentsMargins(10, 10, 10, 10);//邊框間距設(shè)置
newweigdet->setLayout(pLayout);//添加進(jìn)窗口部件
newweigdet->show();//顯示窗口部件
}ui界面設(shè)計(jì)
由于是通過(guò)純代碼實(shí)現(xiàn)，所以u(píng)i界面是空的，不信你看：
實(shí)際具體細(xì)看代碼如何實(shí)現(xiàn)，注釋的已經(jīng)很清晰了。
登錄界面為例
以下如圖：第一頁(yè)
實(shí)際運(yùn)行CTRL+R，點(diǎn)擊下一頁(yè)如圖：
總結(jié)
學(xué)習(xí)QT并不是一朝一夕，龐大的函數(shù)庫(kù)，需要巨大的精力投入學(xué)習(xí)，掌握基礎(chǔ)方法后，通過(guò)QT手冊(cè)邊學(xué)邊做，而布局管理器幾乎所有項(xiàng)目都要用到，美觀的外表非常的重要。
到此這篇關(guān)于QT布局管理詳解QVBoxLayout與QHBoxLayout及QGridLayout的使用的文章就介紹到這了,更多相關(guān)QT布局管理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
從頭實(shí)現(xiàn)一個(gè)分類決策樹分類器似乎是一個(gè)適當(dāng)?shù)奶魬?zhàn)。這已經(jīng)被證明是一個(gè)測(cè)試但有益的學(xué)習(xí)旅程，我想分享一些我在這個(gè)過(guò)程中的主要經(jīng)驗(yàn)，對(duì)c++實(shí)現(xiàn)決策樹相關(guān)知識(shí)感興趣的朋友一起看看吧2021-05-05
C語(yǔ)言中#pragma?pack(1)的用法與注意點(diǎn)
#pragma用于指示編譯器完成一些特定的動(dòng)作,下面這篇文章主要給大家介紹了關(guān)于C語(yǔ)言中#pragma?pack(1)的用法與注意點(diǎn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
基于Turbo C(V2.0)編譯錯(cuò)誤信息的詳細(xì)介紹
本篇文章對(duì)Turbo C(V2.0)編譯的錯(cuò)誤信息進(jìn)行了詳細(xì)的介紹。需要的朋友參考下2013-05-05
這篇文章主要為大家詳細(xì)介紹了Qt如何利用ffmpeg實(shí)現(xiàn)音視頻同步的功能，文中的示例代碼講解詳細(xì)，對(duì)大家深入了解Qt有一定的幫助，需要的可以參考一下2023-01-01
C++ unique_ptr、shared_ptr、weak_ptr的區(qū)別小結(jié)
本文主要介紹了C++ unique_ptr、shared_ptr、weak_ptr的區(qū)別小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-07-07
C++使用chrono庫(kù)處理日期和時(shí)間的實(shí)現(xiàn)方法
C++11 中提供了日期和時(shí)間相關(guān)的庫(kù) chrono，通過(guò) chrono 庫(kù)可以很方便地處理日期和時(shí)間，本文主要介紹了C++使用chrono庫(kù)處理日期和時(shí)間的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下2021-09-09
C語(yǔ)言實(shí)現(xiàn)自動(dòng)發(fā)牌程序
這篇文章主要介紹了利用C語(yǔ)言實(shí)現(xiàn)自動(dòng)發(fā)牌程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了C++的基類和派生類構(gòu)造函數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
關(guān)于VS2022不能使用<bits/stdc++.h>的解決方案(萬(wàn)能頭文件)
#include<bits/stdc++.h>包含了目前 C++ 所包含的所有頭文件，又稱萬(wàn)能頭文件，那么如何在VS2022中使用萬(wàn)能頭呢？下面小編給大家代理了關(guān)于VS2022不能使用<bits/stdc++.h>的解決方案(萬(wàn)能頭文件)，感興趣的朋友一起看看吧2022-03-03
C語(yǔ)言計(jì)算字符串最后一個(gè)單詞的長(zhǎng)度
大家好，本篇文章主要講的是C語(yǔ)言計(jì)算字符串最后一個(gè)單詞的長(zhǎng)度，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下，方便下次瀏覽2021-12-12