3.PyQt5 UI布局管理之自底而上设计

系列文章目录

---

---

前言

新手在处理GUI界面遇到第一个拦路虎就是UI布局管理。

注： 文中用到的具体参数和类需要自行去看基础教程。
学习思路： 按种类分类学习，触类旁通。

---

一、布局使用到控件、参数

布局要结合以下几种类、参数进行管理配置

1. laout布局器（类）
2. 最小宽度、最小高度、最大宽度、最大高度
3. 左右弹簧、上下弹簧
4. 左右居中、靠左、靠右

二、布局小小建议

多留白、少用框、风格要统一
初级使用者尽量采用对齐处理：控件之间对齐。

三、自底而上设计

先把需要的控件拖入设计师（Qt Desiger）中，按功能区域、逻辑区域放在一个片区内。之后再用laout布局器进行布局。
底指：内部控件之间使用laout进行布局管理
上指：'底’这个组合再次使用laout进行布局管理

四、laout布局器

laout布局器都有边距、间距概念，刚开始设计使用默认值即可。后续根据实际情况进行调整。 打开Qt Desiger设计器，新建一个widget页面，从左边拖一个laout到页面中。

左边控件选择如下：

右边显示laout属性类似如下：

布局器使用方法： 通用做法是先先拖拽控件到页面中，之后，根据页面布局要求选择不同种类布局器。如果觉得布局用错，可以打破布局从新布局。
打破布局： 点击布局器，右击–》lay out --》break laout

边距、间距：刚开始采用默认值即可。

注：页面中的边距、间距尽量保持一致，不然会出现错位感觉。页面切换过程也会感觉元素跳动。

布局器使用： 按住ctrl键鼠标多选多个控件，右击–》lay out --》选择布局方式

五、弹簧的使用

弹簧可以让布局器内控件靠近某一个方向（最左、最右，最上、最小）。

六、控件参数值设置

控件宽度设置有最小（宽度、高度）、最大（宽度、高度）四种

例如：设置最宽为60

七、弹簧、布局器、控件宽度、控件高度组合使用

示例图如下：

把下面代码保存为‘实例.ui’，在设计器中打开就如上图

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>739</width>
    <height>621</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout">
   <item>
    <layout class="QHBoxLayout" name="horizontalLayout">
     <item>
      <layout class="QGridLayout" name="gridLayout">
       <item row="0" column="1">
        <widget class="QLineEdit" name="lineEdit">
         <property name="maximumSize">
          <size>
           <width>120</width>
           <height>16777215</height>
          </size>
         </property>
         <property name="text">
          <string>最宽设置为120</string>
         </property>
        </widget>
       </item>
       <item row="0" column="0">
        <widget class="QLabel" name="label">
         <property name="maximumSize">
          <size>
           <width>60</width>
           <height>16777215</height>
          </size>
         </property>
         <property name="text">
          <string>名称:</string>
         </property>
         <property name="alignment">
          <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
         </property>
        </widget>
       </item>
       <item row="1" column="1">
        <widget class="QLineEdit" name="lineEdit_2">
         <property name="maximumSize">
          <size>
           <width>120</width>
           <height>16777215</height>
          </size>
         </property>
         <property name="text">
          <string>最宽设置为120</string>
         </property>
        </widget>
       </item>
       <item row="1" column="0">
        <widget class="QLabel" name="label_2">
         <property name="maximumSize">
          <size>
           <width>60</width>
           <height>16777215</height>
          </size>
         </property>
         <property name="text">
          <string>电话：</string>
         </property>
         <property name="alignment">
          <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
         </property>
        </widget>
       </item>
       <item row="0" column="2">
        <spacer name="horizontalSpacer">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
      </layout>
     </item>
    </layout>
   </item>
   <item>
    <widget class="QTextEdit" name="textEdit_2">
     <property name="html">
      <string>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0//EN&quot; &quot;http://www.w3.org/TR/REC-html40/strict.dtd&quot;&gt;
&lt;html&gt;&lt;head&gt;&lt;meta name=&quot;qrichtext&quot; content=&quot;1&quot; /&gt;&lt;style type=&quot;text/css&quot;&gt;
p, li { white-space: pre-wrap; }
&lt;/style&gt;&lt;/head&gt;&lt;body style=&quot; font-family:'SimSun'; font-size:9pt; font-weight:400; font-style:normal;&quot;&gt;
&lt;p style=&quot; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;尽可能最宽、尽可能最高&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</string>
     </property>
    </widget>
   </item>
   <item>
    <widget class="QTextEdit" name="textEdit">
     <property name="maximumSize">
      <size>
       <width>16777215</width>
       <height>200</height>
      </size>
     </property>
     <property name="html">
      <string>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0//EN&quot; &quot;http://www.w3.org/TR/REC-html40/strict.dtd&quot;&gt;
&lt;html&gt;&lt;head&gt;&lt;meta name=&quot;qrichtext&quot; content=&quot;1&quot; /&gt;&lt;style type=&quot;text/css&quot;&gt;
p, li { white-space: pre-wrap; }
&lt;/style&gt;&lt;/head&gt;&lt;body style=&quot; font-family:'SimSun'; font-size:9pt; font-weight:400; font-style:normal;&quot;&gt;
&lt;p style=&quot; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;尽可能最宽、最高设置为200&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</string>
     </property>
    </widget>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>