pyqt：如何在小部件周围放置边框

Question

我正在对现有的 PyQt 项目进行一些更改。 UI 是使用 Qt Designer 创建的。

相关部分是一个显示文本的 QWidget。我正在尝试在文本周围添加边距。我认为最简单的方法是在 QWidget 周围放置一个边框，其背景颜色与 QWidget 的背景（白色）相同。

QWidget 位于 QFrame 上。我想在 QFrame 内和 QWidget 的边缘周围放置一个白色边框。我最接近的方法是在 QWidget 周围放置短的垂直和水平垫片，但这会显示底层的灰色 QFrame。我不知道怎么弄成白色。我宁愿让框架保持灰色，只在 QWidget 周围添加一个白色边框。

任何指针将不胜感激。

编辑：

ui文件：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>EbookViewer</class>
 <widget class="QMainWindow" name="EbookViewer">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>920</width>
    <height>774</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>E-book Viewer</string>
  </property>
  <property name="windowIcon">
   <iconset resource="../../../../resources/images.qrc">
    <normaloff>:/images/viewer.png</normaloff>:/images/viewer.png</iconset>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QGridLayout" name="gridLayout_2">
    <item row="0" column="0">
     <widget class="QSplitter" name="splitter">
      <property name="orientation">
       <enum>Qt::Horizontal</enum>
      </property>
      <widget class="QTreeView" name="toc">
       <property name="focusPolicy">
        <enum>Qt::WheelFocus</enum>
       </property>
      </widget>
      <widget class="QFrame" name="frame">
       <property name="frameShape">
        <enum>QFrame::StyledPanel</enum>
       </property>
       <property name="frameShadow">
        <enum>QFrame::Raised</enum>
       </property>
       <layout class="QGridLayout" name="gridLayout">
        <item row="0" column="0" colspan="2">
         <widget class="QWidget" name="view_bg" native="true">
          <property name="sizePolicy">
           <sizepolicy hsizetype="Maximum" vsizetype="Maximum">
            <horstretch>0</horstretch>
            <verstretch>0</verstretch>
           </sizepolicy>
          </property>
          <property name="minimumSize">
           <size>
            <width>0</width>
            <height>0</height>
           </size>
          </property>
          <property name="styleSheet">
           <string notr="true">background:white</string>
          </property>
          <layout class="QGridLayout" name="gridLayout_3">
           <property name="leftMargin">
            <number>200</number>
           </property>
           <property name="topMargin">
            <number>30</number>
           </property>
           <property name="rightMargin">
            <number>200</number>
           </property>
           <property name="bottomMargin">
            <number>30</number>
           </property>
           <item row="0" column="0">
            <widget class="DocumentView" name="view" native="true">
             <property name="minimumSize">
              <size>
               <width>0</width>
               <height>0</height>
              </size>
             </property>
            </widget>
           </item>
          </layout>
         </widget>
        </item>
        <item row="0" column="2">
         <widget class="QScrollBar" name="vertical_scrollbar">
          <property name="orientation">
           <enum>Qt::Vertical</enum>
          </property>
         </widget>
        </item>
        <item row="1" column="1">
         <widget class="QScrollBar" name="horizontal_scrollbar">
          <property name="orientation">
           <enum>Qt::Horizontal</enum>
          </property>
         </widget>
        </item>
        <item row="2" column="1" colspan="2">
         <widget class="QFrame" name="dictionary_box">
          <property name="frameShape">
           <enum>QFrame::StyledPanel</enum>
          </property>
          <property name="frameShadow">
           <enum>QFrame::Raised</enum>
          </property>
          <layout class="QHBoxLayout" name="horizontalLayout">
           <item>
            <widget class="QWebView" name="dictionary_view">
             <property name="minimumSize">
              <size>
               <width>0</width>
               <height>150</height>
              </size>
             </property>
             <property name="url">
              <url>
               <string>about:blank</string>
              </url>
             </property>
            </widget>
           </item>
           <item>
            <widget class="QToolButton" name="close_dictionary_view">
             <property name="toolTip">
              <string>Close dictionary</string>
             </property>
             <property name="text">
              <string>...</string>
             </property>
             <property name="icon">
              <iconset resource="../../../../resources/images.qrc">
               <normaloff>:/images/window-close.png</normaloff>:/images/window-close.png</iconset>
             </property>
            </widget>
           </item>
          </layout>
         </widget>
        </item>
       </layout>
      </widget>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QToolBar" name="tool_bar">
   <property name="sizePolicy">
    <sizepolicy hsizetype="Fixed" vsizetype="Preferred">
     <horstretch>0</horstretch>
     <verstretch>0</verstretch>
    </sizepolicy>
   </property>
   <property name="windowTitle">
    <string>toolBar</string>
   </property>
   <property name="movable">
    <bool>true</bool>
   </property>
   <property name="iconSize">
    <size>
     <width>32</width>
     <height>32</height>
    </size>
   </property>
   <property name="floatable">
    <bool>false</bool>
   </property>
   <attribute name="toolBarArea">
    <enum>LeftToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
   <addaction name="action_back"/>
   <addaction name="action_forward"/>
   <addaction name="separator"/>
   <addaction name="action_open_ebook"/>
   <addaction name="action_copy"/>
   <addaction name="action_font_size_larger"/>
   <addaction name="action_font_size_smaller"/>
   <addaction name="action_table_of_contents"/>
   <addaction name="action_full_screen"/>
   <addaction name="separator"/>
   <addaction name="action_previous_page"/>
   <addaction name="action_next_page"/>
   <addaction name="separator"/>
   <addaction name="action_bookmark"/>
   <addaction name="action_reference_mode"/>
   <addaction name="separator"/>
   <addaction name="action_preferences"/>
   <addaction name="action_metadata"/>
   <addaction name="separator"/>
   <addaction name="action_print"/>
  </widget>
  <widget class="QToolBar" name="tool_bar2">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
   <addaction name="action_find_next"/>
   <addaction name="action_find_previous"/>
  </widget>
  <action name="action_back">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/back.png</normaloff>:/images/back.png</iconset>
   </property>
   <property name="text">
    <string>Back</string>
   </property>
  </action>
  <action name="action_forward">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/forward.png</normaloff>:/images/forward.png</iconset>
   </property>
   <property name="text">
    <string>Forward</string>
   </property>
  </action>
  <action name="action_next_page">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/next.png</normaloff>:/images/next.png</iconset>
   </property>
   <property name="text">
    <string>Next page</string>
   </property>
  </action>
  <action name="action_previous_page">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/previous.png</normaloff>:/images/previous.png</iconset>
   </property>
   <property name="text">
    <string>Previous page</string>
   </property>
  </action>
  <action name="action_font_size_larger">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/font_size_larger.png</normaloff>:/images/font_size_larger.png</iconset>
   </property>
   <property name="text">
    <string>Font size larger</string>
   </property>
  </action>
  <action name="action_font_size_smaller">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/font_size_smaller.png</normaloff>:/images/font_size_smaller.png</iconset>
   </property>
   <property name="text">
    <string>Font size smaller</string>
   </property>
  </action>
  <action name="action_table_of_contents">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/chapters.png</normaloff>:/images/chapters.png</iconset>
   </property>
   <property name="text">
    <string>Table of Contents</string>
   </property>
  </action>
  <action name="action_metadata">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/dialog_information.png</normaloff>:/images/dialog_information.png</iconset>
   </property>
   <property name="text">
    <string>Metadata</string>
   </property>
  </action>
  <action name="action_open_ebook">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/document_open.png</normaloff>:/images/document_open.png</iconset>
   </property>
   <property name="text">
    <string>Open ebook</string>
   </property>
  </action>
  <action name="action_find_next">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/arrow-down.png</normaloff>:/images/arrow-down.png</iconset>
   </property>
   <property name="text">
    <string>Find next</string>
   </property>
   <property name="toolTip">
    <string>Find next occurrence</string>
   </property>
   <property name="shortcut">
    <string>F3</string>
   </property>
  </action>
  <action name="action_copy">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/edit-copy.png</normaloff>:/images/edit-copy.png</iconset>
   </property>
   <property name="text">
    <string>Copy to clipboard</string>
   </property>
  </action>
  <action name="action_preferences">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/config.png</normaloff>:/images/config.png</iconset>
   </property>
   <property name="text">
    <string>Preferences</string>
   </property>
  </action>
  <action name="action_reference_mode">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/lookfeel.png</normaloff>:/images/lookfeel.png</iconset>
   </property>
   <property name="text">
    <string>Reference Mode</string>
   </property>
  </action>
  <action name="action_bookmark">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/bookmarks.png</normaloff>:/images/bookmarks.png</iconset>
   </property>
   <property name="text">
    <string>Bookmark</string>
   </property>
  </action>
  <action name="action_full_screen">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/page.png</normaloff>:/images/page.png</iconset>
   </property>
   <property name="text">
    <string>Toggle full screen</string>
   </property>
  </action>
  <action name="action_print">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/print.png</normaloff>:/images/print.png</iconset>
   </property>
   <property name="text">
    <string>Print</string>
   </property>
  </action>
  <action name="action_find_previous">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/arrow-up.png</normaloff>:/images/arrow-up.png</iconset>
   </property>
   <property name="text">
    <string>Find previous</string>
   </property>
   <property name="toolTip">
    <string>Find previous occurrence</string>
   </property>
   <property name="shortcut">
    <string>Shift+F3</string>
   </property>
  </action>
 </widget>
 <customwidgets>
  <customwidget>
   <class>QWebView</class>
   <extends>QWidget</extends>
   <header>QtWebKit/QWebView</header>
  </customwidget>
  <customwidget>
   <class>DocumentView</class>
   <extends>QWidget</extends>
   <header>calibre/gui2/viewer/documentview.h</header>
   <container>1</container>
  </customwidget>
 </customwidgets>
 <resources>
  <include location="../../../../resources/images.qrc"/>
 </resources>
 <connections/>
</ui>

Answer 1

将您的QWidget 放在另一个QWidget 中，并将其背景设置为相同的颜色。

然后您可以使用父 QWidget 的布局来调整每边的边距宽度（这都可以在 Qt Designer 中完成）。

编辑

以下是在 Qt Designer 中实现此目的的步骤：

1. 选择包含文本小部件的框架小部件并打破其布局。
2. 添加一个新的QWidget 到框架小部件（你可以命名它 “borderWidget”）。
3. 使用styleSheet设置边框小部件的背景颜色 属性编辑器中的属性：例如background-color: white。 （注意：如果您暂时将其设置为对比色，可能会有所帮助，这样您就可以更轻松地看到发生了什么）。
4. 将文本小部件拖放到边框小部件上。
5. 选择边框小部件并设置其布局（例如“Lay Out in a 网格”）。
6. 选择框架小部件并设置其布局（例如“Lay Out in a 网格”）。
7. 选择边框小部件。转到属性中的布局部分 编辑。在那里你会看到像layoutTopMargin这样的属性， layoutLeftMargin等可以用来调整大小 边框。