干货3-布局管理

102 阅读3分钟

1.Layouts布局

image.png

1.1.Vertical Layout垂直布局

(1) 先拖动Vertical Layout布局,再拖动Push Button到布局

image.png

(2) 先拖动Push Button按钮,圈住再点击上面的垂直布局

image.png

1.2.Horizontal Layout水平布局

(1) 先拖动Horizontal Layout布局,再拖动Push Button到布局

image.png

(2) 先拖动Push Button按钮,圈住再点击上面的水平布局

image.png

1.3.Grid Layout网格布局

(1) 先拖动Grid Layout布局,再拖动Push Button到布局

image.png

(2) 先拖动Push Button按钮,圈住再点击上面的栅格布局(网状布局)

image.png

1.4.Form Layout表格布局

(1) 先拖动Form Layout布局,然后双击布局弹出该对象框,填写标签文字a和标签名称aLabel,

image.png

image.png

依此类推,写出b和c

image.png

(2) 先拖动Label标签和Line Edit行编辑,然后点击上面的”在窗体布局中布局“

image.png

依此类推,写出a和b

image.png

image.png

1.5.嵌套布局

在网格布局下包含3个按钮,和一个”在窗体布局中布局“,在窗体布局中布局又包含一个标签和行边框

image.png

2.分裂器

允许用户通过拖动分隔条(splitter handle)来调整子控件(如按钮、文本框、其他窗口等)的尺寸,实现灵活的布局划分。

2.1水平分裂器

(1) 选择一个按钮和一个文本编辑,点击水平分裂器

image.png

(2) 点击文本编辑输入水平分裂器

image.png

(3) 可以随意调节大小

image.png

2.2垂直分裂器

(1) 选择一个按钮和一个文本编辑,点击垂直分裂器

image.png

(2) 点击文本编辑输入水平分裂器

image.png

(3) 可以随意调节大小

image.png

3.Spacers弹簧

可以拉开控件与控件,控件与边界之间的距离

image.png

3.1Horizontal Spacer水平弹簧

在水平布局下,两个按钮之间放置一个水平弹簧

image.png

3.2Vertical Spacer垂直弹簧

在垂直布局下,两个按钮之间放置一个垂直弹簧

image.png

4.控件的大小

4.1首先选择两个按钮,点击栅格(网格)布局。

image.png

image.png

4.2打破布局可以恢复原样

image.png

4.3控件的sizePolicy说明控件在布局管理中的缩放方式(以垂直为例)

每个Qt小控件都有一个推荐的大小,称为sizeHint();

4.4Expanding:sizeHint()提供的是合适的大小,部件可以被压缩,不过更倾向于拉伸来获取更多的空间

image.png

4.5Preferred:sizeHint()提供的是最佳大小,可以拉伸可以压缩

image.png

4.6ExpandingPreferred 控件

(1) 两个 Expanding 控件的布局

  • 两个控件 均分垂直空间,随窗口拉伸同步扩大/缩小。 image.png

(2) Expanding + Preferred 控件的布局

  • A 是Expanding布局,占据 大部分空间,随窗口拉伸变化。
  • B 是Preferred布局,保持 接近默认高度,仅在最小时压缩。

image.png

(3) 纯 Preferred 控件的布局

  • 所有按钮保持 默认大小,窗口变大时 空白区域留空,窗口变小时按钮被压缩。

image.png

(4) PreferredExpanding区别

策略行为
Preferred尽量保持 sizeHint(理想大小),但 可以拉伸或收缩(如果布局允许)。
Expanding主动要求占用额外空间,比 Preferred 控件 优先级更高

关键点

  • 如果所有控件都是 Preferred,它们会 均分额外空间(看起来像拉伸)。
  • 如果混合 Expanding 和 PreferredExpanding 控件会 优先占用更多空间
  • 如果所有控件都是 Expanding,它们会 按比例均分空间(类似于 Preferred 的表现)。

4.7 Maximum:sizeHint()提供的是最大大小,部件可以被压缩

image.png

4.8 Minimum:sizeHint()提供的是最大是最小的,部件可以被压缩

image.png

4.9 MaximumMinimum

(1) 两个 Maximum 控件的布局

image.png

(2) 两个 Minimum 控件的布局

image.png

(3) A为Maximum,B为Minimum 控件的布局

image.png

4.10 Fixed:只能使用sizeHint()提供的值,无法伸缩,设置该值后,不管怎么布局都不会改变控件大小

image.png

image.png

5.layout的参数

LayoutLeftMargin:左间距 LayoutTopMargin:上间距 LayoutRightMargin:右间距 LayoutBottomMargin:下间距 LayoutSpacing:控件间距

5.1设置初始状态

间距都默认为0 image.png

image.png

5.2设置间距

设置左,上,右,下,控件间距都为20 image.png

image.png

5.3stretch设置的是控件在布局管理器中所占的比例

设置左PushButton为3,弹簧为2,右PushButton为1

image.png

image.png