58 窗口设计

在这个案例中，借助QStandardItemModel模型和QTableView视图，构建一个简单的类似Excel的电子表格编辑器，实践自定义对话框的编程方法。第一步，先构建项目的基本框架和用户界面。

58.1 创建项目

通过QtCreator，在C:\Users\Minwei\Projects\Qt路径下，创建名为Sheet的项目。

58.2 添加资源

C:\Users\Minwei\Projects\Qt\Sheet\Sheet.qrc：

xxxxxxxxxx
8
1
<RCC>
2
    <qresource prefix="/">
3
        <file>images/cell.bmp</file>
4
        <file>images/exit.bmp</file>
5
        <file>images/header.bmp</file>
6
        <file>images/rowcol.bmp</file>
7
    </qresource>
8
</RCC>

58.3 设计界面

58.3.1 主窗口

C:\Users\Minwei\Projects\Qt\Sheet\sheetwindow.ui：

xxxxxxxxxx
118
1
<?xml version="1.0" encoding="UTF-8"?>
2
<ui version="4.0">
3
 <class>SheetWindow</class>
4
 <widget class="QMainWindow" name="SheetWindow">
5
  <property name="geometry">
6
   <rect>
7
    <x>0</x>
8
    <y>0</y>
9
    <width>800</width>
10
    <height>600</height>
11
   </rect>
12
  </property>
13
  <property name="windowTitle">
14
   <string>电子表格</string>
15
  </property>
16
  <widget class="QWidget" name="m_central">
17
   <widget class="QTableView" name="m_table">
18
    <property name="geometry">
19
     <rect>
20
      <x>10</x>
21
      <y>10</y>
22
      <width>780</width>
23
      <height>510</height>
24
     </rect>
25
    </property>
26
    <property name="frameShape">
27
     <enum>QFrame::WinPanel</enum>
28
    </property>
29
   </widget>
30
  </widget>
31
  <widget class="QStatusBar" name="m_statusBar"/>
32
  <widget class="QToolBar" name="m_toolBar">
33
   <property name="windowTitle">
34
    <string>工具栏</string>
35
   </property>
36
   <property name="toolButtonStyle">
37
    <enum>Qt::ToolButtonTextUnderIcon</enum>
38
   </property>
39
   <attribute name="toolBarArea">
40
    <enum>TopToolBarArea</enum>
41
   </attribute>
42
   <attribute name="toolBarBreak">
43
    <bool>false</bool>
44
   </attribute>
45
   <addaction name="m_actRowCol"/>
46
   <addaction name="m_actHeader"/>
47
   <addaction name="m_actCell"/>
48
   <addaction name="separator"/>
49
   <addaction name="m_actExit"/>
50
  </widget>
51
  <action name="m_actRowCol">
52
   <property name="icon">
53
    <iconset resource="Sheet.qrc">
54
     <normaloff>:/images/rowcol.bmp</normaloff>:/images/rowcol.bmp</iconset>
55
   </property>
56
   <property name="text">
57
    <string>行列</string>
58
   </property>
59
   <property name="toolTip">
60
    <string>行列</string>
61
   </property>
62
  </action>
63
  <action name="m_actHeader">
64
   <property name="icon">
65
    <iconset resource="Sheet.qrc">
66
     <normaloff>:/images/header.bmp</normaloff>:/images/header.bmp</iconset>
67
   </property>
68
   <property name="text">
69
    <string>表头</string>
70
   </property>
71
   <property name="toolTip">
72
    <string>表头</string>
73
   </property>
74
  </action>
75
  <action name="m_actCell">
76
   <property name="icon">
77
    <iconset resource="Sheet.qrc">
78
     <normaloff>:/images/cell.bmp</normaloff>:/images/cell.bmp</iconset>
79
   </property>
80
   <property name="text">
81
    <string>单元</string>
82
   </property>
83
   <property name="toolTip">
84
    <string>单元</string>
85
   </property>
86
  </action>
87
  <action name="m_actExit">
88
   <property name="icon">
89
    <iconset resource="Sheet.qrc">
90
     <normaloff>:/images/exit.bmp</normaloff>:/images/exit.bmp</iconset>
91
   </property>
92
   <property name="text">
93
    <string>退出</string>
94
   </property>
95
  </action>
96
 </widget>
97
 <resources>
98
  <include location="Sheet.qrc"/>
99
 </resources>
100
 <connections>
101
  <connection>
102
   <sender>m_actExit</sender>
103
   <signal>triggered()</signal>
104
   <receiver>SheetWindow</receiver>
105
   <slot>close()</slot>
106
   <hints>
107
    <hint type="sourcelabel">
108
     <x>-1</x>
109
     <y>-1</y>
110
    </hint>
111
    <hint type="destinationlabel">
112
     <x>399</x>
113
     <y>299</y>
114
    </hint>
115
   </hints>
116
  </connection>
117
 </connections>
118
</ui>

58.3.2 “行列”对话框

C:\Users\Minwei\Projects\Qt\Sheet\rowcoldialog.ui：

xxxxxxxxxx
147
1
<?xml version="1.0" encoding="UTF-8"?>
2
<ui version="4.0">
3
 <class>RowColDialog</class>
4
 <widget class="QDialog" name="RowColDialog">
5
  <property name="geometry">
6
   <rect>
7
    <x>0</x>
8
    <y>0</y>
9
    <width>252</width>
10
    <height>84</height>
11
   </rect>
12
  </property>
13
  <property name="windowTitle">
14
   <string>行列</string>
15
  </property>
16
  <layout class="QVBoxLayout" name="m_layoutVer">
17
   <item>
18
    <spacer name="m_spacerUp">
19
     <property name="orientation">
20
      <enum>Qt::Vertical</enum>
21
     </property>
22
     <property name="sizeHint" stdset="0">
23
      <size>
24
       <width>20</width>
25
       <height>1</height>
26
      </size>
27
     </property>
28
    </spacer>
29
   </item>
30
   <item>
31
    <layout class="QGridLayout" name="m_layoutGrid">
32
     <item row="0" column="0">
33
      <widget class="QLabel" name="m_labRow">
34
       <property name="text">
35
        <string>行数：</string>
36
       </property>
37
      </widget>
38
     </item>
39
     <item row="0" column="1">
40
      <widget class="QSpinBox" name="m_spinRow">
41
       <property name="sizePolicy">
42
        <sizepolicy hsizetype="Expanding" vsizetype="Fixed">
43
         <horstretch>0</horstretch>
44
         <verstretch>0</verstretch>
45
        </sizepolicy>
46
       </property>
47
       <property name="minimum">
48
        <number>1</number>
49
       </property>
50
       <property name="maximum">
51
        <number>100</number>
52
       </property>
53
      </widget>
54
     </item>
55
     <item row="0" column="2">
56
      <widget class="QPushButton" name="m_btnOk">
57
       <property name="text">
58
        <string>确定</string>
59
       </property>
60
       <property name="default">
61
        <bool>true</bool>
62
       </property>
63
      </widget>
64
     </item>
65
     <item row="1" column="0">
66
      <widget class="QLabel" name="m_labCol">
67
       <property name="text">
68
        <string>列数：</string>
69
       </property>
70
      </widget>
71
     </item>
72
     <item row="1" column="1">
73
      <widget class="QSpinBox" name="m_spinCol">
74
       <property name="sizePolicy">
75
        <sizepolicy hsizetype="Expanding" vsizetype="Fixed">
76
         <horstretch>0</horstretch>
77
         <verstretch>0</verstretch>
78
        </sizepolicy>
79
       </property>
80
       <property name="minimum">
81
        <number>1</number>
82
       </property>
83
       <property name="maximum">
84
        <number>100</number>
85
       </property>
86
      </widget>
87
     </item>
88
     <item row="1" column="2">
89
      <widget class="QPushButton" name="m_btnCancel">
90
       <property name="text">
91
        <string>取消</string>
92
       </property>
93
      </widget>
94
     </item>
95
    </layout>
96
   </item>
97
   <item>
98
    <spacer name="m_spacerDown">
99
     <property name="orientation">
100
      <enum>Qt::Vertical</enum>
101
     </property>
102
     <property name="sizeHint" stdset="0">
103
      <size>
104
       <width>20</width>
105
       <height>2</height>
106
      </size>
107
     </property>
108
    </spacer>
109
   </item>
110
  </layout>
111
 </widget>
112
 <resources/>
113
 <connections>
114
  <connection>
115
   <sender>m_btnOk</sender>
116
   <signal>clicked()</signal>
117
   <receiver>RowColDialog</receiver>
118
   <slot>accept()</slot>
119
   <hints>
120
    <hint type="sourcelabel">
121
     <x>204</x>
122
     <y>27</y>
123
    </hint>
124
    <hint type="destinationlabel">
125
     <x>125</x>
126
     <y>41</y>
127
    </hint>
128
   </hints>
129
  </connection>
130
  <connection>
131
   <sender>m_btnCancel</sender>
132
   <signal>clicked()</signal>
133
   <receiver>RowColDialog</receiver>
134
   <slot>reject()</slot>
135
   <hints>
136
    <hint type="sourcelabel">
137
     <x>204</x>
138
     <y>56</y>
139
    </hint>
140
    <hint type="destinationlabel">
141
     <x>125</x>
142
     <y>41</y>
143
    </hint>
144
   </hints>
145
  </connection>
146
 </connections>
147
</ui>

58.3.3 “表头”对话框

C:\Users\Minwei\Projects\Qt\Sheet\headerdialog.ui：

xxxxxxxxxx
108
1
<?xml version="1.0" encoding="UTF-8"?>
2
<ui version="4.0">
3
 <class>HeaderDialog</class>
4
 <widget class="QDialog" name="HeaderDialog">
5
  <property name="geometry">
6
   <rect>
7
    <x>0</x>
8
    <y>0</y>
9
    <width>252</width>
10
    <height>252</height>
11
   </rect>
12
  </property>
13
  <property name="windowTitle">
14
   <string>表头</string>
15
  </property>
16
  <layout class="QVBoxLayout" name="m_layoutVer">
17
   <item>
18
    <widget class="QListView" name="m_list">
19
     <property name="frameShape">
20
      <enum>QFrame::WinPanel</enum>
21
     </property>
22
    </widget>
23
   </item>
24
   <item>
25
    <layout class="QHBoxLayout" name="m_layoutHor">
26
     <item>
27
      <spacer name="m_spacerLeft">
28
       <property name="orientation">
29
        <enum>Qt::Horizontal</enum>
30
       </property>
31
       <property name="sizeHint" stdset="0">
32
        <size>
33
         <width>40</width>
34
         <height>20</height>
35
        </size>
36
       </property>
37
      </spacer>
38
     </item>
39
     <item>
40
      <widget class="QPushButton" name="m_btnOk">
41
       <property name="text">
42
        <string>确定</string>
43
       </property>
44
       <property name="default">
45
        <bool>true</bool>
46
       </property>
47
      </widget>
48
     </item>
49
     <item>
50
      <widget class="QPushButton" name="m_btnCancel">
51
       <property name="text">
52
        <string>取消</string>
53
       </property>
54
      </widget>
55
     </item>
56
     <item>
57
      <spacer name="m_spacerRight">
58
       <property name="orientation">
59
        <enum>Qt::Horizontal</enum>
60
       </property>
61
       <property name="sizeHint" stdset="0">
62
        <size>
63
         <width>40</width>
64
         <height>20</height>
65
        </size>
66
       </property>
67
      </spacer>
68
     </item>
69
    </layout>
70
   </item>
71
  </layout>
72
 </widget>
73
 <resources/>
74
 <connections>
75
  <connection>
76
   <sender>m_btnOk</sender>
77
   <signal>clicked()</signal>
78
   <receiver>HeaderDialog</receiver>
79
   <slot>accept()</slot>
80
   <hints>
81
    <hint type="sourcelabel">
82
     <x>85</x>
83
     <y>230</y>
84
    </hint>
85
    <hint type="destinationlabel">
86
     <x>125</x>
87
     <y>125</y>
88
    </hint>
89
   </hints>
90
  </connection>
91
  <connection>
92
   <sender>m_btnCancel</sender>
93
   <signal>clicked()</signal>
94
   <receiver>HeaderDialog</receiver>
95
   <slot>reject()</slot>
96
   <hints>
97
    <hint type="sourcelabel">
98
     <x>166</x>
99
     <y>230</y>
100
    </hint>
101
    <hint type="destinationlabel">
102
     <x>125</x>
103
     <y>125</y>
104
    </hint>
105
   </hints>
106
  </connection>
107
 </connections>
108
</ui>

58.3.4 “单元”对话框

C:\Users\Minwei\Projects\Qt\Sheet\celldialog.ui：

xxxxxxxxxx
175
1
<?xml version="1.0" encoding="UTF-8"?>
2
<ui version="4.0">
3
 <class>CellDialog</class>
4
 <widget class="QDialog" name="CellDialog">
5
  <property name="geometry">
6
   <rect>
7
    <x>0</x>
8
    <y>0</y>
9
    <width>252</width>
10
    <height>106</height>
11
   </rect>
12
  </property>
13
  <property name="windowTitle">
14
   <string>单元</string>
15
  </property>
16
  <layout class="QHBoxLayout" name="m_layoutHor">
17
   <item>
18
    <layout class="QVBoxLayout" name="m_layoutLeft">
19
     <item>
20
      <spacer name="m_spacerUp">
21
       <property name="orientation">
22
        <enum>Qt::Vertical</enum>
23
       </property>
24
       <property name="sizeHint" stdset="0">
25
        <size>
26
         <width>20</width>
27
         <height>18</height>
28
        </size>
29
       </property>
30
      </spacer>
31
     </item>
32
     <item>
33
      <layout class="QGridLayout" name="m_layoutGrid">
34
       <item row="0" column="0">
35
        <widget class="QLabel" name="m_labRow">
36
         <property name="text">
37
          <string>行号：</string>
38
         </property>
39
        </widget>
40
       </item>
41
       <item row="0" column="1">
42
        <widget class="QSpinBox" name="m_spinRow">
43
         <property name="sizePolicy">
44
          <sizepolicy hsizetype="Expanding" vsizetype="Fixed">
45
           <horstretch>0</horstretch>
46
           <verstretch>0</verstretch>
47
          </sizepolicy>
48
         </property>
49
         <property name="minimum">
50
          <number>1</number>
51
         </property>
52
         <property name="maximum">
53
          <number>100</number>
54
         </property>
55
        </widget>
56
       </item>
57
       <item row="1" column="0">
58
        <widget class="QLabel" name="m_labCol">
59
         <property name="text">
60
          <string>列号：</string>
61
         </property>
62
        </widget>
63
       </item>
64
       <item row="1" column="1">
65
        <widget class="QSpinBox" name="m_spinCol">
66
         <property name="sizePolicy">
67
          <sizepolicy hsizetype="Expanding" vsizetype="Fixed">
68
           <horstretch>0</horstretch>
69
           <verstretch>0</verstretch>
70
          </sizepolicy>
71
         </property>
72
         <property name="minimum">
73
          <number>1</number>
74
         </property>
75
         <property name="maximum">
76
          <number>100</number>
77
         </property>
78
        </widget>
79
       </item>
80
       <item row="2" column="0">
81
        <widget class="QLabel" name="m_labContent">
82
         <property name="text">
83
          <string>内容：</string>
84
         </property>
85
        </widget>
86
       </item>
87
       <item row="2" column="1">
88
        <widget class="QLineEdit" name="m_editContent"/>
89
       </item>
90
      </layout>
91
     </item>
92
     <item>
93
      <spacer name="m_spacerDown">
94
       <property name="orientation">
95
        <enum>Qt::Vertical</enum>
96
       </property>
97
       <property name="sizeHint" stdset="0">
98
        <size>
99
         <width>20</width>
100
         <height>13</height>
101
        </size>
102
       </property>
103
      </spacer>
104
     </item>
105
    </layout>
106
   </item>
107
   <item>
108
    <layout class="QVBoxLayout" name="m_layoutRight">
109
     <item>
110
      <spacer name="m_spacerUpdate">
111
       <property name="orientation">
112
        <enum>Qt::Vertical</enum>
113
       </property>
114
       <property name="sizeHint" stdset="0">
115
        <size>
116
         <width>20</width>
117
         <height>13</height>
118
        </size>
119
       </property>
120
      </spacer>
121
     </item>
122
     <item>
123
      <widget class="QPushButton" name="m_btnUpdate">
124
       <property name="text">
125
        <string>更新</string>
126
       </property>
127
       <property name="default">
128
        <bool>true</bool>
129
       </property>
130
      </widget>
131
     </item>
132
     <item>
133
      <widget class="QPushButton" name="m_btnClose">
134
       <property name="text">
135
        <string>关闭</string>
136
       </property>
137
      </widget>
138
     </item>
139
     <item>
140
      <spacer name="m_spacerClose">
141
       <property name="orientation">
142
        <enum>Qt::Vertical</enum>
143
       </property>
144
       <property name="sizeHint" stdset="0">
145
        <size>
146
         <width>20</width>
147
         <height>13</height>
148
        </size>
149
       </property>
150
      </spacer>
151
     </item>
152
    </layout>
153
   </item>
154
  </layout>
155
 </widget>
156
 <resources/>
157
 <connections>
158
  <connection>
159
   <sender>m_btnClose</sender>
160
   <signal>clicked()</signal>
161
   <receiver>CellDialog</receiver>
162
   <slot>close()</slot>
163
   <hints>
164
    <hint type="sourcelabel">
165
     <x>204</x>
166
     <y>67</y>
167
    </hint>
168
    <hint type="destinationlabel">
169
     <x>125</x>
170
     <y>52</y>
171
    </hint>
172
   </hints>
173
  </connection>
174
 </connections>
175
</ui>

58.4 功能框架

58.4.1 主窗口

C:\Users\Minwei\Projects\Qt\Sheet\sheetwindow.h：

xxxxxxxxxx
32
1
#ifndef SHEETWINDOW_H
2
#define SHEETWINDOW_H
3

4
#include <QMainWindow>
5
#include <QLabel>
6

7
QT_BEGIN_NAMESPACE
8
namespace Ui { class SheetWindow; }
9
QT_END_NAMESPACE
10

11
class SheetWindow : public QMainWindow
12
{
13
    Q_OBJECT
14

15
public:
16
    SheetWindow(QWidget *parent = nullptr);
17
    ~SheetWindow();
18

19
private slots:
20
    void on_m_actRowCol_triggered();
21
    void on_m_actHeader_triggered();
22
    void on_m_actCell_triggered();
23

24
    void on_m_table_clicked(const QModelIndex &index);
25

26
private:
27
    Ui::SheetWindow *ui;
28
    QLabel* m_labCellPos;
29
    QLabel* m_labCellText;
30
};
31

32
#endif // SHEETWINDOW_H

C:\Users\Minwei\Projects\Qt\Sheet\sheetwindow.cpp：

xxxxxxxxxx
39
1
#include "sheetwindow.h"
2
#include "ui_sheetwindow.h"
3

4
SheetWindow::SheetWindow(QWidget *parent)
5
    : QMainWindow(parent)
6
    , ui(new Ui::SheetWindow)
7
    , m_labCellPos(new QLabel("单元格位置："))
8
    , m_labCellText(new QLabel(" 单元格内容："))
9
{
10
    ui->setupUi(this);
11

12
    setCentralWidget(ui->m_table);
13

14
    m_labCellPos->setMinimumWidth(200);
15
    ui->m_statusBar->addWidget(m_labCellPos);
16
    m_labCellText->setMinimumWidth(200);
17
    ui->m_statusBar->addWidget(m_labCellText);
18
}
19

20
SheetWindow::~SheetWindow()
21
{
22
    delete ui;
23
}
24

25
void SheetWindow::on_m_actRowCol_triggered()
26
{
27
}
28

29
void SheetWindow::on_m_actHeader_triggered()
30
{
31
}
32

33
void SheetWindow::on_m_actCell_triggered()
34
{
35
}
36

37
void SheetWindow::on_m_table_clicked(const QModelIndex &index)
38
{
39
}

58.4.2 “行列”对话框

C:\Users\Minwei\Projects\Qt\Sheet\rowcoldialog.h：

xxxxxxxxxx
22
1
#ifndef ROWCOLDIALOG_H
2
#define ROWCOLDIALOG_H
3

4
#include <QDialog>
5

6
namespace Ui {
7
class RowColDialog;
8
}
9

10
class RowColDialog : public QDialog
11
{
12
    Q_OBJECT
13

14
public:
15
    explicit RowColDialog(QWidget *parent = nullptr);
16
    ~RowColDialog();
17

18
private:
19
    Ui::RowColDialog *ui;
20
};
21

22
#endif // ROWCOLDIALOG_H

C:\Users\Minwei\Projects\Qt\Sheet\rowcoldialog.cpp：

xxxxxxxxxx
14
1
#include "rowcoldialog.h"
2
#include "ui_rowcoldialog.h"
3

4
RowColDialog::RowColDialog(QWidget *parent) :
5
    QDialog(parent),
6
    ui(new Ui::RowColDialog)
7
{
8
    ui->setupUi(this);
9
}
10

11
RowColDialog::~RowColDialog()
12
{
13
    delete ui;
14
}

58.4.3 “表头”对话框

C:\Users\Minwei\Projects\Qt\Sheet\headerdialog.h：

xxxxxxxxxx
22
1
#ifndef HEADERDIALOG_H
2
#define HEADERDIALOG_H
3

4
#include <QDialog>
5

6
namespace Ui {
7
class HeaderDialog;
8
}
9

10
class HeaderDialog : public QDialog
11
{
12
    Q_OBJECT
13

14
public:
15
    explicit HeaderDialog(QWidget *parent = nullptr);
16
    ~HeaderDialog();
17

18
private:
19
    Ui::HeaderDialog *ui;
20
};
21

22
#endif // HEADERDIALOG_H

C:\Users\Minwei\Projects\Qt\Sheet\headerdialog.cpp：

xxxxxxxxxx
14
1
#include "headerdialog.h"
2
#include "ui_headerdialog.h"
3

4
HeaderDialog::HeaderDialog(QWidget *parent) :
5
    QDialog(parent),
6
    ui(new Ui::HeaderDialog)
7
{
8
    ui->setupUi(this);
9
}
10

11
HeaderDialog::~HeaderDialog()
12
{
13
    delete ui;
14
}

58.4.4 “单元”对话框

C:\Users\Minwei\Projects\Qt\Sheet\celldialog.h：

xxxxxxxxxx
25
1
#ifndef CELLDIALOG_H
2
#define CELLDIALOG_H
3

4
#include <QDialog>
5

6
namespace Ui {
7
class CellDialog;
8
}
9

10
class CellDialog : public QDialog
11
{
12
    Q_OBJECT
13

14
public:
15
    explicit CellDialog(QWidget *parent = nullptr);
16
    ~CellDialog();
17

18
private slots:
19
    void on_m_btnUpdate_clicked();
20

21
private:
22
    Ui::CellDialog *ui;
23
};
24

25
#endif // CELLDIALOG_H

C:\Users\Minwei\Projects\Qt\Sheet\celldialog.cpp：

xxxxxxxxxx
18
1
#include "celldialog.h"
2
#include "ui_celldialog.h"
3

4
CellDialog::CellDialog(QWidget *parent) :
5
    QDialog(parent),
6
    ui(new Ui::CellDialog)
7
{
8
    ui->setupUi(this);
9
}
10

11
CellDialog::~CellDialog()
12
{
13
    delete ui;
14
}
15

16
void CellDialog::on_m_btnUpdate_clicked()
17
{
18
}

58.5 测试验证

运行效果如图所示：