虽然过度拥挤的UI通常不是一个好主意,但有大量的空白空间也很少是更好的。版面设计经理考虑到了这一点,并努力做到
优化
通过使小部件尽可能多地使用空间,来增加可用空间(假设它们可以被调整大小)。
也就是说,显然有很多情况下,一个有很多空间的大窗口是可以的(例如,一个足够大的登录访问界面,以引起注意)。
需要了解的是,布局管理器,正如其名称所言。
管理
的布局,并且它通过以下方式实现
很多
复杂的计算,基于它所安装的小部件和所有的尺寸提示/政策/限制的
所有
它的子项目,递归地。如果你对某些小部件应该如何调整大小有一些要求,你必须指定它们。
Whenever
任何
interface is going to be created, and especi所有y if UX matters are being considered (as they should) and there's also 很多 of empty space that should be proportion所有y used, there are at least two important steps:
exactly understand how widgets should be placed (position, size and proportions) in "normal" conditions on a layout;
think about those sizes and position should change when the container is resized;
第一点似乎很好解释,但即使要创建一个考虑到使用布局的空白区域的基本界面,也不是那么简单。
根据不同的情况,网格布局可能已经足够,但在某些情况下,你可能需要使用
nested
布局。
在你的具体案例中,一个网格就足够了,但为了确保保持适当的间距和比例,你需要使用
垫片项目
.
我为你的情况准备了一个基本的用户界面例子:比例可能不完全正确,但这是一个开始。
下面是它在正常尺寸下的样子。
而这就是它变大后的样子。
正如你所看到的,我添加了垫片:有一个用于
每个
side near the edges, which is required to ensure that a proper "border margin" is maintained, then another two for the spacing between the two buttons; since the grid becomes 5x5, the "cell" position of the two central spacers might be in 任何 place, as long as the vertical is in the central row and the horizontal in the central column.
现在,小部件的比例和间隔是通过以下方式实现的。
both buttons have a
Preferred
size policy (both vertical and horizontal); this ensures that the layout knows that it can make them bigger if there's enough space for them, but without making them occupy
所有
the available space;
the size policy of the top left button has a
stretch
of 1 (again, both vertical and horizontal), while it's 2 for the bottom right one; in this way, they second button will always
try
to be twice the width and height of the first;
the layout (accessible by clicking on the central widget) has also a column stretch of 2 set for the third column (the one in the middle); considering the above, the result will be that the layout will try to make the space in the middle as much wide as the bottom right button;
注意,按钮的行或列拉伸可以(有时是
should
)在使用网格时可以直接设置在布局上。
还要考虑到边缘的间隔物是基本的QSpacerItems,它的功能非常有限(最小宽度/高度和尺寸策略),如果你想要一个更大的比例的空白,你必须在拉伸中设置它。另一种可能性是使用空的QWidgets来代替间隔器。
Based on the above, a better choice is to actu所有y set the stretches of the grid layout:
vertical (rows): 1, 2, 1, 4, 1
horizontal (columns): 1, 2, 4, 4, 1
请记住,拉伸值是相对比例,如果你想要更精确的尺寸,请使用更大的值。
Obviously, you could also set maximum sizes for 任何 of the widgets, in case you don't want to exceed a certain size.
我将附上原始文件(只在小部件上设置了拉伸),所以我将留给你来改变这些值,看看会发生什么。
Fin所有y, remember that if you add another widget that has one的大小政策不是Preferred或Ignored,布局会做出相应的反应。试着在现有按钮的同一行或列的空网格中添加一个按钮,你就会看到结果。
这里是基本的用户界面。
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<x>0</x>
<y>0</y>
<width>806</width>
<height>507</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralwidget">
<layout class="QGridLayout" name="gridLayout" columnstretch="0,0,2,0,0">
<item row="1" column="2">
<spacer name="horizontalSpacer_2">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item row="2" column="2">
<spacer name="verticalSpacer_2">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
<item row="4" column="3">
<spacer name="verticalSpacer_3">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
<item row="3" column="4">
<spacer name="horizontalSpacer_3">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item row="1" column="1">
<widget class="QPushButton" name="pushButton">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Preferred">
<horstretch>1</horstretch>
<verstretch>1</verstretch>
</sizepolicy>
</property>
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
<item row="3" column="3">
<widget class="QPushButton" name="pushButton_2">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Preferred">
<horstretch>2</horstretch>
<verstretch>2</verstretch>
</sizepolicy>
</property>
<property name="text">
<string>...</string>
</property>
</widget>
</item>
<item row="1" column="0">
<spacer name="horizontalSpacer">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item row="0" column="1">
<spacer name="verticalSpacer">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
<widget class="QMenuBar" name="menubar">
<property name="geometry">
<x>0</x>
<y>0</y>
<width>806</width>
<height>24</height>
</rect>
</property>
</widget>
<widget class="QStatusBar" name="statusbar"/>
</widget>
<resources/>