firemail

标题: qt窗口拆分设计 [打印本页]

作者: raspberry 时间: 2018-3-31 11:05
标题: qt窗口拆分设计
本帖最后由 raspberry 于 2018-3-31 11:56 编辑

分割窗口QSplitter类、停靠窗口QDockWidget类、堆栈窗体QStackedWidget类

boxlayout 设置
layoutSpacing 间隔
layoutStretch 左右上下拆分比例

如果要删除外面不用的布局，可以在右侧对象中选中此布局右键打破布局，就删除了，在控件窗体中选择不方便

分裂器的引入

作者: raspberry 时间: 2018-3-31 11:11

结合控件的SizePolicy属性，来控制布局管理中的控件的尺寸自适应方式。

控件的sizePolicy说明控件在布局管理中的缩放方式。Qt提供的控件都有一个合理的缺省sizePolicy，但是这个缺省值有时不能适合所有的布局，开发人员经常需要改变窗体上的某些控件的sizePolicy。一个QSizePolicy的所有变量对水平方向和垂直方向都适用。下面列举了一些最长用的值：

A. Fixed：控件不能放大或者缩小，控件的大小就是它的sizeHint。

B. Minimum：控件的sizeHint为控件的最小尺寸。控件不能小于这个sizeHint，但是可以

放大。

C. Maximum：控件的sizeHint为控件的最大尺寸，控件不能放大，但是可以缩小到它的最小

的允许尺寸。

D. Preferred：控件的sizeHint是它的sizeHint，但是可以放大或者缩小

E. Expandint：控件可以自行增大或者缩小

注：sizeHint（布局管理中的控件默认尺寸，如果控件不在布局管理中就为无效的值）

https://www.cnblogs.com/emouse/archive/2013/05/19/3087708.html

作者: raspberry 时间: 2018-3-31 11:53
本帖最后由 raspberry 于 2018-3-31 11:55 编辑

https://blog.csdn.net/lfwh1517/article/details/78086967
-- 界面初步设计
14 Apr 04 17:05
之前的一篇可以算是前置知识的快速介绍。从这篇开始就是正式地编写应用了。其实是因为之前我还没有想好要做什么应用。
为了兼顾举举例子和真实性，选了这么一个应用：PQ笔记。基本的功能如下：

笔记支持富文本粘贴
按文件夹分类笔记

##画出大概的样子先来一个大概的设计图。

就是一个规规矩矩的三栏布局，左边是笔记本的目录树，中间是文档列表，右边是文档内容。这个只是现阶段的大概构思，最终做出来不一定是这样的，有可能在一些细节上会有所更改，但是整体界面几乎都可以定下来了。
打开ui_mainwindow.ui，从Containers里拉出三个Widget，分别命名为widgetLeft、widgetMiddle和widgetRight。这就是左中右三栏的容器。
在左边栏中拖入一个pushButton和一个treeView，分别对应设计图上的两个控件。注意，如果拖放位置正确（也就是QtDesigner知道你要将控件放进左边栏里面），你会看到左边栏widgetLeft会变暗了。

对着左边栏空白处点击右键，依次选择布局 -> 垂直布局。

可以看到控件非常听话地从上到下排列好了。这里为widget中的控件快速设定了一个布局，相当于告诉widget中的控件该如何显示自己。
注意，这个"布局"并不是widget中的属性，而是独立的另一个类QLayout及其子类的实例。在对象查看器中点选widgetLeft后在下面的属性编辑器中可以看到有一栏Layout，这个才是控件们服服帖帖的原因。只不过，当为一个widget选择了布局之后，QtDesigner自动给这个widget增加了一个布局，然后将widget里面的子控件加入到布局中，于是子控件们都知道应该如何显示了。

同理，在中间控件widgetMiddle中放入一个LineEdit和一个ListView，在右边控件widgetRight中放入TextEdit，并且设置好布局。
现在使用快捷键Ctrl + r预览，发现拉伸窗口的时候，里面的三栏控件没有任何反应，这可不是想要的效果。

注意整个窗口其实也是一个widget，同样需要为其设置布局。

再预览，出现一个新问题：三个栏不能各自调整大小。

要实现这个功能需要另外一种布局管理，分裂器（QSplitter）。分裂器允许元素调整各自的大小。
先打破布局。

按着ctrl选择三个分栏widget，注意是分栏widget，再在其中一个widget的空白处点击右键，在布局中可以看到有使用分裂器水平布局。

最后为窗口应用垂直布局就可以了。预览的时候当鼠标移动到分栏控件之间会发现可以调整大小了，同时调整窗口也能影响到三个分栏的大小。
从实际来说，调整窗口的大小的时候，更多是希望调整右边栏即文档显示栏的大小。
QSplitter还能设置一些细节。
找到QSplitter的属性：

orientation，控件排列方向，水平还是垂直
opaqueResize，是否实时显示调整
handleWidth，调整条的宽度
childrenCollapsible，控件调整成过小时是否会隐藏

似乎没有什么可以用的。
然而，问题的解决方法却不在QSplitter上，而在其子组件上。
实际上，几乎所有的widget，都有一个sizePolicy的属性，而在此属性中，有子属性Horizontal Stretch和Vertical Stretch，对应中文水平伸展和垂直伸展，决定水平和垂直的缩放比例。

在属性编辑器中，可以看到水平伸展的值默认为0，也就是左栏：中栏：右栏 = 0：0：0，现在将右栏的水平伸展值设为1，也就是左栏：中栏：右栏 = 0：0：1。
预览一下，效果就出来了。

原理应该是这样的，在窗口缩放的时候，默认的配置是 0：0：0，表示变化被平均分配到两个组件上了。而修改后子组件们根据已经设定好的比例 0：0：1，所有的因窗口缩放而引起的大小变化全部被分配到文档编辑组件上了。
##布局管理（Layout Management）布局可以在Widget Box里面看到，提供的有四个布局：

Vertical Layout
Horizontal Layout
Grid Layout
Form Layout

分别是垂直布局、水平布局、网格布局和表单布局。当然还有另外的自动布局，但是这四个基本能满足普通需要。
垂直/水平布局不用解释了。网格布局是类似表格，一个控件占据一个单元格位置；表单布局是类似平常表单，从上到下排成多行，每行分两栏，左边放标签控件，右边放输入框控件。
##菜单在新建一个窗体的时候，QtDesigner就已经为窗体添加上了QMenuBar，在窗体的标题栏下面可以看到一个经典的菜单栏，上面有在这里输入字样。只要双击并填上你希望显示的菜单名字，QtDesigner会自动生成一个菜单，在下拉列表上继续双击在这里输入将会自动生成QAction。QAction才是真正代表着菜单里的某个动作。
在下拉菜单里面，还能看到一个添加分隔符，是添加一个分割线的意思。当生成了一个QAction之后，可以看到右边有一个类似加号的图标，是将当前QAction转化为QMenu的意思，换句话说可以生成子级菜单。子级菜单的操作跟上面描述的菜单操作一模一样。

另外给各个action对象修改好名字，以供日后调用。

作者: Qter 时间: 2018-4-6 10:28
本帖最后由 Qter 于 2018-4-6 11:16 编辑

QSplitter分割器分割比例设定
QSplitter *spliter = new QSplitter(Qt::Horizontal,this);

spliter->addWidget(A);

spliter->addWidget(B);

spliter->setStretchFactor(0,3);

spliter->setStretchFactor(1,7);

即可把A、B以3：7的比例分割

setStretchFactor ( int index, int stretch )

// ui->uiLeftStackedWidget->setMargin(1);// ui->uiLeftStackedWidget->setSpacing(1);ui->uiLeftStackedWidget->setContentsMargins(0,0,0,0);

作者: Qter 时间: 2018-4-6 11:53

QStackedWidget里面的控件不能充满整个QStackedWidget,在里面加个垂直布局，设置布局的下面属性，就可以充满了，ui无法操作，就直接修改ui文本文件

<widget class="QWidget" name="page_3">
<layout class="QVBoxLayout" name="verticalLayout_3">
<property name="spacing">
<number>0</number>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
xxxxxxx
</item>
</layout>
</widget>

作者: Qter 时间: 2020-1-27 10:01
5 子窗口比例

默认情况下，QSplliter中各个子窗口的大小等比例的，但是很多时候我们并不希望这样，因此参考资料[5][6][7][8]都提到如何解决这个问题，但都是直接通过C++代码的方式去实现的。这里主要介绍如何通过Qt Creator的“设计”界面来达到同样的目的。

选中QSplitter中的子窗口，然后设置其sizePolicy属性如下图所示

图5 缩放因子设置

分别将QSplliter中各子窗口的“水平伸展”值设置为非零的值。此值越大，表示对应的子窗口在QSplliter中的分割比例越大(分割效果要运行程序时才呈现出来)。
https://www.cnblogs.com/huty/p/8518160.html

欢迎光临 firemail (http://firemail.wang:8088/)