python - 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. ボーダー ウィジェットを選択し、そのレイアウトを設定します (例: 「グリッドにレイアウト」)。
6. フレーム ウィジェットを選択し、そのレイアウトを設定します (例: 「グリッドにレイアウト」)。
7. 境界ウィジェットを選択します。プロパティ エディターの [レイアウト] セクションに移動します。そこには、境界線のサイズを調整するために使用できる 、 などのlayoutTopMarginプロパティ が表示されます。layoutLeftMargin