【Qt】水平和垂直布局 素颜马尾好姑娘i 2022-11-15 01:26 290阅读 0赞 ## 00. 目录 ## ### 文章目录 ### * * 00. 目录 * 01. 概述 * 02. 开发环境 * 03. 水平布局常用方式 * 04. 水平布局常用设置 * * 4.1 设置外边距 * 4.2 设置间距 * 4.3 添加伸缩空间 * 4.4 添加控件 * 4.5 设置布局方向 * 4.6 设置拉伸系数 * 05. 垂直布局 * 06. 附录 ## 01. 概述 ## QBoxLayout可以在水平方向或垂直方向上排列控件,由QHBoxLayout、QVBoxLayout所继承。 QHBoxLayout:水平布局,在水平方向上排列控件,即:左右排列。 QVBoxLayout:垂直布局,在垂直方向上排列控件,即:上下排列。 通过查看源码,我们可以发现,水平布局、垂直布局除了构造时的方向(LeftToRight、TopToBottom)不同外,其它均相同。 因此我们以QHBoxLayout为例,来讲解QBoxLayout的常用功能。 ## 02. 开发环境 ## **Windows系统**:Windows10 **Qt版本**:Qt5.15或者Qt6 ## 03. 水平布局常用方式 ## 3.1 第一种方式是使用 Qt 提供的布局,从工具箱中找到相关的布局,然后将其拖拽到 UI 窗口中 将相应的控件放入到布局对应的红色框内部,这些控件就按照布局的样式自动排列了。 ![在这里插入图片描述][20210330174658138.png] 除此之外,我们也可以修改当前布局,需要先选中当前布局,然后鼠标右键,在右键菜单中找布局在其子菜单项中选择其他布局即可 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70] 3.2 第二种方式是直接在父窗口中对选中子部件进行布局。可以鼠标右击选择布局,也可以使用工具栏中的布局工具布局。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 1] 3.3 第三种方式:使用代码进行布局 QWidget *window = new QWidget; QPushButton *button1 = new QPushButton("One"); QPushButton *button2 = new QPushButton("Two"); QPushButton *button3 = new QPushButton("Three"); QPushButton *button4 = new QPushButton("Four"); QPushButton *button5 = new QPushButton("Five"); QHBoxLayout *layout = new QHBoxLayout; layout->addWidget(button1); layout->addWidget(button2); layout->addWidget(button3); layout->addWidget(button4); layout->addWidget(button5); window->setLayout(layout); window->show(); 执行结果如下: ![在这里插入图片描述][20210330174719887.png] ## 04. 水平布局常用设置 ## ### 4.1 设置外边距 ### 默认的外边距为0,为了美观性我们可以设置下Margin。 //设置外边距 setMargin(int) setContentsMargins(int left, int top, int right, int bottom); setContentsMargins(const QMargins &margins) setMargin可以设置左、上、右、下的外边距,设置之后,他们的外边距是相同的。 setContentsMargins与其功能相同,但是可以将左、上、右、下的外边距设置为不同的值。 使用setMargin(10)将外边距设置为10。 //设置外边距为10 layout->setMargin(20); 执行结果如下: ![在这里插入图片描述][20210330174728477.png] ### 4.2 设置间距 ### setSpacing(int) 设置间距 一般情况下,会有一个默认间距值,为了保持所有布局的统一性,或者你需要一个更合适的间距值,则需要手动设置。 QWidget *window = new QWidget; QPushButton *button1 = new QPushButton("One"); QPushButton *button2 = new QPushButton("Two"); QPushButton *button3 = new QPushButton("Three"); QPushButton *button4 = new QPushButton("Four"); QPushButton *button5 = new QPushButton("Five"); QHBoxLayout *layout = new QHBoxLayout; layout->addWidget(button1); layout->addWidget(button2); layout->addWidget(button3); layout->addWidget(button4); layout->addWidget(button5); //设置外边距为10 layout->setMargin(20); //设置间距为0 layout->setSpacing(0); window->setLayout(layout); window->show(); 执行结果如下: ![在这里插入图片描述][20210330174735545.png] ### 4.3 添加伸缩空间 ### addStretch() 添加了一个伸缩空间(QSpacerItem)。 在第一个控件之前添加伸缩,这样所有的控件就会居右显示。 QWidget *window = new QWidget; QPushButton *button1 = new QPushButton("One"); QPushButton *button2 = new QPushButton("Two"); QPushButton *button3 = new QPushButton("Three"); QPushButton *button4 = new QPushButton("Four"); QPushButton *button5 = new QPushButton("Five"); QHBoxLayout *layout = new QHBoxLayout; //在第一个按钮之前添加 layout->addStretch(); layout->addWidget(button1); layout->addWidget(button2); layout->addWidget(button3); layout->addWidget(button4); layout->addWidget(button5); //设置外边距为10 layout->setMargin(20); //设置间距为0 //layout->setSpacing(0); window->setLayout(layout); window->show(); 执行结果: ![在这里插入图片描述][20210330174742442.png] 在最后一个控件之后添加伸缩,这样所有的控件就会居左显示。 QWidget *window = new QWidget; QPushButton *button1 = new QPushButton("One"); QPushButton *button2 = new QPushButton("Two"); QPushButton *button3 = new QPushButton("Three"); QPushButton *button4 = new QPushButton("Four"); QPushButton *button5 = new QPushButton("Five"); QHBoxLayout *layout = new QHBoxLayout; layout->addWidget(button1); layout->addWidget(button2); layout->addWidget(button3); layout->addWidget(button4); layout->addWidget(button5); //在最后一个控件添加伸缩 layout->addStretch(); //设置外边距为10 layout->setMargin(20); //设置间距为0 //layout->setSpacing(0); window->setLayout(layout); window->show(); 执行结果: ![在这里插入图片描述][20210330174749155.png] 在第一个控件之前、最后一个控件之后添加伸缩,这样所有的控件就会居中显示。 QWidget *window = new QWidget; QPushButton *button1 = new QPushButton("One"); QPushButton *button2 = new QPushButton("Two"); QPushButton *button3 = new QPushButton("Three"); QPushButton *button4 = new QPushButton("Four"); QPushButton *button5 = new QPushButton("Five"); QHBoxLayout *layout = new QHBoxLayout; //在第一个按钮之前添加 layout->addStretch(); layout->addWidget(button1); layout->addWidget(button2); layout->addWidget(button3); layout->addWidget(button4); layout->addWidget(button5); //在最后一个添加伸缩 layout->addStretch(); //设置外边距为10 layout->setMargin(20); //设置间距为0 //layout->setSpacing(0); window->setLayout(layout); window->show(); 执行结果 ![在这里插入图片描述][20210330174757639.png] 每一个控件之间都添加伸缩,这样所有的控件之间的间距都会相同。 QWidget *window = new QWidget; QPushButton *button1 = new QPushButton("One"); QPushButton *button2 = new QPushButton("Two"); QPushButton *button3 = new QPushButton("Three"); QPushButton *button4 = new QPushButton("Four"); QPushButton *button5 = new QPushButton("Five"); QHBoxLayout *layout = new QHBoxLayout; //在第一个按钮之前添加 layout->addStretch(); layout->addWidget(button1); layout->addStretch(); layout->addWidget(button2); layout->addStretch(); layout->addWidget(button3); layout->addStretch(); layout->addWidget(button4); layout->addStretch(); layout->addWidget(button5); //在最后一个添加伸缩 layout->addStretch(); //设置外边距为10 layout->setMargin(20); //设置间距为0 //layout->setSpacing(0); window->setLayout(layout); window->show(); 执行结果: ![在这里插入图片描述][20210330174806394.png] ### 4.4 添加控件 ### addWidget(QWidget *, int stretch = 0, Qt::Alignment alignment = 0) 默认的,我们添加控件至水平布局中,默认都是垂直方向居中对齐的。 其中有控件大小不相同的时候就会看得很明显了,如果我们需要将其中的某些控件居上、居下显示,那么可以使用对齐方式Qt::Alignment。 QWidget *window = new QWidget; window->resize(320, 128); QPushButton *button1 = new QPushButton("One"); QPushButton *button2 = new QPushButton("Two"); QPushButton *button3 = new QPushButton("Three"); QPushButton *button4 = new QPushButton("Four"); QPushButton *button5 = new QPushButton("Five"); QHBoxLayout *layout = new QHBoxLayout; //在第一个按钮之前添加 //水平居左 垂直居上 layout->addWidget(button1, 0, Qt::AlignLeft | Qt::AlignTop); layout->addWidget(button2, 0, Qt::AlignLeft | Qt::AlignTop); layout->addWidget(button3); //水平居左 垂直居下 layout->addWidget(button4, 0, Qt::AlignLeft | Qt::AlignBottom); layout->addWidget(button5, 0, Qt::AlignLeft | Qt::AlignBottom); //设置外边距为10 layout->setMargin(20); //设置间距为10 layout->setSpacing(10); window->setLayout(layout); window->show(); 执行结果: ![在这里插入图片描述][20210330174814101.png] ### 4.5 设置布局方向 ### setDirection(Direction) 设置布局方向 可以设置从左到右、从右到左、从上到下、从下到上等。。。 setDirection(QBoxLayout::RightToLeft) setDirection(QBoxLayout::TopToBottom); 程序示例: QWidget *window = new QWidget; window->resize(320, 128); QPushButton *button1 = new QPushButton("One"); QPushButton *button2 = new QPushButton("Two"); QPushButton *button3 = new QPushButton("Three"); QPushButton *button4 = new QPushButton("Four"); QPushButton *button5 = new QPushButton("Five"); QHBoxLayout *layout = new QHBoxLayout; layout->addWidget(button1); layout->addWidget(button2); layout->addWidget(button3); layout->addWidget(button4); layout->addWidget(button5); //设置外边距为10 layout->setMargin(20); //设置间距为10 layout->setSpacing(10); //设置布局方向 layout->setDirection(QBoxLayout::TopToBottom); window->setLayout(layout); window->show(); 执行结果: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 2] 既然使用了QHBoxLayout,一般就不建议使用TopToBottom或者BottomToTop,如果实在确定不了方向,或者方向可以随意变化,那么建议使用QBoxLayout。 ### 4.6 设置拉伸系数 ### setStretchFactor(QWidget *w, int stretch); setStretchFactor(QLayout *l, int stretch); 设置控件、布局的拉伸系数 当窗体大小变化时,控件会根据拉伸系数来做相应的调整。 setStretchFactor(pButton1, 1); setStretchFactor(pButton2, 2); 设置pButton1的拉伸系数为1,pButton2拉伸系数为2,当窗体变大时,会优先将pButton2进行拉伸,当达到一定程度时,再拉伸pButton1,pButton1与pButton2的宽度比例为1:2。 程序示例: QWidget *window = new QWidget; window->resize(320, 128); QPushButton *button1 = new QPushButton("One"); QPushButton *button2 = new QPushButton("Two"); QPushButton *button3 = new QPushButton("Three"); QPushButton *button4 = new QPushButton("Four"); QPushButton *button5 = new QPushButton("Five"); QHBoxLayout *layout = new QHBoxLayout; layout->addWidget(button1); layout->addWidget(button2); layout->addWidget(button3); layout->addWidget(button4); layout->addWidget(button5); //设置外边距为10 layout->setMargin(20); //设置间距为10 layout->setSpacing(10); layout->setStretchFactor(button1, 1); layout->setStretchFactor(button2, 2); window->setLayout(layout); window->show(); 执行结果: ![在这里插入图片描述][20210330174830313.png] ## 05. 垂直布局 ## 垂直布局和水平布局除了方向不一样之外,其余所有的设置都是一样。 ## 06. 附录 ## **6.1 Qt教程汇总** 网址:[https://dengjin.blog.csdn.net/article/details/115174639][https_dengjin.blog.csdn.net_article_details_115174639] [20210330174658138.png]: /images/20221022/717bc99ce7074c5a9d6799c950b6346f.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210330174705491.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng==,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210330174712824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng==,size_16,color_FFFFFF,t_70 [20210330174719887.png]: https://img-blog.csdnimg.cn/20210330174719887.png [20210330174728477.png]: https://img-blog.csdnimg.cn/20210330174728477.png [20210330174735545.png]: https://img-blog.csdnimg.cn/20210330174735545.png [20210330174742442.png]: https://img-blog.csdnimg.cn/20210330174742442.png [20210330174749155.png]: https://img-blog.csdnimg.cn/20210330174749155.png [20210330174757639.png]: https://img-blog.csdnimg.cn/20210330174757639.png [20210330174806394.png]: https://img-blog.csdnimg.cn/20210330174806394.png [20210330174814101.png]: https://img-blog.csdnimg.cn/20210330174814101.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210330174822239.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng==,size_16,color_FFFFFF,t_70 [20210330174830313.png]: https://img-blog.csdnimg.cn/20210330174830313.png [https_dengjin.blog.csdn.net_article_details_115174639]: https://dengjin.blog.csdn.net/article/details/115174639
还没有评论,来说两句吧...