Qt Designer设计师常用控件与布局管理

目录

• Qt常用控件
  • • • Butons
      • Item Views
      • Item Widgets
      • Containers
      • Input Widgets
      • Display Widgets
• 布局管理
  • • • 内外边距
      • 水平布局管理器QHBoxLayout
      • 垂直布局管理器QVBoxLayout
      • 栅格布局管理器QGridLayout
      • 表单布局管理器QFormLayout
      • 普通控件属性
      • 分裂器QSplitter
      • 隔离弹簧QSpacer
      • 多页面使用
• 实战

Qt常用控件

Butons

1. Push Button：普通按钮
2. Tool Button：工具按钮，一般用于显示图片用
3. Radio Button：一般用于实现单选框
4. Check Box：一般用于实现复选框
5. Command Link Button：一般用于显示超链接
6. Dialog Button Box：一般用于对话框

Item Views

1. List View：清单视图
2. Tree View：树形视图
3. Table View：表格视图
4. Column View：列视图
5. Undo View：撤销命令视图

Item Widgets

1. List Widget：清单控件。可以实现QQ设置面板左列的效果，如下所示：
   
2. Tree Widget：树形控件。可以实现如下这种效果：
   
3. Table Widget：表格控件。可以实现表格，如下所示：
   

Containers

1. GroupBox：这个容器用于分组，一般和单选按钮RadioButton或者CheckBox复选按钮结合使用。示例如下：
   
2. Scroll Area
3. Tool Box
4. Tab Widget：标签页控件。可以实现不同Tab页切换的效果，如下所示：
   
5. Stacked Widget
6. Frame
7. Widget
8. MDI Area
9. Dock Widget：可以停靠浮动的小部件
10. QAx Widget

Input Widgets

1. Combo Box：下拉列表组合框
2. Font Combo Box：字体下拉列表组合框，选择不同的字体
3. Line Edit：单行文本编辑框，可用于密码/账号输入框
4. Text Edit：富文本编辑
5. Plain Text Edit：纯文本编辑
6. Spin Box
7. Double Spin Box
8. Time Edit：时间编辑
9. Date Edit：日期编辑
10. Date/Time Edit：日期时间编辑
11. Dial：360°旋转的转盘
12. Horizontal Scroll Bar：水平滚动条
13. Vertical Scroll Bar：垂直滚动条
14. Horizontal Slider：水平滑块
15. Vertical Slider：垂直滑块
16. Key Sequence Edit

Display Widgets

1. label：显示文字，GIF动图，图片，超链接等
2. Text Browser：显示大量文字使用这个控件
3. Graphics view
4. Calendar Widget：日历
5. LCD Number：可以实现倒计时/计时的秒表
6. Progress Bar：进度条
7. Horizontal Line：水平线
8. Vertical Line：垂直线
9. OpenGL Widget
10. QQuickWidget

布局管理

内外边距

这一部分内容可以参考CSS中的盒子模型。

1. margin：外边距，即一个控件的边框到另一个控件的边框距离，属于容器外部距离。
   1. 修改方式1：选中控件，右击改变样式表，在文本框中编辑样式。比如说：

   QPushButton{margin:50px}
   

   2. 修改方式2：修改属性配置表中的styleSheet属性
2. padding：内边距，即自身边框到自身内部另一个容器边框之间的距离，属于容器内距离。

水平布局管理器QHBoxLayout

1. 其属性有8个
   1. layoutSpacing：间隔距离，控制水平布局中各个控件之间的距离
   2. layoutStretch：拉伸因子（拉伸系数），子控件在布局管理器中所占的比例
2. 当使用水平布局时，通常设置水平布局内的控件的minimumSize高度以及maxinumSize宽度

垂直布局管理器QVBoxLayout

这个布局与水平布局雷同，只是换了一个方向。

栅格布局管理器QGridLayout

1. layoutRowMinimumHeight：每个小格的最低高度
2. layoutColumnMinimumWidth：每个小格的最低宽度
3. handleWidth：左右之间的距离

表单布局管理器QFormLayout

普通控件属性

1. sizePolicy：大小策略。其有四种策略
   1. 水平策略，这种策略有七个值。每个值的含义详见帮助文档QSizePolicy类
   2. 垂直策略，这种策略有七个值。每个值的含义详见帮助文档QSizePolicy类
   3. 水平伸展：默认水平伸展值为0，当进行水平布局时，水平伸展值为0的控件会保持一个建议尺寸。当进行窗口拉大时，会根据伸展值的比例分配新增的空闲空间给水平伸展值非0的控件。示例如下：
      
   4. 垂直伸展：和水平伸展同理。一般这两个属性不设置，而是设置布局管理器中的layoutStretch属性。

分裂器QSplitter

使用这个控件可以实现PDF阅读器左右两列式的效果

1. 常用属性：
   1. orientation：方向，可设置为水平或者垂直。方向对应使用分裂器水平布局，使用分裂器垂直布局
   2. opaqueResize：默认为true，实时更新子控件的大小。为false时表示在拖动的时候会显示一条灰色的线条，在拖动到位并释放鼠标后再显示分割线条。
   3. childrenCollapsible：为true时表示用户可以将子部件的大小调整为0
   4. handleWidth：左右两个控件之间的距离
2. 使用示例：拖动两个Widget，选中这两个Widget然后点击使用拆分器水平布局或者垂直布局。
   

隔离弹簧QSpacer

1. orientation：方向，可设置为水平或者垂直。方向对应水平弹簧和垂直弹簧两种控件
2. sizeType：大小类型，有七种值
3. sizeHint：缺省大小

多页面使用

1. 新建Qt设计师界面类，这个界面将包含ui文件和类，将作为子界面或者说封装的自定义控件
2. 使用方式1：在主界面类中实例化子界面类对象：
   1. 主界面类组合子界面类对象
   2. 在主界面类的构造函数中进行子页面类对象的初始化
3. 使用方式2：在Qt designer中进行类的提升

实战

1. 实现效果如下：
   
2. UI文件如下

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>SystemTestClass</class>
 <widget class="QWidget" name="SystemTestClass">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>758</width>
    <height>610</height>
   </rect>
  </property>
  <property name="sizePolicy">
   <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
    <horstretch>0</horstretch>
    <verstretch>0</verstretch>
   </sizepolicy>
  </property>
  <property name="minimumSize">
   <size>
    <width>758</width>
    <height>610</height>
   </size>
  </property>
  <property name="maximumSize">
   <size>
    <width>758</width>
    <height>610</height>
   </size>
  </property>
  <property name="windowTitle">
   <string>系统参数调试</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout_2">
   <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">
     <property name="spacing">
      <number>0</number>
     </property>
     <item>
      <widget class="QScrollArea" name="scrollArea">
       <property name="minimumSize">
        <size>
         <width>115</width>
         <height>0</height>
        </size>
       </property>
       <property name="maximumSize">
        <size>
         <width>115</width>
         <height>16777215</height>
        </size>
       </property>
       <property name="widgetResizable">
        <bool>true</bool>
       </property>
       <widget class="QWidget" name="scrollAreaWidgetContents_2">
        <property name="geometry">
         <rect>
          <x>0</x>
          <y>0</y>
          <width>113</width>
          <height>606</height>
         </rect>
        </property>
        <widget class="QWidget" name="">
         <property name="geometry">
          <rect>
           <x>10</x>
           <y>40</y>
           <width>97</width>
           <height>286</height>
          </rect>
         </property>
         <layout class="QVBoxLayout" name="verticalLayout">
          <item>
           <widget class="QPushButton" name="pushButton_one">
            <property name="sizePolicy">
             <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
              <horstretch>0</horstretch>
              <verstretch>0</verstretch>
             </sizepolicy>
            </property>
            <property name="minimumSize">
             <size>
              <width>95</width>
              <height>60</height>
             </size>
            </property>
            <property name="maximumSize">
             <size>
              <width>95</width>
              <height>60</height>
             </size>
            </property>
            <property name="text">
             <string>激励源参数设置</string>
            </property>
           </widget>
          </item>
          <item>
           <spacer name="verticalSpacer_one">
            <property name="orientation">
             <enum>Qt::Vertical</enum>
            </property>
            <property name="sizeHint" stdset="0">
             <size>
              <width>20</width>
              <height>40</height>
             </size>
            </property>
           </spacer>
          </item>
          <item>
           <widget class="QPushButton" name="pushButton_two">
            <property name="sizePolicy">
             <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
              <horstretch>0</horstretch>
              <verstretch>0</verstretch>
             </sizepolicy>
            </property>
            <property name="minimumSize">
             <size>
              <width>95</width>
              <height>60</height>
             </size>
            </property>
            <property name="maximumSize">
             <size>
              <width>95</width>
              <height>60</height>
             </size>
            </property>
            <property name="text">
             <string>激励源参数设置</string>
            </property>
           </widget>
          </item>
          <item>
           <spacer name="verticalSpacer_two">
            <property name="orientation">
             <enum>Qt::Vertical</enum>
            </property>
            <property name="sizeHint" stdset="0">
             <size>
              <width>20</width>
              <height>40</height>
             </size>
            </property>
           </spacer>
          </item>
          <item>
           <widget class="QPushButton" name="pushButton_three">
            <property name="sizePolicy">
             <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
              <horstretch>0</horstretch>
              <verstretch>0</verstretch>
             </sizepolicy>
            </property>
            <property name="minimumSize">
             <size>
              <width>95</width>
              <height>60</height>
             </size>
            </property>
            <property name="maximumSize">
             <size>
              <width>95</width>
              <height>60</height>
             </size>
            </property>
            <property name="text">
             <string>激励源参数设置</string>
            </property>
           </widget>
          </item>
         </layout>
        </widget>
       </widget>
      </widget>
     </item>
     <item>
      <widget class="QStackedWidget" name="stackedWidget">
       <property name="styleSheet">
        <string notr="true"/>
       </property>
       <property name="currentIndex">
        <number>1</number>
       </property>
       <widget class="QWidget" name="page_one">
        <property name="styleSheet">
         <string notr="true">QWidget {
background-color: white;
}</string>
        </property>
       </widget>
       <widget class="QWidget" name="page_two">
        <property name="styleSheet">
         <string notr="true">QWidget {
background-color: white;
}</string>
        </property>
       </widget>
      </widget>
     </item>
    </layout>
   </item>
  </layout>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>