Qt C++布局的一些总结

Qt Creator纯代码布局小总结

（1) 布局概念

• QBoxLayout：盒子布局
• QGridLayout：网格布局
• QFormLayout：表单布局
• QStackedLayout：堆栈布局

1) BoxLayout：盒子布局

QBoxLayout可以在水平方向或垂直方向上排列控件，它分别派生了QHBoxLayout、QVBoxLayout子类。

• QHBoxLayout：水平布局，在水平方向上排列控件，即：左右排列。
• QVBoxLayout：垂直布局，在垂直方向上排列控件，即：上下排列。

函数：

• addWidget：添加控件到布局中
• addStretch：添加拉伸区域 addStretch()函数用于在控件间增加伸缩量！！！
• addLayout：布局中添加布局，用于嵌套布局
• setStretch ( int index, int stretch ) 设置拉伸比例 。index：容器中某个组件的下标stretch：拉伸比例

举例：

layout.setSpacing(50);// 布局容器中各个组件的距离

  layout.addWidget(&btn1);//将按钮添加到布局管理器中
  layout.addWidget(&btn2);
  layout.addSpacing(50); // 用于在布局容器的任意位置加上指定大小的区域。  上下两个组件之间的距离，即btn2与btn3之间的距离
  layout.addWidget(&btn3);

  layout.setStretch(0,2);//btn1 拉伸比例设置为 2
  layout.setStretch(1,2);//btn2 拉伸比例设置为 2
  layout.setStretch(2,1);//btn3 拉伸比例设置为 1

2) QGridLayout：网格/栅格布局（多行多列）

• 与QBoxLayout只能在一个方向布局不同，QGridLayout可以在网格中布局（垂直和水平两个方向）。

栅格布局就像是一个房间里面摆放家具的方式：
首先，它量一下房间的大小，看看有多少空间可以用。
然后，它把这个空间想象成很多行和列，就像是把房间用墙隔成很多小隔间。
最后，它把每个家具（在这里是窗口部件）放到这些小隔间里，确保每个家具都放在合适的地方，既不会挤到一起，也不会浪费空间。
简单来说，栅格布局就是把一个大空间分割成很多小格子，然后把东西整齐地放在这些格子里。

在栅格布局中，每个列（以及行）都有一个最小宽度（使用setColumnMinimumWidth()设置）以及一个伸缩因子（使用setColumnStretch()设置）。最小宽度指的是位于该列中的窗口部件的最小的宽度，而伸缩因子决定了该列内的窗口部件能够获得多少空间。

举例：

QGridLayout *pLayout = new QGridLayout(pWidget);
// 头像框 第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);
// 自动登录 第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->setHorizontalSpacing(10);
// 设置垂直间距
pLayout->setVerticalSpacing(10);
// 设置外间距
pLayout->setContentsMargins(10, 10, 10, 10);

设置行/列的伸缩空间，和 QBoxLayout 的 addStretch 功能类似：

setRowStretch(int row, int stretch)
setColumnStretch(int column, int stretch)

setSpacing() 可以同时设置水平、垂直间距，设置之后，水平、垂直间距相同。setHorizontalSpacing()、setVerticalSpacing() 可以分别设置水平间距、垂直间距：

setSpacing(int spacing)
setHorizontalSpacing(int spacing)
setVerticalSpacing(int spacing)

设置行最小高度和列最小宽度：

setRowMinimumHeight(int row, int minSize)
setColumnMinimumWidth(int column, int minSize)

获取行列数：

columnCount()
rowCount()

（2）具体实现

在构造函数中创建目标控件，Label、Pushbutton、Checkbox、LineEdit、chartView等等。
mainwinow.h中

private:
    Ui::MainWindow *ui;
    
    QLineSeries *series;
    QLineSeries *series2;
    QLineSeries *series3;

    QChartView *chartView;
    QChartView *chartView2;
    QChartView *chartView3;
    QPushButton *disconnectButton ;
    QPushButton *loginButton;
    QPushButton *clearWaveformsButton;

    QLabel *deviceInfoLabel;

    QLabel *label_time ;
    QLabel *label_time_txt ;
    QLabel *lable_version_txt;
	void setupUiElements();

mainwinow.cpp中

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <QTimer>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QMessageBox>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
    , socket(new QTcpSocket(this))
    , series(new QLineSeries())
    , series2(new QLineSeries())
    , series3(new QLineSeries())
{
    ui->setupUi(this);
    setupUiElements();  // 需要布局的空间较多，单独用一个函数来进行布局（在mainwinow.h声明成员函数）
    ....
};

setupUiElements() 函数

void MainWindow::setupUiElements()
{
    // 添加登录
    loginButton = new QPushButton("连接设备", this);
    loginButton->setMinimumHeight(40);
    disconnectButton = new QPushButton("断开连接", this);
    disconnectButton->setMinimumHeight(40);

    // 添加清除波形按钮
    clearWaveformsButton = new QPushButton("清除波形", this);
    clearWaveformsButton->setMinimumHeight(40);
    
    // 创建设备信息滚动区域
    deviceInfoScrollArea = new QScrollArea(this);
    deviceInfoContainer = new QWidget(deviceInfoScrollArea);
    deviceInfoLayout = new QVBoxLayout(deviceInfoContainer);
    deviceInfoScrollArea->setWidget(deviceInfoContainer);
    deviceInfoScrollArea->setWidgetResizable(true);
    deviceInfoScrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    deviceInfoScrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);

	QString labelStyle = "QLabel { "
                         "border: 1px solid #CCCCCC; "  // 1像素宽的灰色边框
                         "border-radius: 3px; "         // 圆角边框
                         "padding: 0px; "               // 内边距
                         "background-color: #F0F0F0; "  // 浅灰色背景
                         "min-width: 50px; "           // 最小宽度
                         "}";
   label_time_txt->setStyleSheet(labelStyle);
   label_stationCode_txt->setStyleSheet(labelStyle);
   
   // 创建中心部件和布局
    QWidget *centerWidget = new QWidget(this);
    QVBoxLayout *vlayout = new QVBoxLayout();  //  垂直布局
    QHBoxLayout *hlayout = new QHBoxLayout(); //  水平布局

    QHBoxLayout *h1layout = new QHBoxLayout();
    QHBoxLayout *h2layout = new QHBoxLayout();
    
 	h1layout->addWidget(lable_version_txt);

    h2layout->addWidget(label_time);
    h2layout->addWidget(label_time_txt);
    h2layout->addWidget(lable_zhanwei1);
    
    vlayout->addLayout(h1layout);
    vlayout->addLayout(h2layout);
	hlayout->addLayout(vlayout);

	 QHBoxLayout *mainLayout = new QHBoxLayout;
    // mainLayout->addWidget(deviceListWidget);
    mainLayout->addLayout(hlayout, 1);  // 1是拉伸因子，可以根据需要调整
    mainLayout->addWidget(chartsScrollArea,10);

    // centerWidget->setLayout(hlayout);
    centerWidget->setLayout(mainLayout);
    setCentralWidget(centerWidget);

    // 设置窗口标题和大小
    setWindowTitle("MainWindow");
}

以上需要根据实际情况摆放控件的位置。

还没写完…