Qt第二十一章：Qt Designer 之布局

矫情吗；* 2024-03-31 08:35 96阅读 0赞

1.  简单场景：页面上放一个QTextEdit控件  
    ![01d384d2efff46bf84a5c0a2eab09264.png][]  
    预览后发现，拖拽放大窗口，QTextEdit控件不会进行缩放，就像下边  
    ![8a3ca0cdb5514d69aa972e9734b861f5.png][]
2.  自适应缩放  
    ![9d530fbb5a7649d790ff9943124d1af7.png][]![f4a1db91945c4bf693ffa07e9e20ecf0.png][]  
    ![d4fc87a7f2be4fc98efd33183103c712.png][]  
    ![c8274b13644f432b9a93d7e7f495139f.png][]  
    我们看到了QTextEdit控件撑满了整个界面：**在控件sizePolicy属性的允许范围中尽可能的撑满界面。**  
    如果换成按钮呢？  
    ![76c04221318746d59a34c6ff9916d498.png][]  
    按钮的宽度撑满了界面，但是高度并没有改变，因为按钮的垂直策略是Fixed(固定)  
    ![92a4437c4aac471f9dfd95ee99bf8438.png][]  
    我们只需要改变一下策略：  
    ![cb565c3ef61647f19c1de5b263514a35.png][]  
    ![97ce8db612a3402ba7df5fb62975d214.png][]
3.  多控件布局：  
    ![ecd62547f2d246c0a421693e6247c33d.png][]  
    ①我们先让上面两个控件（单行输入框和按钮）进行水平布局  
    ![b6b0459f9df24b9fb89f440ea2474891.png][]  
    ②再让上面两个已经水平布局好的整体，跟下面的多行输入框控件，进行垂直布局  
    ![e93e3dd50e924e4382a2295a3c3757d7.png][]  
    ③最后对整个Form窗口进行一个水平或垂直布局（**这个步骤不能少！！！**）  
    ![4b69dd3911e949acb8bd33aed1b4208c.png][]  
    ④调整：单行输入框太长了：加几个弹簧调整一下  
    ![f8762be58a4a46698068e0b8c65e6629.png][]
4.  布局参数：  
    水平布局或垂直布局  
    ![dbe464150f8343688107fcdbfebc5477.png][]
    
        * layoutName：布局名
         * layoutLeftMargin：左间距
         * layoutRightMargin：右间距
         * layoutTopMargin：顶间距
         * layoutBottomMargin：底间距
         * layoutSpacing：控件之间的间距
         * layoutStretch：控件比例；比如 2,3 表示水平布局或垂直布局中，两个控件撑满界面时所占的水平或垂直方向的比例，共5份，分别占2份和3份
         * layoutSizeConstraint：
    
    栅格布局  
    ![bf261e8216ae4ef49ff9a82e4f9d8d13.png][]
    
        * layoutName：布局名
         * layoutHorizontalSpacing：水平方向控件之间的间距
         * layoutVerticalSpacing：垂直方向控件之间的间距
         * layoutRowStretch：每一行的高度比例
         * layoutColumnStretch：每一列的宽度比例
         * layoutStretch：控件比例；比如 2,3 表示水平布局或垂直布局中，两个控件撑满界面时所占的水平或垂直方向的比例，共5份，分别占2份和3份。
         * layoutSizeConstraint：

[01d384d2efff46bf84a5c0a2eab09264.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/4035618ba9fd424db8d1a3ea0c297761.png
[8a3ca0cdb5514d69aa972e9734b861f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2270844322614366a774ef7fa2bffbea.png
[9d530fbb5a7649d790ff9943124d1af7.png]: https://img-blog.csdnimg.cn/9d530fbb5a7649d790ff9943124d1af7.png
[f4a1db91945c4bf693ffa07e9e20ecf0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/66b002b46da04c72ad9b5976e82bba0e.png
[d4fc87a7f2be4fc98efd33183103c712.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f4f87b4704ce46588cd644555161597e.png
[c8274b13644f432b9a93d7e7f495139f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2669e5941ec44883a07e978a4b18ded9.png
[76c04221318746d59a34c6ff9916d498.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f178625af459410dbc8b772035f7ceee.png
[92a4437c4aac471f9dfd95ee99bf8438.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d0dcdffc59f14d07a3db288e9e714bc0.png
[cb565c3ef61647f19c1de5b263514a35.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/61d358d7d8cc4e329ef71e831591683a.png
[97ce8db612a3402ba7df5fb62975d214.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8c5bbda374904349829860fed1268e64.png
[ecd62547f2d246c0a421693e6247c33d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/607c85b3aa78498e9cad25b33c91f4e8.png
[b6b0459f9df24b9fb89f440ea2474891.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/89c64938219a4d5597092139661c62f6.png
[e93e3dd50e924e4382a2295a3c3757d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b144204314ae482783e11c58609a8ee6.png
[4b69dd3911e949acb8bd33aed1b4208c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/23e51bb1917f4f42b986857ddd87b51e.png
[f8762be58a4a46698068e0b8c65e6629.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/fbd36bb9e4f144eabec1f485ff1712c9.png
[dbe464150f8343688107fcdbfebc5477.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6f96c170cf264ab6809efe8f70e4d21d.png
[bf261e8216ae4ef49ff9a82e4f9d8d13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/3eced52fdd124dc7ba236d7eba1ad92c.png