• Qt 窗口的尺寸

    本文通过多个案例，详细说明关于Qt窗体尺寸的一些重要问题

    默认尺寸

    对于一个Qt的窗口（继承于QWidget），获取其窗体尺寸的方法size()；

    以一个Qt创建Qt Widgets Application项目的默认生成代码为基础，做如下测试

    1. MainWindow::MainWindow(QWidget *parent)
    2.     : QMainWindow(parent)
    3. {
    4.     qDebug()<<"MainWindow::MainWindow:"<<this->size();
    5.     this->resize(1200,800);
    6.     qDebug()<<"MainWindow::MainWindow:"<<this->size();
    7. }

    第一个this->size()输出QSize(640, 480)，即MainWindow具有默认的尺寸640*480

    第二个this->size()输出QSize(1200, 800)

    实际上，继承于QWidget的控件，例如QPushButton，QLineEdit等也会获得默认的尺寸640*480

    1.     QWidget* page=new QWidget;
    2.     qDebug()<<".."<<page->size();
    3.     QPushButton* btn=new QPushButton;
    4.     qDebug()<<".."<<btn->size();
    5.     QLineEdit* edt=new QLineEdit;
    6.     qDebug()<<".."<<edt->size();

    以上输出都是QSize(640, 480)

    布局之后的尺寸
    1. MainWindow::MainWindow(QWidget *parent)
    2.     : QMainWindow(parent)
    3. {
    4.     qDebug()<<"MainWindow::MainWindow:"<<this->size();
    5.     this->resize(1200,800);
    6.     QWidget* page=new QWidget;
    7.     qDebug()<<".."<<page->size();
    8.     QVBoxLayout* layout=new QVBoxLayout(page);
    9.     QPushButton* btn=new QPushButton;
    10.     qDebug()<<".."<<btn->size();
    11.     QLineEdit* edt=new QLineEdit;
    12.     qDebug()<<".."<<edt->size();
    13.  
    14.     layout->addWidget(btn);
    15.     layout->addWidget(edt);
    16.  
    17.     this->setCentralWidget(page);
    18.  
    19.     qDebug()<<".."<<page->size();
    20.     qDebug()<<".."<<btn->size();
    21.     qDebug()<<".."<<edt->size();
    22.     qDebug()<<"MainWindow::MainWindow:"<<this->size();
    23.     //当界面显示出来之后，点击按钮查看控件尺寸
    24.     connect(btn,&QPushButton::clicked,[=]{
    25.         qDebug()<<".."<<page->size();
    26.         qDebug()<<".."<<btn->size();
    27.         qDebug()<<".."<<edt->size();
    28.     });
    29. }

    以上代码this->setCentralWidget(page);之后的三个打印对应的尺寸应该是多少？

    依然还是 QSize(640, 480)

    而connect()方法中的三个打印对应的值则分别为

    .. QSize(1200, 800)
    .. QSize(1178, 28)
    .. QSize(1178, 24)

    以上代码说明两个问题：

    （1）将控件加入到布局，然后放入了父窗体中，则控件的尺寸会根据父窗体的布局重新设置

    （2）控件尺寸的重新设置发生在窗体显示出来后（绘制时）

     固定尺寸

     以下代码实现在主窗体上布局多个按钮和子窗体，实现点击按钮切换每个子窗体的隐藏和可见。

    但是存在问题：

    （1）4个子窗体平分了主窗体的尺寸；

    （2）隐藏一个子窗体后，其他的子窗体尺寸被更改（窗体重绘时会重新设置尺寸）

    1. MainWindow::MainWindow(QWidget *parent)
    2.     : QMainWindow(parent)
    3. {
    4.     qDebug()<<"MainWindow::MainWindow:"<<this->size();
    5.     this->resize(1200,800);
    6.  
    7.     QWidget* page=new QWidget;
    8.     QVBoxLayout* layout=new QVBoxLayout(page);
    9.  
    10.     QScrollArea* contentArea=new QScrollArea;
    11.     contentArea->setWidgetResizable(true);
    12.     contentArea->setWidget(page);
    13.  
    14.     for(int i=0;i<4;i++)
    15.     {
    16.         QWidget* p=new QWidget;
    17.         //设置窗体背景色，使得区分背景，可见
    18.         p->setStyleSheet("background-color:green");
    19.         QPushButton* b=new QPushButton;
    20.         layout->addWidget(b);
    21.         layout->addWidget(p);
    22.         connect(b,&QPushButton::clicked,[p]{
    23.             //点击按钮后窗体切换显示和隐藏效果
    24.             p->setVisible(!p->isVisible());
    25.         });
    26.     }
    27.     this->setCentralWidget(contentArea);
    28. }

    如果需要设置子窗体在重绘时不改变尺寸，那么需要设置其尺寸

    例如在QWidget* p=new QWidget;下方增加 p->setFixedHeight(300);

    这样隐藏和显示一个子窗体不会对任意其他的子窗体的尺寸造成影响。

    更改后会发现，当隐藏完所有的子窗体后，所有的按钮被均匀布局在了主窗体，如果想要的效果是按钮从主窗体从上往下紧密排列，可以在layout添加完所有的控件和窗口后，添加一个stretch，即在this->setCentralWidget(contentArea);上一行添加layout->addStretch();

    窗体实际尺寸

    如果MainWindow设置的高度为600，而它的中心窗体高度为800，该怎样显示？

    1. MainWindow::MainWindow(QWidget *parent)
    2.     : QMainWindow(parent)
    3. {
    4.     qDebug()<<"MainWindow::MainWindow:"<<this->size();
    5.     this->resize(800,600);
    6.     qDebug()<<"MainWindow::MainWindow:"<<this->size();
    7.     //默认情况下MainWindow没有centralWidget
    8.     QWidget* center=new QWidget;
    9.     qDebug()<<"center:"<<center->size();
    10.     QVBoxLayout* layout=new QVBoxLayout(center);
    11.     QWidget* page1=new QWidget;
    12.     page1->setStyleSheet("background-color:green");
    13.     page1->setFixedHeight(400);
    14.     QWidget* page2=new QWidget;
    15.     page2->setFixedHeight(400);
    16.     page2->setStyleSheet("background-color:yellow");
    17.     layout->addWidget(page1);
    18.     layout->addWidget(page2);
    19.     qDebug()<<"center:"<<center->size();
    20.     this->setCentralWidget(center);
    21.     //此时输出QSize(800, 600)
    22.     qDebug()<<"MainWindow::MainWindow:"<<this->size();
    23. }
    1. int main(int argc, char *argv[])
    2. {
    3.     QApplication a(argc, argv);
    4.     MainWindow w;
    5.     w.show();
    6.     qDebug()<<"w size:"<<w.size();
    7.     return a.exec();
    8. }

    以上代码执行时，MainWindow构造函数中的输出mainwindow的窗体高度为600，但是在窗口显示（执行了w.show()）之后，它的高度却是829

    给窗体设置某个尺寸，实际显示的时候窗体根据布局，不一定恰好按照给定的尺寸来显示

    尺寸不够引起重叠的窗体

    如果主窗体设置了固定高度600，而它的中心窗体设置固定高度1200？

    此时，肯定主窗体显示不全page1和page2

    1. MainWindow::MainWindow(QWidget *parent)
    2.     : QMainWindow(parent)
    3. {
    4.     qDebug()<<"MainWindow::MainWindow:"<<this->size();
    5.     this->resize(800,600);
    6.     this->setFixedHeight(600);
    7.     qDebug()<<"MainWindow::MainWindow:"<<this->size();
    8.     //默认情况下MainWindow没有centralWidget
    9.     QWidget* center=new QWidget;
    10.     center->resize(800,500);
    11.     qDebug()<<"center:"<<center->size();
    12.     QVBoxLayout* layout=new QVBoxLayout(center);
    13.     QWidget* page1=new QWidget;
    14.     page1->setStyleSheet("background-color:green");
    15.     page1->setFixedHeight(600);
    16.     QWidget* page2=new QWidget;
    17.     page2->setFixedHeight(600);
    18.     page2->setStyleSheet("background-color:yellow");
    19.     layout->addWidget(page1);
    20.     layout->addWidget(page2);
    21.     qDebug()<<"center:"<<center->size();
    22.     this->setCentralWidget(center);
    23.     //此时输出QSize(800, 600)
    24.     qDebug()<<"MainWindow::MainWindow:"<<this->size();
    25.     QTimer::singleShot(1000,[=](){
    26.         //为什么page1和page2的高度是600，而实际显示的界面没有600？
    27.         //事实上page1和page2的高度都是600，界面上也是600，但是page1和page2重叠了一部分
    28.         qDebug()<<"page1:"<<page1->size();
    29.         qDebug()<<"page2:"<<page2->size();
    30.         qDebug()<<"center:"<<center->size();
    31.         qDebug()<<"sizeHint:"<<layout->sizeHint();
    32.         qDebug()<<"MainWindow::MainWindow:"<<this->size();
    33.     });
    34. }

    这里输出了layout的sizeHit()，为1229，layout上放置了page1和page2，他们的高度600+600=1200，29是布局周边留下的空白部分。

    最小高度限制

    这里展示了一个实际项目中遇到的问题，需要在一个页面中放置多个表格，并且每个表格要直接显示至少5行，更多行的时候滚动条显示。

    以下代码是从项目中抽取的问题特征部分：

    1. MainWindow::MainWindow(QWidget *parent)
    2.     : QMainWindow(parent)
    3. {
    4.     this->resize(800,600);
    5.     QWidget* page=new QWidget;
    6.     QVBoxLayout* layout=new QVBoxLayout(page);
    7.  
    8.     QScrollArea* contentArea=new QScrollArea;
    9.     contentArea->setWidgetResizable(true);
    10.     contentArea->setWidget(page);
    11.  
    12.     for(int i=0;i<4;i++)
    13.     {
    14.         TableWidget* p=new TableWidget;
    15.         QPushButton* b=new QPushButton;
    16.         layout->addWidget(b);
    17.         layout->addWidget(p);
    18.         connect(b,&QPushButton::clicked,[p]{
    19.             //点击按钮后窗体切换显示和隐藏效果
    20.             p->setVisible(!p->isVisible());
    21.             qDebug()<<"p size:"<<p->size();
    22.         });
    23.     }
    24.     layout->addStretch();
    25.     this->setCentralWidget(contentArea);
    26. }

     TableWidget只是一个平凡的QTableWidget实例，它设置了默认表格有6行8列，

    1. TableWidget::TableWidget()
    2. {
    3.     this->setRowCount(6);
    4.     this->setColumnCount(8);
    5. }

    上述代码的效果：

    目前的问题是每个表格高度都被挤压了，只显示了一行。

    一种解决问题的思路是，在表格初始化时，设置最小高度限制：

    1. TableWidget::TableWidget()
    2. {
    3.     this->setMinimumHeight(250);
    4.     this->setRowCount(6);
    5.     this->setColumnCount(8);
    6. }

     一个更复杂的示例

    以下是一个更复杂一些的示例，这个示例有助于理解Qt在布局控件的过程中对尺寸的更改。

    代码目的是在主界面上加载多个Drawer页面，Drawer页面是一种类似抽屉的盒子，可以打开关闭（显示隐藏）

    1. MainWindow::MainWindow(QWidget *parent)
    2.     : QMainWindow(parent)
    3. {
    4.     this->resize(800,600);
    5.     QWidget* page=new QWidget;
    6.     page->setMinimumHeight(1000);
    7.     //layout用来装载drawer
    8.     QVBoxLayout* layout=new QVBoxLayout(page);
    9.     Drawer* d1=new Drawer;
    10.     Drawer* d2=new Drawer;
    11.     Drawer* d3=new Drawer;
    12.     Drawer* d4=new Drawer;
    13.     QList<Drawer*> drawers{d1,d2,d3,d4};
    14.     for(int i=0;i<1;i++)
    15.     {
    16.         QVBoxLayout* lay=new QVBoxLayout;
    17.         lay->addWidget(new QLineEdit);
    18.         lay->addWidget(new QLineEdit);
    19.         lay->addWidget(new QLineEdit);
    20.         lay->addWidget(new QLineEdit);
    21.         lay->addStretch();
    22.         drawers.at(i)->setContentLayout(lay);
    23.     }
    24.  
    25.     for(int i=1;i<4;i++)
    26.     {
    27.         QVBoxLayout* lay=new QVBoxLayout;
    28.         lay->addWidget(new TableWidget);
    29.         drawers.at(i)->setContentLayout(lay);
    30.     }
    31.  
    32.  
    33.     //以下的stretch使得drawer可以往页面上面顶
    34.     for(int i=0;i<4;i++)
    35.         layout->addWidget(drawers.at(i));
    36.  
    37.     layout->addStretch();
    38.  
    39.  
    40.     QScrollArea* contentArea=new QScrollArea;
    41.     contentArea->setWidgetResizable(true);
    42.     contentArea->setWidget(page);
    43.  
    44.     this->setCentralWidget(contentArea);
    45.  
    46.  
    47.     QTimer::singleShot(1000,[=](){
    48.         qDebug()<<"MainWindow::MainWindow:"<<this->size()<<","<<this->sizeHint();
    49.         qDebug()<<"d2:size:"<<d2->size()<<","<<d2->sizeHint();
    50.     });
    51.  
    52. }

     Drawer提供一个按钮，用于交互显示隐藏页面，和一个接口用于设置页面显示的内容（设置一个布局）

    1. Drawer::Drawer(QWidget *parent)
    2.     : QWidget{parent}
    3. {
    4.     QVBoxLayout* layout=new QVBoxLayout;
    5.     layout->addSpacing(0);
    6.     layout->setContentsMargins(0,0,0,0);
    7.     QToolButton* btn=new QToolButton;
    8.     layout->addWidget(btn);
    9.     area=new QScrollArea;
    10.     area->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    11.     layout->addWidget(area);
    12.     this->setLayout(layout);
    13.     connect(btn,&QToolButton::clicked,[=]{
    14.         area->setVisible(!area->isVisible());
    15.         qDebug()<<"drawer size:"<<this->size()<<this->minimumHeight();
    16. //        if(!area->isVisible())
    17. //        {
    18. //            this->setFixedHeight(30);
    19. //        }
    20. //        else
    21. //        {
    22. //            this->setFixedHeight(minHeight);
    23. //        }
    24.     });
    25. }
    26.  
    27. void Drawer::setContentLayout(QLayout *lay)
    28. {
    29.     area->setLayout(lay);
    30. //    minHeight=this->minimumHeight();
    31. }

     其中TableWidget依然是QTableWidget的简单实例

    1. TableWidget::TableWidget()
    2. {
    3.     this->setRowCount(6);
    4.     this->setColumnCount(8);
    5. }

    以上代码的效果如下：

    存在的问题是：

    （1）表格默认只展示了两行，

    （2）并且关闭了一个Drawer后，其他Drawer的尺寸会发生变化

    其中，前面对（2）问题的处理是设置固定的尺寸p->setFixedHeight(300);

    对应这里就是在Drawer的构造函数第一行加 this->setFixedHeight(300);但是这样一来，会发现每个Drawer之间重叠了，就是尺寸不够引起了窗体重叠，300*400=1200>1000，主窗体中的滚动区域的窗体设置的最小高度1000.

    另外隐藏所有的Drawer页面后，剩余的按钮又均匀分布在了主界面。

    这里的效果和前面固定尺寸一节遇到的问题看似相同，而实际上却不一样，前面的问题通过在布局的最后增加stretch解决，这里显然不能。

    这里遇到的问题是由于按钮点击后隐藏的不是整个Drawer，而只是Drawer中的area，Drawer依然是可见的，因此处于整个主界面的布局之中。这里当Drawer中的area被隐藏后，Drawer页面本身被重新布局了，即只有一个QToolButton参与了布局，所以能看到按钮被布局在了Drawer的中央。

    那么，这种情况下该怎样实现效果：

    （1）隐藏所有的Drawer的area后，只剩下按钮顶格显示在主页面

    （2）表格默认显示至少5行

    （3）隐藏一个Drawer不会对其他的Drawer尺寸产生影响

    一种方式是要在Drawer显示隐藏切换的时候同时设置固定的尺寸；这个固定的尺寸要使得表格至少显示5行

    1. MainWindow::MainWindow(QWidget *parent)
    2.     : QMainWindow(parent)
    3. {
    4.     this->resize(800,600);
    5.     QWidget* page=new QWidget;
    6.     //给page设置了最小高度后，每个drawer的高度会高一些
    7.     page->setMinimumHeight(1200);
    8.     //layout用来装载drawer
    9.     QVBoxLayout* layout=new QVBoxLayout(page);
    10.     Drawer* d1=new Drawer;
    11.     Drawer* d2=new Drawer;
    12.     Drawer* d3=new Drawer;
    13.     Drawer* d4=new Drawer;
    14.     QList<Drawer*> drawers{d1,d2,d3,d4};
    15.     for(int i=0;i<1;i++)
    16.     {
    17.         QVBoxLayout* lay=new QVBoxLayout;
    18.         lay->addWidget(new QLineEdit);
    19.         lay->addWidget(new QLineEdit);
    20.         lay->addWidget(new QLineEdit);
    21.         lay->addWidget(new QLineEdit);
    22.         lay->addStretch();
    23.         //需要提前设置Drawer的最小高度
    24.         drawers.at(i)->setMinimumHeight(200);
    25.         drawers.at(i)->setContentLayout(lay);
    26.     }
    27.  
    28.     for(int i=1;i<4;i++)
    29.     {
    30.         QVBoxLayout* lay=new QVBoxLayout;
    31.         lay->addWidget(new TableWidget);
    32.         //需要提前设置Drawer的最小高度
    33.         drawers.at(i)->setMinimumHeight(300);
    34.         drawers.at(i)->setContentLayout(lay);
    35.     }
    36.  
    37.  
    38.     //以下的stretch使得drawer可以往页面上面顶
    39.     for(int i=0;i<4;i++)
    40.         layout->addWidget(drawers.at(i));
    41.  
    42.     layout->addStretch();
    43.  
    44.  
    45.     QScrollArea* contentArea=new QScrollArea;
    46.     contentArea->setWidgetResizable(true);
    47.     contentArea->setWidget(page);
    48.  
    49.     this->setCentralWidget(contentArea);
    50.  
    51.  
    52.     QTimer::singleShot(1000,[=](){
    53.         qDebug()<<"MainWindow::MainWindow:"<<this->size()<<","<<this->sizeHint();
    54.         qDebug()<<"d2:size:"<<d2->size()<<","<<d2->sizeHint();
    55.     });
    56.  
    57. }
    1. TableWidget::TableWidget()
    2. {
    3.     this->setRowCount(6);
    4.     this->setColumnCount(8);
    5. }
    1. Drawer::Drawer(QWidget *parent)
    2.     : QWidget{parent}
    3. {
    4.     QVBoxLayout* layout=new QVBoxLayout;
    5.     layout->addSpacing(0);
    6.     layout->setContentsMargins(0,0,0,0);
    7.     QToolButton* btn=new QToolButton;
    8.     layout->addWidget(btn);
    9.     area=new QScrollArea;
    10.     area->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    11.     layout->addWidget(area);
    12.     this->setLayout(layout);
    13.     connect(btn,&QToolButton::clicked,[=]{
    14.         area->setVisible(!area->isVisible());
    15.         qDebug()<<"drawer size:"<<this->size()<<this->minimumHeight();
    16.         //这里根据area显示和隐藏的状态动态调整整个drawer的高度
    17.         if(!area->isVisible())
    18.         {
    19.             this->setFixedHeight(30);
    20.         }
    21.         else
    22.         {
    23.             this->setFixedHeight(minHeight);
    24.         }
    25.     });
    26. }
    27.  
    28. void Drawer::setContentLayout(QLayout *lay)
    29. {
    30.     area->setLayout(lay);
    31.     //这里将预设的最小高度记录下来，用于在area显示隐藏切换时设置drawer的高度
    32.     minHeight=this->minimumHeight();
    33. }

    以上代码的效果如下：

  • 相关阅读:
    【Java那些年系列-启航篇 04】Java程序架构：深入理解类与对象的设计原则
    前端使用 Konva 实现可视化设计器（12）- 连接线 - 直线
    java开发必备 Git 分支开发：规范指南及完全学会Git的24堂课笔记
    PostCSS概述
    惊呆同事的自动化小工具来了！Python 批量将 PDF 转 Word
    代理池项目查询
    高版本pytorch运行低版本pytorch常见问题汇总记录
    Avalonia常用小控件Slider
    记一次阿里云oss文件上传服务假死
    长视频又添新变数
  • 原文地址：https://blog.csdn.net/xiyangxiaoguo/article/details/134036752