QT設計器。移動和調整部件的大小，同時尊重視窗的重新縮放PyQT5 -有解無憂

TLDR: QT Designer 不允許我在尊重視窗比例的情況下移動和調整部件的大小。我想讓最右邊的按鈕在從圖片1拖到圖片2時移近視窗的邊緣，也就是保持比例。

我正在使用 PyQT5 和 QT Designer。我正試圖手動組織（移動&調整）我的部件，但我的兩種方法（接下來解釋）都失敗了。

當我使用網格布局時，我可以通過拖動視窗的邊緣來改變視窗的大小來擴展部件（正如預期的那樣......太棒了！）。但是當我使用布局時，我無法改變小部件的相對位置。在使用布局時，我也不能拖動單個小組件的邊緣來調整其在視窗中的大小（很不爽，但對于構建我的 UI 來說卻很重要）。

反過來說，當我不使用任何布局時，我可以自由地移動和調整單個部件的大小（耶！）。但如果不使用布局，我的小組件將不再根據視窗大小進行調整。

我的問題是，我如何能在 QT Designer 中移動和調整部件的大小？我認為我可以在 QT Designer 本身中做到這一點，而不是依賴 PyQT5，因為這甚至會使微小的變化變得復雜，而且拖放不是 QT Designer 的目的？

下面是幾張截圖，以顯示我的意思。前兩張照片顯示了在沒有布局的情況下發生的情況。我把視窗變大了，但我的小部件仍留在相同的位置上，尺寸也相同。第三張截圖顯示了我采用網格布局時的情況。我無法調整任何小組件的大小，也無法移動它們。

。

換句話說，是否有一種更有效的方法來使用 QT Designer 移動和調整大小，以解決這兩個故障？

我希望在將最右邊的按鈕從圖片 1 拖動到 2 時，讓它向視窗邊緣移動，也就是保持比例。

。

uj5u.com熱心網友回復：

如果你想實作比例，那么：

使用額外的QWidgets（默認情況下是不可見的，但對于我的演示，我將設定背景顏色）或QSpacerItem,
。
使用符合條件的拉伸因子，并且
將所有 widgets 的 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"/span>>
 <class>MainWindow</class> 
 < widget class="QMainWindow" name="MainWindow">
  <property name="geometry">/span>
   <rect>/span>
    <x> 0</x>
    <y>0</y>/span>
    <width>/span>593</width>/span>
    <height>439</height>
   </rect>/span>
  </property>/span>
  <property name="windowTitle">/span>
   <string>/span>MainWindow</string>/span>
  </property>/span>
  < widget class="QWidget" name="centralwidget">/span>
   < layout class="QGridLayout" name="gridLayout"> 
    < item row="0" column="1"> 
     < widget class="QWidget"/span> name="top"/span> native="true"/span>> 
      <property name="sizePolicy"/span>>
       < sizepolicy hsizetype="Ignored" vsizetype="Ignored"> 
        <horstretch>0</horstretch>/span>
        <verstretch>50</verstretch>
       </sizepolicy>/span>
      </property>/span>
      <property name="styleSheet">/span>
       <string notr="true">/span>background-color: rgb(85, 255, 127);</string> 
      </property>/span>
     </widget>/span>
    </item>/span>
    < item row="1" column="0"> 
     < widget class="QWidget"/span> name="left"/span> native="true"/span>> 
      <property name="sizePolicy"/span>>
       < sizepolicy hsizetype="Ignored" vsizetype="Ignored"> 
        <horstretch>/span>50</horstretch>/span>
        <verstretch>0</verstretch>
       </sizepolicy>/span>
      </property>/span>
      <property name="styleSheet">/span>
       <string notr="true">/span>background-color: rgb(255, 0, 0);</string> 
      </property>/span>
     </widget>/span>
    </item>/span>
    < item row="1" column="1"> 
     < widget class="QPushButton" name="pushButton">
      <property name="sizePolicy"/span>>
       < sizepolicy hsizetype="Ignored" vsizetype="Ignored"> 
        <horstretch>/span>40</horstretch>/span>
        <verstretch>40</verstretch>
       </sizepolicy>/span>
      </property>/span>
      <property name="text"/span>>
       <string>/span>PushButton</string>/span>
      </property>/span>
     </widget>/span>
    </item>/span>
    < item row="1" column="2"> 
     < widget class="QWidget"/span> name="right"/span> native="true"/span>> 
      <property name="sizePolicy"/span>>
       < sizepolicy hsizetype="Ignored" vsizetype="Ignored"> 
        <horstretch> 110</horstretch>
        <verstretch>0</verstretch>
       </sizepolicy>/span>
      </property>/span>
      <property name="styleSheet">/span>
       <string notr="true">/span>background-color: rgb(255, 85, 255);</string> 
      </property>/span>
     </widget>/span>
    </item>/span>
    < item row="2" column="1">
     < widget class="QWidget"/span> name="bottom"/span> native="true"/span>> 
      <property name="sizePolicy"/span>>
       < sizepolicy hsizetype="Ignored" vsizetype="Ignored"> 
        <horstretch>/span>0</horstretch>/span>
        <verstretch> 110</verstretch>
       </sizepolicy>/span>
      </property>/span>
      <property name="styleSheet">/span>
       <string notr="true">/span>background-color: rgb(85, 255, 255);</string> 
      </property>/span>
     </widget>/span>
    </item>/span>
   </layout>/span>
  </widget>/span>
  < widget class="QMenuBar" name="menubar">
   <property name="geometry">/span>
    <rect>/span>
     <x> 0</x>
     <y>0</y>/span>
     <width>/span>593</width>/span>
     <height> 28</height>
    </rect>/span>
   </property>/span>
  </widget>/span>
  < widget class="QStatusBar" name="statusbar"/> >。
 </widget>/span>
 <resources/>/span>
 <connections/>>
</ui>

uj5u.com熱心網友回復：

雖然過度擁擠的UI通常不是一個好主意，但擁有大量的空閑空間也很少有好結果。布局管理器考慮到了這一方面，并試圖通過讓小部件盡可能多地使用空間來優化可用空間（假設它們可以被調整大小）。也就是說，顯然有很多情況下，擁有大量空間的大視窗是沒有問題的（例如，一個足夠大的登錄訪問界面，以引起人們的注意）。

需要了解的是，布局管理器，正如其名稱所言，管理布局，它通過大量復雜的計算來實作，基于它所安裝的 widget 以及所有子專案的所有尺寸提示/政策/限制，遞回地進行。如果您對某些小組件應該如何調整大小有一些要求，您必須指定它們。

無論何時要創建任何界面，尤其是如果考慮到用戶體驗問題（應該如此），并且還有大量應按比例使用的空白空間，至少有兩個重要步驟：

準確了解在布局的 "正常 "條件下，小部件應如何放置（位置、尺寸和比例）；

。

第一點似乎很好解釋，但即使是創建一個考慮到使用布局的空區域的基本界面，也不是那么簡單。根據不同的情況，網格布局可能已經足夠，但在某些情況下，您可能需要使用嵌套布局。

在您的具體案例中，網格可能已經足夠了，但是為了確保適當的間距和比例將被保持，您需要使用間隔項。

我為您的情況準備了一個基本的 UI 示例：其比例可能并不完全正確，但這是一個開始。

這是它在放大時的樣子：

這是它在放大時的樣子

正如你所看到的，我添加了間隔物：在靠近邊緣的每個邊上有一個，這是為了確保保持適當的 "邊距 "而需要的，然后另外兩個是兩個按鈕之間的間隔物；由于網格變成了5x5，兩個中央間隔物的 "單元格 "位置可能在任何地方，只要垂直位置在中央行，水平位置在中央列。

現在，小部件和間隔的比例是通過以下方式實作的：

。

兩個按鈕都有一個Preferred尺寸策略（包括垂直和水平）；這確保布局知道，如果有足夠的空間，它可以讓它們變大，但不會讓它們占據所有的可用空間；
左上角按鈕的尺寸策略的拉伸為1（同樣，垂直和水平），而右下角的按鈕為2；通過這種方式，第二個按鈕將總是嘗試成為第一個按鈕寬度和高度的兩倍；

注意，當使用網格時，按鈕的行或列的伸展可以（有時應該）直接在布局中設定。還要考慮到邊緣的間隔物是基本的QSpacerItems，它的功能非常有限（最小寬度/高度和尺寸策略），如果你想要一個更大的比例的邊距，你必須在拉伸中設定它。另一種可能性是使用空的QWidgets來代替spacer.

。

基于上述情況，一個更好的選擇是實際設定網格布局的拉伸：

垂直（行）。 1, 2, 1, 4, 1。水平（列）。1, 2, 4, 4, 1

^{記住，拉伸值是相對比例，如果你想要更精確的尺寸，使用更大的值。}

顯然，你也可以為任何一個部件設定最大尺寸，以防你不想超過某個尺寸。

我將附上原始檔案（僅在小組件上設定了拉伸），所以我將讓你來改變這些值，看看會發生什么。

最后，請記住，如果你添加了另一個具有一個尺寸策略的部件，而這個尺寸策略不是Preferred或Ignored，布局將作出相應的反應。嘗試在現有按鈕的同一行或列的空網格中添加一個按鈕，你會看到結果。

下面是基本的UI：

<?xml version="1.0"/span> encoding="UTF-8"/span>?
<ui版本="4.0">
 <class> MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>806</width>
    <高度>507</height>
   </rect>
  </property>
  <property name="windowTitle"/span>>
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="Centralwidget">
   <布局 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" >
       <size>
        <width>40</width>
        <高度>20</height>
       </size>
      </property>
     </spacer>
    </item>
    <item row="2"/span> column="2"/span>>
     <spacer name="verticalSpacer_2">
      <property name="orientation">
       <enum>Qt::Vertical</enum>
      </property>
      <property name="sizeHint" stdset="0" >
       <size>
        <width>20</width>
        <高度>40</height>
       </size>
      </property>
     </spacer>
    </item>
    <item row="4"/span> column="3"/span>>
     <spacer name="verticalSpacer_3">
      <property name="orientation">
       <enum>Qt::Vertical</enum>
      </property>
      <property name="sizeHint" stdset="0" >
       <size>
        <width>20</width>
        <高度>40</height>
       </size>
      </property>
     </spacer>
    </item>
    <item row="3"/span> column="4"/span>>
     <spacer name="horizontalSpacer_3">
      <property name="orientation">
       <enum>Qt::Horizontal</enum>
      </property>
      <property name="sizeHint" stdset="0" >
       <size>
        <width>40</width>
        <高度>20</height>
       </size>
      </property>
     </spacer>
    </item>
    <item row="1"/span> column="1"/span>>
     <widget class="QPushButton" name="pushButton" >
      <property name="sizePolicy"/span>>。
       <sizepolicy hsizetype="Preferred" vsizetype="Preferred">。
        <horstretch>1</horstretch>
        <verstretch>1</verstretch>
       </sizepolicy>
      </property>
      <property name="text"/span>>
       <string>PushButton</string>
      </property>
     </widget>
    </item>
    <item row="3"/span> column="3"/span>>
     <widget class="QPushButton" name="pushButton_2" >
      <property name="sizePolicy"/span>>。
       <sizepolicy hsizetype="Preferred" vsizetype="Preferred">。
        <horstretch>2</horstretch>
        <verstretch>2</verstretch>
       </sizepolicy>
      </property>
      <property name="text"/span>>
       <string>...</string>
      </property>
     </widget>
    </item>
    <item row="1"/span> column="0"/span>>
     <spacer name="horizontalSpacer">。
      <property name="orientation">
       <enum>Qt::Horizontal</enum>
      </property>
      <property name="sizeHint" stdset="0" >
       <size>
        <width>40</width>
        <高度>20</height>
       </size>
      </property>
     </spacer>
    </item>
    <item row="0"/span> column="1"/span>>
     <spacer name="verticalSpacer">。
      <property name="orientation">
       <enum>Qt::Vertical</enum>
      </property>
      <property name="sizeHint" stdset="0" >
       <size>
        <width>20</width>
        <高度>40</height>
       </size>
      </property>
     </spacer>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry" >
    <rect>
     <x>0</x>
     <y>0</y>
     <width>806</width>
     <高度>24</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <資源/>
 <連接/>
</ui>

雖然從根本上說只有三個基本的布局管理器（QFormLayout和QStackedLayout有點不同），而且它們非常簡單，但學習如何使用它們需要大量的時間和經驗。另外，了解尺寸提示和策略的作業方式對于更好地理解它們的行為是非常重要的。我強烈建議你在設計器中做大量的實驗，也可以通過從代碼中創建UI。出于學習的目的，你可以在Designer中創建UI，使用pyuic匯出，并研究其內容。但是，請記住，不要永遠，永遠編輯這些檔案用于生產代碼。在關于使用Designer的官方指南中閱讀更多關于其使用的資訊。

。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/315124.html

標籤：

上一篇：如何監控谷歌云平臺上用戶對Firestore資料庫的訪問

下一篇：如何使這個選擇器在影像中與翩翩起舞