8 Qt设计师的使用

8.1 启动Qt设计师

在Qt 5.12.8 (MinGW 7.3.0 64-bit)控制台中执行：

xxxxxxxxxx
1
1
C:\Qt\Qt5.12.8\5.12.8\mingw73_64>designer

在“新建窗体”对话框中选择“Dialog without Buttons”，点击“创建”按钮。

8.2 Qt设计师主界面

Qt设计师由若干界面元素组成：

• 菜单栏

• 布局和界面设计工具栏

• 组件面板

• 对象查看器

• 属性编辑器

• 窗体设计器

8.3 用户界面设计

在Qt设计师中设计图形用户界面的步骤：

1. 在组件面板中选择组件，拖拽到窗体设计器中的父窗口上面

2. 在属性编辑器中设置组件的属性

3. 调整组件的位置和大小，利用布局器可以获得更加自动化的效果

4. 预览，检查显示效果

5. 保存界面描述文件

6. 退出

最终得到扩展名为“.ui”的界面文件。

8.4 设计计算器界面

C:\Users\Minwei\Projects\Qt\Calculator1\calculatordialog.ui：

xxxxxxxxxx
93
1
<?xml version="1.0" encoding="UTF-8"?>
2
<ui version="4.0">
3
 <class>CalculatorDialog</class>
4
 <widget class="QDialog" name="CalculatorDialog">
5
  <property name="geometry">
6
   <rect>
7
    <x>0</x>
8
    <y>0</y>
9
    <width>533</width>
10
    <height>43</height>
11
   </rect>
12
  </property>
13
  <property name="windowTitle">
14
   <string>计算器</string>
15
  </property>
16
  <widget class="QLineEdit" name="m_editX">
17
   <property name="geometry">
18
    <rect>
19
     <x>10</x>
20
     <y>10</y>
21
     <width>113</width>
22
     <height>25</height>
23
    </rect>
24
   </property>
25
   <property name="alignment">
26
    <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
27
   </property>
28
  </widget>
29
  <widget class="QLabel" name="m_label">
30
   <property name="geometry">
31
    <rect>
32
     <x>123</x>
33
     <y>10</y>
34
     <width>67</width>
35
     <height>25</height>
36
    </rect>
37
   </property>
38
   <property name="text">
39
    <string>+</string>
40
   </property>
41
   <property name="alignment">
42
    <set>Qt::AlignCenter</set>
43
   </property>
44
  </widget>
45
  <widget class="QLineEdit" name="m_editY">
46
   <property name="geometry">
47
    <rect>
48
     <x>190</x>
49
     <y>10</y>
50
     <width>113</width>
51
     <height>25</height>
52
    </rect>
53
   </property>
54
   <property name="alignment">
55
    <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
56
   </property>
57
  </widget>
58
  <widget class="QPushButton" name="m_button">
59
   <property name="enabled">
60
    <bool>false</bool>
61
   </property>
62
   <property name="geometry">
63
    <rect>
64
     <x>310</x>
65
     <y>10</y>
66
     <width>93</width>
67
     <height>25</height>
68
    </rect>
69
   </property>
70
   <property name="text">
71
    <string>=</string>
72
   </property>
73
  </widget>
74
  <widget class="QLineEdit" name="m_editZ">
75
   <property name="geometry">
76
    <rect>
77
     <x>410</x>
78
     <y>10</y>
79
     <width>113</width>
80
     <height>25</height>
81
    </rect>
82
   </property>
83
   <property name="alignment">
84
    <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
85
   </property>
86
   <property name="readOnly">
87
    <bool>true</bool>
88
   </property>
89
  </widget>
90
 </widget>
91
 <resources/>
92
 <connections/>
93
</ui>

预览效果如图所示：