• Qt中布局管理使用总结

    目录

    1. 五大布局

    1.1 QVBoxLayout垂直布局

    1.2 QHBoxLayout水平布局

    1.3 QGridLayout网格布局

    1.4 QFormLayout表单布局

    1.5 QStackedLayout分组布局

    1.6 五大布局综合应用

    2. 分割窗口

    3. 滚动区域

    4. 停靠区域

    1. 五大布局

    1.1 QVBoxLayout垂直布局

    1. #include 
    2. #include 
    3. #include 
    4. #include 
    5.  
    6. int main(int argc, char *argv[])
    7. {
    8.     QApplication a(argc, argv);
    9.  
    10.     //MainWindow w;
    11.     //w.show();
    12.  
    13.     //创建主窗口
    14.     QWidget widget;
    15.     widget.setWindowTitle("QVBoxLayout垂直布局");
    16.     //创建垂直布局管理器
    17.     QVBoxLayout *layout=new QVBoxLayout;
    18.     //设置布局管理器中所有控件从下往上依次排列
    19.     layout->setDirection(QBoxLayout::BottomToTop);
    20.  
    21.     //连续创建 3 个文本框，并设置它们的背景和字体大小
    22.     QLabel lab1("Label1");
    23.     lab1.setStyleSheet("QLabel{background:#dddddd;font:20px;}");
    24.     lab1.setAlignment(Qt::AlignCenter);
    25.     QLabel lab2("Label2");
    26.     lab2.setStyleSheet("QLabel{background:#cccccc;font:20px;}");
    27.     lab2.setAlignment(Qt::AlignCenter);
    28.     QLabel lab3("Label3");
    29.     lab3.setStyleSheet("QLabel{background:#ffffff;font:20px;}");
    30.     lab3.setAlignment(Qt::AlignCenter);
    31.  
    32.     //将 3 个文本框和 2 个空白行添加到管理器中，它们的伸缩系数比是 2:1:2:3:3
    33.     layout->addStretch(2);
    34.     layout->addWidget(&lab1,1);
    35.     layout->addWidget(&lab2,2);
    36.     layout->addWidget(&lab3,3);
    37.     layout->addStretch(3);
    38.  
    39.     //将布局管理器添加到 widget 窗口中
    40.     widget.setLayout(layout);
    41.     widget.show();
    42.  
    43.     
    44.     return a.exec();
    45. }


    1.2 QHBoxLayout水平布局

    1. #include 
    2. #include 
    3. #include 
    4. #include 
    5. int main(int argc, char *argv[])
    6. {
    7.     QApplication a(argc, argv);
    8.  
    9.     //创建主窗口
    10.     QWidget widget;
    11.     widget.setWindowTitle("QHBoxLayout水平布局");
    12.  
    13.     //创建水平布局管理器
    14.     QHBoxLayout *layout=new QHBoxLayout;
    15.     //设置布局管理器中所有控件的布局方向为从右往左依次排列
    16.     layout->setDirection(QBoxLayout::RightToLeft);
    17.     //连续创建 3 个文本框，并设置它们的背景和字体大小
    18.     QLabel lab1("Label1");
    19.     lab1.setStyleSheet("QLabel{background:#dddddd;font:20px;}");
    20.     lab1.setAlignment(Qt::AlignCenter);
    21.     QLabel lab2("Label2");
    22.     lab2.setStyleSheet("QLabel{background:#cccccc;font:20px;}");
    23.     lab2.setAlignment(Qt::AlignCenter);
    24.     QLabel lab3("Label3");
    25.     lab3.setStyleSheet("QLabel{background:#ffffff;font:20px;}");
    26.     lab3.setAlignment(Qt::AlignCenter);
    27.  
    28.     //将 3 个文本框和 2 个空白列添加到管理器中，它们的拉伸系数比是 2:1:2:3:3
    29.     layout->addStretch(2);
    30.     layout->addWidget(&lab1,1);
    31.     layout->addWidget(&lab2,2);
    32.     layout->addWidget(&lab3,3);
    33.     layout->addStretch(3);
    34.  
    35.     //将布局管理器添加到 widget 窗口中
    36.     widget.setLayout(layout);
    37.     widget.show();
    38.  
    39.     return a.exec();
    40. }

    1.3 QGridLayout网格布局

    1. #include 
    2. #include 
    3. #include 
    4. #include 
    5. #include 
    6.  
    7. int main(int argc, char *argv[])
    8. {
    9.     QApplication a(argc, argv);
    10.  
    11.     //创建主窗口
    12.     QWidget widget;
    13.     widget.setWindowTitle("QGridLayout网格布局");
    14.  
    15.     //创建 4 个按钮和 1 个文本框
    16.     QPushButton *but1 = new QPushButton("but1");
    17.     QPushButton *but2 = new QPushButton("but2");
    18.     QLabel *lab3 = new QLabel("lab");
    19.     lab3->setStyleSheet("QLabel{background:#dddddd;font:20px;}");
    20.     lab3->setAlignment(Qt::AlignCenter);
    21.     QPushButton *but3 = new QPushButton("but3");
    22.     QPushButton *but4 = new QPushButton("but4");
    23.     //创建网格布局控件
    24.     QGridLayout *layout = new QGridLayout;
    25.  
    26.     //向 layout 中添加控件，并指定各个控件的位置
    27.     layout->addWidget(but1, 0, 0);
    28.     layout->addWidget(but2, 0, 2);
    29.     layout->addWidget(lab3, 1, 0, 3, 3); // 从第1行第0列开始占据3行3列
    30.     layout->addWidget(but3, 4, 0);
    31.     layout->addWidget(but4, 4, 2);
    32.  
    33.     //将 layout 添加到 widget 窗口中
    34.     widget.setLayout(layout);
    35.     widget.show();
    36.  
    37.     return a.exec();
    38. }

    1.4 QFormLayout表单布局

    1. #include 
    2. #include 
    3. #include 
    4. #include 
    5. int main(int argc, char *argv[])
    6. {
    7.     QApplication a(argc, argv);
    8.  
    9.     //创建主窗口
    10.     QWidget widget;
    11.     widget.setWindowTitle("QFormLayout表单布局");
    12.  
    13.     //创建 4 个按钮和 1 个文本框
    14.     QFormLayout* layout = new QFormLayout();
    15.     //设置表单中的标签都位于控件的上方
    16.     //layout->setRowWrapPolicy(QFormLayout::WrapAllRows);
    17.     //添加 3 行输入框和标签
    18.     layout->addRow("Name:", new QLineEdit());
    19.     layout->addRow("Email:", new QLineEdit());
    20.     layout->addRow("Adress:", new QLineEdit());
    21.     //设置行间距和列间距为 10
    22.     layout->setSpacing(10);
    23.     //将 layout 表单添加到 widget 窗口中
    24.     widget.setLayout(layout);
    25.     widget.show();
    26.  
    27.     return a.exec();
    28. }

    1.5 QStackedLayout分组布局

    1. #include 
    2. #include 
    3. #include 
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9.  
    10. int main(int argc, char *argv[])
    11. {
    12.     QApplication a(argc, argv);
    13.  
    14.     //创建主窗口
    15.     QWidget widget;
    16.     widget.setWindowTitle("QStackedLayout分组布局");
    17.     widget.resize(600,400);
    18.  
    19.     //向主窗口中添加一个水平布局控件
    20.     QHBoxLayout *layout=new QHBoxLayout;
    21.  
    22.     //创建一个列表
    23.     QListWidget listWidget(&widget);
    24.     listWidget.setMinimumWidth(150);
    25.     listWidget.setFont(QFont("宋体", 14));
    26.     listWidget.addItem("QPushButton");
    27.     listWidget.addItem("QLabel");
    28.     listWidget.addItem("QLineEdit");
    29.  
    30.     //新建 3 个窗口，分别放置文本框、按钮和单行输入框
    31.     QWidget widget1;
    32.     widget1.setMinimumSize(400,400);
    33.     QPushButton but1("这是一个按钮", &widget1);
    34.     QWidget widget2;
    35.     widget2.setMinimumSize(400, 400);
    36.     QLabel lab1("这是一个文本框", &widget2);
    37.     QWidget widget3;
    38.     widget3.setMinimumSize(400,400);
    39.     QLineEdit edit("这是一个单行输入框", &widget3);
    40.  
    41.     //创建一个分组布局，将 3 个窗口添加到分组控件中
    42.     QStackedLayout *stackedLayout = new QStackedLayout;
    43.     stackedLayout->addWidget(&widget1);
    44.     stackedLayout->addWidget(&widget2);
    45.     stackedLayout->addWidget(&widget3);
    46.  
    47.     //layout 第一列添加 QListWidget 控件，第二列添加分组布局控件，设置它们的伸缩系数比为 1:4
    48.     layout->addWidget(&listWidget, 1);
    49.     layout->addLayout(stackedLayout, 4);
    50.     //将 layout 水平布局控件添加到 widget 窗口中
    51.     widget.setLayout(layout);
    52.     widget.show();
    53.  
    54.     //连接信号和槽，实现当点击列表中的某一项，切换分组布局管理器显示的控件
    55.     QObject::connect(&listWidget, &QListWidget::currentRowChanged, stackedLayout, &QStackedLayout::setCurrentIndex);
    56.  
    57.     return a.exec();
    58. }

    1.6 五大布局综合应用

    mainwindow.h

    1. #ifndef MAINWINDOW_H
    2. #define MAINWINDOW_H
    3.  
    4. #include 
    5. #include 
    6. #include       // 用于创建按钮的类
    7. #include       // 用于水平布局的类
    8. #include         // 用于创建文本框的类
    9. #include       // 用于栅格布局的类
    10. #include         // 用于创建行文本框的类
    11. #include       // 用于表单布局的类
    12. #include    // 用于分页布局的类
    13. #include         // 用于下拉框的类
    14.  
    15. namespace Ui {
    16. class MainWindow;
    17. }
    18.  
    19. class MainWindow : public QMainWindow
    20. {
    21.     Q_OBJECT
    22.  
    23. public:
    24.     explicit MainWindow(QWidget *parent = 0);
    25.     ~MainWindow();
    26.  
    27. private:
    28.     Ui::MainWindow *ui;
    29.  
    30. private:
    31.     QWidget *m_widget;
    32.  
    33. private:
    34.     //演示表单布局
    35.     QLineEdit   *nameLineEdit;  // 声明 name 文本框
    36.     QLineEdit   *emailLineEdit; // 声明 email 文本框
    37.  
    38.     //演示水平布局
    39.     QPushButton *button1;       // 声明按钮1
    40.     QPushButton *button2;       // 声明按钮2
    41.     QPushButton *button3;       // 声明按钮3
    42.     QPushButton *button4;       // 声明按钮4
    43.     QPushButton *button5;       // 声明按钮5
    44.  
    45.     // 演示垂直布局
    46.     QPushButton *button6;       // 声明按钮6
    47.     QPushButton *button7;       // 声明按钮7
    48.     QPushButton *button8;       // 声明按钮8
    49.     QPushButton *button9;       // 声明按钮9
    50.     QPushButton *button10;      // 声明按钮10
    51.  
    52.     // 演示网格布局
    53.     QPushButton *button11;      // 声明按钮11
    54.     QPushButton *button12;      // 声明按钮12
    55.     QTextEdit   *gridTextEdit;      // 声明文本框
    56.  
    57.     // 演示分组布局
    58.     QPushButton *button13;      // 声明按钮13
    59.     QPushButton *button14;      // 声明按钮14
    60.     QPushButton *button15;      // 声明按钮15
    61.     QPushButton *button16;      // 声明按钮16
    62.     QPushButton *button17;      // 声明按钮17
    63.     QPushButton *button18;      // 声明按钮18
    64. };
    65.  
    66. #endif // MAINWINDOW_H

    mainwindow.cpp

    1. #include "mainwindow.h"
    2. #include "ui_mainwindow.h"
    3.  
    4. /*
    5. //比较常用的布局微调整接口
    6. QBoxLayout::setSpacing(int spacing);  设置组件之间的间隔，
    7. QBoxLayout::addStretch(int stretch = 0); 设置一个占位空间，
    8. QLayout::setContentsMargins(int left, int top, int right, int bottom); 设置布局管理器到边界的距离。
    9. */
    10.  
    11. MainWindow::MainWindow(QWidget *parent) :
    12.     QMainWindow(parent),
    13.     ui(new Ui::MainWindow)
    14. {
    15.     ui->setupUi(this);
    16.  
    17.     // 设置后页面大小不可调整，一直处于系统推荐大小的状态
    18.     //this->setFixedSize(sizeHint());
    19.  
    20.     // 首先创建一个QWidget并设置给QMainWindow，否则布局看不见
    21.     m_widget = new QWidget(this);
    22.     this->setCentralWidget(m_widget);
    23.     // 演示布局管理器到边界的距离 左  上 右 下
    24.     m_widget->setContentsMargins(50, 100, 50, 100);
    25.     // 设置固定大小
    26.     /*
    27.     this->setFixedHeight(400);
    28.     this->setFixedWidth(600);
    29.     */
    30.  
    31.     // 创建按钮1
    32.     button1 = new QPushButton("One");
    33.     // 创建按钮2
    34.     button2 = new QPushButton("Two");
    35.     // 创建按钮3
    36.     button3 = new QPushButton("Three");
    37.     // 创建按钮4
    38.     button4 = new QPushButton("Four");
    39.     // 创建按钮5
    40.     button5 = new QPushButton("Five");
    41.  
    42.     // [1]创建水平页面布局管理对象
    43.     QHBoxLayout *hlayout = new QHBoxLayout;
    44.     // 向水平布局增加 按钮1
    45.     hlayout->addWidget(button1);
    46.     // 向水平布局增加 按钮2
    47.     hlayout->addWidget(button2);
    48.     // 向水平布局增加 按钮3
    49.     hlayout->addWidget(button3);
    50.     // 向水平布局增加 按钮4
    51.     hlayout->addWidget(button4);
    52.     // 向水平布局增加 按钮5
    53.     hlayout->addWidget(button5);
    54.     // 设置水平页面布局是窗口布局
    55.     //m_widget->setLayout(hlayout);
    56.     // 演示水平布局之间增加间隔
    57.     hlayout->setSpacing(200);
    58.  
    59.     // 创建按钮6
    60.     button6 = new QPushButton("Six");
    61.     // 创建按钮7
    62.     button7 = new QPushButton("Seven");
    63.     // 创建按钮8
    64.     button8 = new QPushButton("Eight");
    65.     // 创建按钮9
    66.     button9 = new QPushButton("Nine");
    67.     // 创建按钮10
    68.     button10 = new QPushButton("Ten");
    69.  
    70.     // [2]创建垂直页面布局管理对象
    71.     QVBoxLayout *vlayout = new QVBoxLayout;
    72.     // 向水平布局增加 按钮6
    73.     vlayout->addWidget(button6);
    74.     // 向水平布局增加 按钮7
    75.     vlayout->addWidget(button7);
    76.     // 演示在按钮之间增加一个占位(弹簧)
    77.     vlayout->addStretch(1);
    78.     // 向水平布局增加 按钮8
    79.     vlayout->addWidget(button8);
    80.     // 向水平布局增加 按钮9
    81.     vlayout->addWidget(button9);
    82.     // 向水平布局增加 按钮10
    83.     vlayout->addWidget(button10);
    84.  
    85.  
    86.     // 创建按钮11
    87.     button11 = new QPushButton("Eleven");
    88.     // 创建按钮12
    89.     button12 = new QPushButton("Twelve");
    90.     // 创建文本框
    91.     gridTextEdit = new QTextEdit();
    92.  
    93.     // [4]创建栅格页面布局管理对象
    94.     QGridLayout *gridLayout = new QGridLayout;
    95.     gridLayout->addWidget(button11,0,0,1,1);
    96.     gridLayout->addWidget(button12,0,1,1,1);
    97.     gridLayout->addWidget(gridTextEdit,2,0,4,2);
    98.  
    99.    // 创建行文本框
    100.    nameLineEdit = new QLineEdit();
    101.    emailLineEdit = new QLineEdit();
    102.  
    103.    // [6]创建表单页面布局管理对象
    104.    QFormLayout *formLayout = new QFormLayout;
    105.    formLayout->addRow(tr("&Name:"), nameLineEdit);
    106.    formLayout->addRow(tr("&Email:"), emailLineEdit);
    107.  
    108.  
    109.     // [5]创建水平页面布局管理
    110.     QHBoxLayout *gridhlayout = new QHBoxLayout;
    111.     gridhlayout->addLayout(vlayout);
    112.     gridhlayout->addLayout(gridLayout);
    113.  
    114.     // [3]创建垂直页面布局管理对象
    115.     QVBoxLayout *layout = new QVBoxLayout;
    116.     m_widget->setLayout(layout);
    117.  
    118.     layout->addLayout(formLayout);
    119.     layout->addLayout(hlayout);
    120.     layout->addLayout(gridhlayout);
    121.  
    122.     // 分页布局
    123.     // [7.1]第一步：准备3个页面，每个页面放置一些组件
    124.     QWidget *firstPageWidget = new QWidget;
    125.     QWidget *secondPageWidget = new QWidget;
    126.     QWidget *thirdPageWidget = new QWidget;
    127.     // 准备页面组件：创建6个按钮，每个页面放置一个按钮
    128.     button13 = new QPushButton("Page 1 button13");
    129.     button14 = new QPushButton("Page 1 button14");
    130.     button15 = new QPushButton("Page 2 button15");
    131.     button16 = new QPushButton("Page 2 button16");
    132.     button17 = new QPushButton("Page 3 button17");
    133.     button18 = new QPushButton("Page 3 button18");
    134.     // 创建3个页面布局，每个页面一个布局
    135.     QVBoxLayout *page1layout = new QVBoxLayout;
    136.     QHBoxLayout *page2layout = new QHBoxLayout;
    137.     QVBoxLayout *page3layout = new QVBoxLayout;
    138.     // 给分页布局添加组件
    139.     page1layout->addWidget(button13);
    140.     page1layout->addWidget(button14);
    141.     page2layout->addWidget(button15);
    142.     page2layout->addWidget(button16);
    143.     page3layout->addWidget(button17);
    144.     page3layout->addWidget(button18);
    145.     // 设置分页布局
    146.     firstPageWidget->setLayout(page1layout);
    147.     secondPageWidget->setLayout(page2layout);
    148.     thirdPageWidget->setLayout(page3layout);
    149.  
    150.     // [7.2]第二步：创建 QStackedLayout 页面布局管理对象，把分页添加到这个对象上
    151.     QStackedLayout *stackedLayout = new QStackedLayout;
    152.     // 向分页布局对象添加页面
    153.     stackedLayout->addWidget(firstPageWidget);
    154.     stackedLayout->addWidget(secondPageWidget);
    155.     stackedLayout->addWidget(thirdPageWidget);
    156.  
    157.     // [7.3]第三步：设置分页切换方法，使用 QComboBox或QListWidget 实现
    158.     QComboBox *pageComboBox = new QComboBox;
    159.     pageComboBox->addItem(tr("Page 1"));
    160.     pageComboBox->addItem(tr("Page 2"));
    161.     pageComboBox->addItem(tr("Page 3"));
    162.     connect(pageComboBox, SIGNAL(activated(int)), stackedLayout, SLOT(setCurrentIndex(int)));
    163.  
    164.     // [7.4]第四步：将 QStackedLayout 布局添加到主布局上，将分页切换组件添加到一个布局上
    165.     vlayout->addWidget(pageComboBox);
    166.     layout->addLayout(stackedLayout); // 向主页面添加分页布局
    167.  
    168. }
    169.  
    170. MainWindow::~MainWindow()
    171. {
    172.     delete ui;
    173. }

    main.cpp

    1. #include "mainwindow.h"
    2. #include 
    3. #include 
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include 
    10.  
    11. int main(int argc, char *argv[])
    12. {
    13.     QApplication a(argc, argv);
    14.  
    15.  
    16.     MainWindow  wondow;
    17.     wondow.show();
    18.  
    19.  
    20.     return a.exec();
    21. }
    22.

    2. 分割窗口

    Qt中提供了 QSplitter 分离器类来实现窗口的分割，分割的窗口是用分割条隔开的，用户可以拖动分割条调整窗口的大小。

    mainwindow.h

    1. #ifndef MAINWINDOW_H
    2. #define MAINWINDOW_H
    3.  
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8.  
    9. namespace Ui {
    10. class MainWindow;
    11. }
    12.  
    13. class MainWindow : public QMainWindow
    14. {
    15.     Q_OBJECT
    16.  
    17. public:
    18.     explicit MainWindow(QWidget *parent = 0);
    19.     ~MainWindow();
    20.  
    21. private:
    22.     Ui::MainWindow *ui;
    23.  
    24. private:
    25.     QWidget *m_widget;
    26.  
    27. private:
    28.     QTextEdit *textEdit1;       // 声明文本框1
    29.     QTextEdit *textEdit2;       // 声明文本框2
    30.     QTextEdit *textEdit3;       // 声明文本框3
    31.  
    32. };
    33.  
    34. #endif // MAINWINDOW_H

    mainwindow.cpp

    1. #include "mainwindow.h"
    2. #include "ui_mainwindow.h"
    3.  
    4. MainWindow::MainWindow(QWidget *parent) :
    5.     QMainWindow(parent),
    6.     ui(new Ui::MainWindow)
    7. {
    8.     ui->setupUi(this);
    9.  
    10.     m_widget = new QWidget(this);
    11.     this->setCentralWidget(m_widget);
    12.  
    13.     // [1]创建3个文本框
    14.     textEdit1 = new QTextEdit();
    15.     textEdit2 = new QTextEdit();
    16.     textEdit3 = new QTextEdit();
    17.  
    18.     // [2]创建分离器对象
    19.     QSplitter* splitter = new QSplitter;
    20.     // [3]设置内部组件水平方向布局
    21.     splitter->setOrientation(Qt::Horizontal);
    22.     // [4]向分离器中，添加组件
    23.     splitter->addWidget(textEdit1);
    24.     splitter->addWidget(textEdit2);
    25.     splitter->addWidget(textEdit3);
    26.  
    27.     /*
    28.      * [5]调整3个分割窗口的显示比例 1：1：2
    29.      * setStretchFactor函数：
    30.      *  第一个参数：窗口索引，从0开始
    31.      *  第二个参数：拉伸比例
    32.      * 第一个窗口索引0，拉伸1
    33.      * 第二个窗口索引1，拉伸1
    34.      * 第三个窗口索引2，拉伸2
    35.     */
    36.     splitter->setStretchFactor(0, 1);
    37.     splitter->setStretchFactor(1, 1);
    38.     splitter->setStretchFactor(2, 2);
    39.  
    40.  
    41.     /*
    42.      * [6]把分离器添加到窗口上
    43.      * 创建一个layout
    44.      * 添加组件的方式向layout添加分离器
    45.      * 设置 layout 为程序的layout
    46.     */
    47.     QHBoxLayout *hlayout = new QHBoxLayout;
    48.     hlayout->addWidget(splitter);
    49.  
    50.     m_widget->setContentsMargins(5, 5, 5, 5);
    51.     m_widget->setLayout(hlayout);
    52.  
    53.     // 设置窗口大小
    54.     //m_widget->setFixedSize(800, 200);
    55.     this->setFixedSize(800, 200);
    56.  
    57. }
    58.  
    59. MainWindow::~MainWindow()
    60. {
    61.     delete ui;
    62. }

    main.cpp

    1. #include "mainwindow.h"
    2. #include 
    3.  
    4. int main(int argc, char *argv[])
    5. {
    6.     QApplication a(argc, argv);
    7.     MainWindow w;
    8.     w.show();
    9.  
    10.     return a.exec();
    11. }

    3. 滚动区域

           当某个区域内的组件尺寸超过了预先设置好的范围时，可以使用QScrollArea提供的方法，生成滚动条，滚动显示组件内容。

    mainwindow.h

    1. #ifndef MAINWINDOW_H
    2. #define MAINWINDOW_H
    3.  
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8.  
    9. namespace Ui {
    10. class MainWindow;
    11. }
    12.  
    13. class MainWindow : public QWidget
    14. {
    15.     Q_OBJECT
    16.  
    17. public:
    18.     explicit MainWindow(QWidget *parent = 0);
    19.     ~MainWindow();
    20.  
    21. private:
    22.     Ui::MainWindow *ui;
    23.  
    24. private:
    25.     QLabel *scrollArealabel;    // 声明一个标签
    26.  
    27. };
    28.  
    29. #endif // MAINWINDOW_H

    mainwindow.cpp

    1. #include "mainwindow.h"
    2. #include "ui_mainwindow.h"
    3.  
    4. MainWindow::MainWindow(QWidget *parent) :
    5.     QWidget(parent)//,
    6.     //ui(new Ui::MainWindow)
    7. {
    8.     //ui->setupUi(this);
    9.  
    10.     // [1]创建一个标签
    11.     scrollArealabel = new QLabel;
    12.     // 设置标签的最小尺寸，非常重要，否则有可能无法正常显示滚动条
    13.     scrollArealabel->setMinimumSize(500,500);
    14.     // 设置标签显示的内容，随便写点东西
    15.     scrollArealabel->setText("helo world ");
    16.  
    17.     // [2]创建滚动区域，设置滚动区域关联的对象
    18.     QScrollArea *scrollArea = new QScrollArea;
    19.     // 把标签加到滚动区域，使用 setWidget() 函数
    20.     scrollArea->setWidget(scrollArealabel);
    21.     // 设置滚动区域的背景色
    22.     scrollArea->setBackgroundRole(QPalette::Dark);
    23.  
    24.     // [3]创建一个布局
    25.     QHBoxLayout *hlayout = new QHBoxLayout;
    26.     // 把滚动区域加到布局上
    27.     hlayout->addWidget(scrollArea);
    28.     // 使布局生效
    29.     this->setLayout(hlayout);
    30.     // 设置窗口的大小，比标签的最小尺寸小，这样能显示滚动区域
    31.     this->setFixedSize(400,400);
    32. }
    33.  
    34. MainWindow::~MainWindow()
    35. {
    36.     delete ui;
    37. }

    main.cpp

    1. #include "mainwindow.h"
    2. #include 
    3.  
    4. int main(int argc, char *argv[])
    5. {
    6.     QApplication a(argc, argv);
    7.     MainWindow w;
    8.     w.show();
    9.  
    10.     return a.exec();
    11. }

    4. 停靠区域

           在Qt中，停靠窗口主要是指可以在QMainWindow中停靠或可以浮动的独立窗口。停靠窗口有四个区域，每个窗口可以有自己的标题栏，用户可以通过拖拽的方式移动窗口。浮动窗口可以在下图中的白色区域内移动，QDockWidget 这个类提供了关于停靠窗口的方法。

    mainwindow.h

    1. #ifndef MAINWINDOW_H
    2. #define MAINWINDOW_H
    3.  
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include 
    10.  
    11. namespace Ui {
    12. class MainWindow;
    13. }
    14.  
    15. class MainWindow : public QMainWindow
    16. {
    17.     Q_OBJECT
    18.  
    19. public:
    20.     explicit MainWindow(QWidget *parent = 0);
    21.     ~MainWindow();
    22.  
    23. private:
    24.     Ui::MainWindow *ui;
    25.  
    26. private:
    27.     QLabel        *label;           // 设置一个标签
    28.     QPushButton   *button1;         // 按钮1
    29.     QPushButton   *button2;         // 按钮2
    30.     QPushButton   *button3;         // 按钮3
    31.     QTextEdit     *textEdit;        // 文本框
    32. };
    33.  
    34. #endif // MAINWINDOW_H

    mainwindow.cpp

    1. #include "mainwindow.h"
    2. #include "ui_mainwindow.h"
    3.  
    4. MainWindow::MainWindow(QWidget *parent) :
    5.     QMainWindow(parent),
    6.     ui(new Ui::MainWindow)
    7. {
    8.     ui->setupUi(this);
    9.  
    10.     // [1]创建一个中心区域显示的文本框
    11.     textEdit = new QTextEdit;
    12.     textEdit->setText("main widget");
    13.     // 设置文本框的大小
    14.     textEdit->setFixedSize(300, 300);
    15.     // 把文本框设置为程序中心窗口
    16.     this->setCentralWidget(textEdit);
    17.     // 设置组件与程序边框的距离
    18.     this->setContentsMargins(15, 15, 15, 15);
    19.     //　设置程序界面大小
    20.     // this->setFixedSize(450, 330);
    21.  
    22.  
    23.     // [2]创建组件
    24.      label = new QLabel;
    25.      label->setText("widget1");
    26.      button1 = new QPushButton("aboutQt");
    27.      button2 = new QPushButton("button2");
    28.      button3 = new QPushButton("close");
    29.      // 给两个按钮绑定槽，实现简单的功能
    30.      connect(button1, SIGNAL(clicked()), qApp, SLOT(aboutQt()));// 关于QT
    31.      connect(button3, SIGNAL(clicked()), this, SLOT(close()));  // 关闭程序
    32.  
    33.      // [3]创建页面布局,用于标签和按钮的布局
    34.      QVBoxLayout *docklayout_1 = new QVBoxLayout;
    35.      // 向布局添加组件
    36.      docklayout_1->addWidget(label);
    37.      docklayout_1->addStretch();
    38.      docklayout_1->addWidget(button1);
    39.  
    40.      QVBoxLayout *docklayout_2 = new QVBoxLayout;
    41.      // 向布局添加组件
    42.      docklayout_2->addStretch();
    43.      docklayout_2->addWidget(button2);
    44.      docklayout_2->addWidget(button3);
    45.  
    46.      // [4]创建窗口组件
    47.      QWidget *widget1 = new QWidget;
    48.      QWidget *widget2 = new QWidget;
    49.  
    50.      // [5]设置窗口组件的布局
    51.      widget1->setLayout(docklayout_1);
    52.      widget2->setLayout(docklayout_2);
    53.  
    54.      // [6]创建停靠窗口，并把上面两个窗口添加到停靠窗口中
    55.      QDockWidget *dock = new QDockWidget(tr("myDockWindow1"), this);
    56.      // 设置停靠区域
    57.      dock->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::RightDockWidgetArea);
    58.      // 设置停靠窗口的属性
    59.      dock->setFeatures(QDockWidget::DockWidgetMovable); //停靠窗口可移动属性
    60.      // 窗口 widget1 设置为停靠窗口
    61.      dock->setWidget(widget1);
    62.      // 设置停靠窗口的大小
    63.      // dock->setFixedSize(100,100);
    64.      // 设置边框颜色
    65.      dock->setStyleSheet((QString::fromUtf8("border:1px solid gray")));
    66.      // 向程序主界面添加停靠窗口
    67.      this->addDockWidget(Qt::RightDockWidgetArea, dock);
    68.  
    69.      QDockWidget *dock1 = new QDockWidget(tr("myDockWindow2"), this);
    70.      // 设置停靠区域
    71.      dock1->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::RightDockWidgetArea);
    72.      // 设置停靠窗口的属性
    73.      dock1->setFeatures(QDockWidget::AllDockWidgetFeatures); //具有停靠窗口的全部特性
    74.      // 窗口 widget2 设置为停靠窗口
    75.      dock1->setWidget(widget2);
    76.      // 设置停靠窗口的大小
    77.      // dock1->setFixedSize(100,200);
    78.      // 设置边框颜色
    79.      dock1->setStyleSheet((QString::fromUtf8("border:1px solid gray")));
    80.      // 向程序主界面添加停靠窗口
    81.      this->addDockWidget(Qt::RightDockWidgetArea, dock1);
    82.  
    83.      // [7]设置两个停靠窗口的位置，垂直排列
    84.      splitDockWidget(dock, dock1, Qt::Vertical);
    85. }
    86.  
    87. MainWindow::~MainWindow()
    88. {
    89.     delete ui;
    90. }

    main.cpp

    1. #include "mainwindow.h"
    2. #include 
    3.  
    4. int main(int argc, char *argv[])
    5. {
    6.     QApplication a(argc, argv);
    7.     MainWindow w;
    8.     w.show();
    9.  
    10.     return a.exec();
    11. }

    备注：参考文章

    Qt零基础系列06：如何进行界面布局管理 - 知乎

  • 相关阅读:
    MobileNetV1架构解析
    弘玑Cyclone成功入围《2022爱分析·流程挖掘厂商全景报告》，流程智能产品受到广泛关注
    Java多线程——Callable和future
    数据库系统原理与应用教程（059）—— MySQL 练习题：操作题 1-10（三）
    可图性判断（图论）
    设计模式之状态模式
    服装ERP软件首要的好处都有哪些？
    Spring的Bean加载流程
    matlab 设计BP神经网络对给出的英文字符分类
    14.TIM输出比较示例程序（PWM驱动LED呼吸灯&PWM驱动舵机&PWM驱动直流电机）
  • 原文地址：https://blog.csdn.net/hsy12342611/article/details/132679644