qt设计如何创建彩色面板？答案

【问题标题】：qt designed how to create colored panels?qt设计如何创建彩色面板？
【发布时间】：2020-01-13 22:14:18
【问题描述】：

Qt5 QT 设计器 5.11.2。最终，底层程序将为 PyQt 编写。

这个 Photoshop 模型展示了我想要完成的工作。我希望我的主窗口的背景按背景颜色分成几个部分。小部件包含在各种水平和垂直布局中。布局本身没有视觉属性，例如背景颜色。我想在小部件后面放置标签或框架，但 QT 设计器将它们合并到布局中并移动内容，以便添加的小部件不会与之前的小部件重叠。

我应该怎么做？

【问题讨论】：

@eyllanesc -- 我知道我们不应该说“谢谢”，但我想感谢您为创建这个答案付出的巨大努力。这很有帮助。

标签： python pyqt pyqt5 qt-designer

【解决方案1】：

正如布局所指出的，它们不是视觉元素，因此在这种情况下，您可以使用 QWidget 作为容器并设置背景颜色。要管理大小关系，您可以使用布局的每一列的 strecth。

考虑到上述情况，我创建了以下设计：

<?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>614</width>
    <height>425</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout" stretch="0,1">
   <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>
    <layout class="QHBoxLayout" name="horizontalLayout" stretch="0,0,0,0">
     <property name="leftMargin">
      <number>6</number>
     </property>
     <property name="topMargin">
      <number>6</number>
     </property>
     <property name="rightMargin">
      <number>6</number>
     </property>
     <property name="bottomMargin">
      <number>6</number>
     </property>
     <item>
      <widget class="QPushButton" name="pushButton">
       <property name="text">
        <string>Start Up</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QPushButton" name="pushButton_2">
       <property name="text">
        <string>Scan</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QPushButton" name="pushButton_3">
       <property name="text">
        <string>Reports</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QPushButton" name="pushButton_4">
       <property name="text">
        <string>Shut Down</string>
       </property>
      </widget>
     </item>
    </layout>
   </item>
   <item>
    <layout class="QHBoxLayout" name="horizontalLayout_3" stretch="0,1">
     <property name="spacing">
      <number>0</number>
     </property>
     <item>
      <widget class="QWidget" name="widget" native="true">
       <property name="styleSheet">
        <string notr="true">.QWidget{background-color: rgb(143, 238, 234);}</string>
       </property>
       <layout class="QHBoxLayout" name="horizontalLayout_2">
        <item>
         <widget class="QPushButton" name="pushButton_5">
          <property name="text">
           <string>Operator</string>
          </property>
         </widget>
        </item>
       </layout>
      </widget>
     </item>
     <item>
      <widget class="QWidget" name="widget_2" native="true">
       <property name="styleSheet">
        <string notr="true">.QWidget{background-color: rgb(159, 215, 236);}

QRadioButton {
    color:   black;
}
QRadioButton::indicator {
    width:                  10px;
    height:                 10px;
    border-radius:          7px;
}

QRadioButton::indicator:checked {
    background-color:       black;
    border:                 2px solid white;
}

QRadioButton::indicator:unchecked {
    background-color:       white;
    border:                 2px solid white;
}

QCheckBox::indicator {
    width:                  10px;
    height:                 10px;
    border-radius:       2px;
}
QCheckBox::indicator:checked {
    background-color:       black;
    border:                 2px solid white;
}

QCheckBox::indicator:unchecked {
    background-color:       white;
    border:                 2px solid white;
}
</string>
       </property>
       <layout class="QVBoxLayout" name="verticalLayout_2">
        <item>
         <layout class="QGridLayout" name="gridLayout" columnstretch="0,0">
          <property name="leftMargin">
           <number>20</number>
          </property>
          <property name="topMargin">
           <number>20</number>
          </property>
          <property name="rightMargin">
           <number>20</number>
          </property>
          <property name="bottomMargin">
           <number>20</number>
          </property>
          <item row="2" column="0">
           <widget class="QLabel" name="label">
            <property name="maximumSize">
             <size>
              <width>132</width>
              <height>16777215</height>
             </size>
            </property>
            <property name="text">
             <string>&lt;html&gt;&lt;head/&gt;&lt;body&gt;&lt;p&gt;&lt;span style=&quot; font-weight:600;&quot;&gt;Election Title, &lt;/span&gt;(e.g. November 2019)&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</string>
            </property>
            <property name="wordWrap">
             <bool>true</bool>
            </property>
           </widget>
          </item>
          <item row="2" column="1">
           <widget class="QLineEdit" name="lineEdit"/>
          </item>
          <item row="0" column="1">
           <layout class="QHBoxLayout" name="horizontalLayout_4">
            <property name="leftMargin">
             <number>20</number>
            </property>
            <item>
             <widget class="QRadioButton" name="radioButton">
              <property name="styleSheet">
               <string notr="true"/>
              </property>
              <property name="text">
               <string>11</string>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QRadioButton" name="radioButton_2">
              <property name="text">
               <string>14</string>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QRadioButton" name="radioButton_3">
              <property name="text">
               <string>17</string>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QRadioButton" name="radioButton_4">
              <property name="text">
               <string>21</string>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QRadioButton" name="radioButton_5">
              <property name="text">
               <string>Others</string>
              </property>
             </widget>
            </item>
            <item>
             <spacer name="horizontalSpacer_2">
              <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>
          <item row="3" column="0">
           <widget class="QLabel" name="label_2">
            <property name="text">
             <string>&lt;b&gt;Path to images&lt;/b&gt;</string>
            </property>
           </widget>
          </item>
          <item row="3" column="1">
           <widget class="QLineEdit" name="lineEdit_2"/>
          </item>
          <item row="4" column="1">
           <widget class="QLineEdit" name="lineEdit_3"/>
          </item>
          <item row="4" column="0">
           <widget class="QLabel" name="label_3">
            <property name="text">
             <string>&lt;b&gt;Path to external drive</string>
            </property>
           </widget>
          </item>
          <item row="0" column="0">
           <widget class="QCheckBox" name="checkBox">
            <property name="text">
             <string>Double Sided</string>
            </property>
           </widget>
          </item>
          <item row="1" column="0" colspan="2">
           <layout class="QHBoxLayout" name="horizontalLayout_6" stretch="0,1">
            <property name="spacing">
             <number>0</number>
            </property>
            <item>
             <widget class="QCheckBox" name="checkBox_2">
              <property name="text">
               <string/>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QLabel" name="label_4">
              <property name="text">
               <string>&lt;html&gt;&lt;head/&gt;&lt;body&gt;&lt;p&gt;Check this &lt;span style=&quot; font-weight:600;&quot;&gt;box &lt;/span&gt;only if this &lt;span style=&quot; font-weight:600;&quot;&gt;first run &lt;/span&gt;of this election and &lt;span style=&quot; font-weight:600; font-style:italic;&quot;&gt;any old material should be deleted&lt;/span&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</string>
              </property>
             </widget>
            </item>
           </layout>
          </item>
         </layout>
        </item>
        <item>
         <spacer name="verticalSpacer">
          <property name="orientation">
           <enum>Qt::Vertical</enum>
          </property>
          <property name="sizeHint" stdset="0">
           <size>
            <width>20</width>
            <height>98</height>
           </size>
          </property>
         </spacer>
        </item>
        <item>
         <layout class="QHBoxLayout" name="horizontalLayout_5">
          <item>
           <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>
          <item>
           <widget class="QPushButton" name="pushButton_7">
            <property name="text">
             <string>Start Up</string>
            </property>
           </widget>
          </item>
          <item>
           <widget class="QPushButton" name="pushButton_6">
            <property name="text">
             <string>Exit</string>
            </property>
           </widget>
          </item>
         </layout>
        </item>
       </layout>
      </widget>
     </item>
    </layout>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

【讨论】：