QT设计器。移动和调整部件的大小,同时尊重窗口的重新缩放 PyQT5

0 人关注

TLDR: QT Designer不允许我在尊重窗口比例的情况下移动和调整部件的大小。我想让最右边的按钮在从图片1拖动到2时靠近窗口的边缘,也就是保持比例。

I am using PyQT5 with QT Designer. I am trying to manually organize (move & resize) my widgets, but both of my approaches (explained next) fail.

当我使用网格布局时,我可以通过拖动窗口的边缘来改变窗口的大小来缩放小部件(正如预期的那样...太好了!)。但是当我使用布局时,我不能改变小部件的相对位置。当使用布局时,我也不能拖动单个小部件的边缘来调整它在窗口中的大小(无奈,但对建立我的用户界面来说有点重要)。

反过来说,当我不使用任何布局时,我可以自由地移动和调整单个部件的大小(耶!)。但如果不使用布局,我的小部件就不再能适应窗口的大小。

My question is 我怎么能在QT设计器中移动和调整部件的大小?我想我可以在QT设计器中做到这一点,而不是依赖PyQT5,因为这将使小的变化变得复杂,而且拖放不是QT设计器的目的吗?

附上几张截图来说明我的意思。前两张照片显示了在没有布局的情况下发生的情况。我把窗口变大了,但我的小部件仍在同一位置,尺寸不变。第三张截图显示了我采用网格布局时的情况。我不能调整任何小部件的大小,也不能移动它们。

换句话说,有没有一种更有效的方法来用QT Designer移动和调整大小,以解决这两个故障?

我想让最右边的按钮在从图片1拖到2时靠近窗口的边缘,也就是保持比例。

5 个评论
你是在问如何能有一个类似于第一张图片的布局(所以,用 lots 空的空间),但在调整大小时保持比例?
你的问题很笼统,你能不能指出你希望在特定情况下获得的东西,也就是小部件在不同窗口尺寸下应该如何显示的图像,因为你的要求目前是混乱的,我理解布局的可能限制,但我不能理解你期望的确切行为。
@musicamante 这正是我想做的。我想让最右边的按钮在从图片1拖到2时靠近窗口的边缘,也就是保持比例。
@Gnumbertester 如我所想。我已经在回答这个问题了,但请考虑一下,为了将来的参考,对想要的结果有一个明确的解释,确实有助于我们更好(更快)地理解问题所在,以及我们如何才能最终回答。
@Gnumbertester 假设初始窗口的大小为200x200,按钮的位置为50x50,大小为40x40,如果窗口的大小变为300x250,那么在这种情况下按钮的大小和位置应该是什么?
python
user-interface
pyqt5
resize
qt-designer
Gnumbertester
Gnumbertester
发布于 2021-09-13
2 个回答
eyllanesc
eyllanesc
发布于 2021-09-13
已采纳
0 人赞同

如果你想实施这个比例,那么。

  • 使用额外的QWidgets(默认情况下是不可见的,但对于我的演示,我将设置背景颜色)或QSpacerItem。

  • 使用符合条件的拉伸系数,并且

  • 将所有部件的sizePolice设置为Ignored。

    网格布局将使用这些信息来重新调整几何图形的大小。

    我的演示窗口的尺寸是200x200,按钮的位置是50x50,尺寸是40x40。

  • 对于左侧的小组件,你必须将水平拉伸系数设置为40

  • 对于右侧的中央,你必须将水平拉伸系数设为50,水平拉伸系数设为50。

  • 对于右侧的小组件,你必须将水平拉伸系数设置为90(200 - 50 - 40)

  • 对于顶面的小组件,你必须将垂直拉伸系数设置为50。

  • 对于底部的小部件,你必须将垂直拉伸系数设置为90(200-50-40)。

    <?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>593</width>
        <height>439</height>
       </rect>
      </property>
      <property name="windowTitle">
       <string>MainWindow</string>
      </property>
      <widget class="QWidget" name="centralwidget">
       <layout class="QGridLayout" name="gridLayout">
        <item row="0" column="1">
         <widget class="QWidget" name="top" native="true">
          <property name="sizePolicy">
           <sizepolicy hsizetype="Ignored" vsizetype="Ignored">
            <horstretch>0</horstretch>
            <verstretch>50</verstretch>
           </sizepolicy>
          </property>
          <property name="styleSheet">
           <string notr="true">background-color: rgb(85, 255, 127);</string>
          </property>
         </widget>
        </item>
        <item row="1" column="0">
         <widget class="QWidget" name="left" native="true">
          <property name="sizePolicy">
           <sizepolicy hsizetype="Ignored" vsizetype="Ignored">
            <horstretch>50</horstretch>
            <verstretch>0</verstretch>
           </sizepolicy>
          </property>
          <property name="styleSheet">
           <string notr="true">background-color: rgb(255, 0, 0);</string>
          </property>
         </widget>
        </item>
        <item row="1" column="1">
         <widget class="QPushButton" name="pushButton">
          <property name="sizePolicy">
           <sizepolicy hsizetype="Ignored" vsizetype="Ignored">
            <horstretch>40</horstretch>
            <verstretch>40</verstretch>
           </sizepolicy>
          </property>
          <property name="text">
           <string>PushButton</string>
          </property>
         </widget>
        </item>
        <item row="1" column="2">
         <widget class="QWidget" name="right" native="true">
          <property name="sizePolicy">
           <sizepolicy hsizetype="Ignored" vsizetype="Ignored">
            <horstretch>110</horstretch>
            <verstretch>0</verstretch>
           </sizepolicy>
          </property>
          <property name="styleSheet">
           <string notr="true">background-color: rgb(255, 85, 255);</string>
          </property>
         </widget>
        </item>
        <item row="2" column="1">
         <widget class="QWidget" name="bottom" native="true">
          <property name="sizePolicy">
           <sizepolicy hsizetype="Ignored" vsizetype="Ignored">
            <horstretch>0</horstretch>
            <verstretch>110</verstretch>
           </sizepolicy>
          </property>
          <property name="styleSheet">
           <string notr="true">background-color: rgb(85, 255, 255);</string>
          </property>
         </widget>
        </item>
       </layout>
      </widget>
      <widget class="QMenuBar" name="menubar">
       <property name="geometry">
         <x>0</x>
         <y>0</y>
         <width>593</width>
         <height>28</height>
        </rect>
       </property>
      </widget>
      <widget class="QStatusBar" name="statusbar"/>
     </widget>
     <resources/>
     <connections/>
        
  • musicamante
    musicamante
    发布于 2021-09-13
    0 人赞同

    虽然过度拥挤的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的大小政策不是PreferredIgnored,布局会做出相应的反应。试着在现有按钮的同一行或列的空网格中添加一个按钮,你就会看到结果。

    这里是基本的用户界面。

    <?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/>