94 界面实现

第一步，先构建TcpServer和TcpClient两个项目的基本框架和用户界面。

94.1 TcpServer

94.1.1 创建项目

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

94.1.2 添加资源

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

xxxxxxxxxx
8
1
<RCC>
2
    <qresource prefix="/">
3
        <file>images/clear.bmp</file>
4
        <file>images/close.bmp</file>
5
        <file>images/exit.bmp</file>
6
        <file>images/listen.bmp</file>
7
    </qresource>
8
</RCC>

94.1.3 设计界面

C:\Users\Minwei\Projects\Qt\TcpServer\tcpserverwindow.ui：

xxxxxxxxxx
201
1
<?xml version="1.0" encoding="UTF-8"?>
2
<ui version="4.0">
3
 <class>TcpServerWindow</class>
4
 <widget class="QMainWindow" name="TcpServerWindow">
5
  <property name="geometry">
6
   <rect>
7
    <x>0</x>
8
    <y>0</y>
9
    <width>696</width>
10
    <height>557</height>
11
   </rect>
12
  </property>
13
  <property name="windowTitle">
14
   <string>TCP服务器</string>
15
  </property>
16
  <widget class="QWidget" name="m_central">
17
   <layout class="QVBoxLayout" name="m_layoutVer">
18
    <item>
19
     <layout class="QHBoxLayout" name="m_layoutTop">
20
      <item>
21
       <widget class="QLabel" name="m_labLocalAddr">
22
        <property name="sizePolicy">
23
         <sizepolicy hsizetype="Fixed" vsizetype="Preferred">
24
          <horstretch>0</horstretch>
25
          <verstretch>0</verstretch>
26
         </sizepolicy>
27
        </property>
28
        <property name="text">
29
         <string>本地地址：</string>
30
        </property>
31
       </widget>
32
      </item>
33
      <item>
34
       <widget class="QComboBox" name="m_comboLocalAddr">
35
        <item>
36
         <property name="text">
37
          <string>0.0.0.0</string>
38
         </property>
39
        </item>
40
        <item>
41
         <property name="text">
42
          <string>127.0.0.1</string>
43
         </property>
44
        </item>
45
       </widget>
46
      </item>
47
      <item>
48
       <widget class="QLabel" name="m_labLocalPort">
49
        <property name="sizePolicy">
50
         <sizepolicy hsizetype="Fixed" vsizetype="Preferred">
51
          <horstretch>0</horstretch>
52
          <verstretch>0</verstretch>
53
         </sizepolicy>
54
        </property>
55
        <property name="text">
56
         <string>本地端口：</string>
57
        </property>
58
       </widget>
59
      </item>
60
      <item>
61
       <widget class="QLineEdit" name="m_editLocalPort">
62
        <property name="sizePolicy">
63
         <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
64
          <horstretch>0</horstretch>
65
          <verstretch>0</verstretch>
66
         </sizepolicy>
67
        </property>
68
        <property name="text">
69
         <string>9000</string>
70
        </property>
71
       </widget>
72
      </item>
73
     </layout>
74
    </item>
75
    <item>
76
     <widget class="QPlainTextEdit" name="m_editOutput">
77
      <property name="frameShape">
78
       <enum>QFrame::WinPanel</enum>
79
      </property>
80
      <property name="readOnly">
81
       <bool>true</bool>
82
      </property>
83
     </widget>
84
    </item>
85
    <item>
86
     <layout class="QHBoxLayout" name="m_layoutBottom">
87
      <item>
88
       <widget class="QLineEdit" name="m_editSend">
89
        <property name="text">
90
         <string>Hello Client</string>
91
        </property>
92
       </widget>
93
      </item>
94
      <item>
95
       <widget class="QPushButton" name="m_btnSend">
96
        <property name="enabled">
97
         <bool>false</bool>
98
        </property>
99
        <property name="text">
100
         <string>发送</string>
101
        </property>
102
        <property name="default">
103
         <bool>true</bool>
104
        </property>
105
       </widget>
106
      </item>
107
     </layout>
108
    </item>
109
   </layout>
110
  </widget>
111
  <widget class="QStatusBar" name="m_statusBar"/>
112
  <widget class="QToolBar" name="m_toolBar">
113
   <property name="windowTitle">
114
    <string>toolBar</string>
115
   </property>
116
   <property name="toolButtonStyle">
117
    <enum>Qt::ToolButtonTextBesideIcon</enum>
118
   </property>
119
   <attribute name="toolBarArea">
120
    <enum>TopToolBarArea</enum>
121
   </attribute>
122
   <attribute name="toolBarBreak">
123
    <bool>false</bool>
124
   </attribute>
125
   <addaction name="m_actListen"/>
126
   <addaction name="m_actClose"/>
127
   <addaction name="m_actClear"/>
128
   <addaction name="separator"/>
129
   <addaction name="m_actExit"/>
130
  </widget>
131
  <action name="m_actListen">
132
   <property name="icon">
133
    <iconset resource="TcpServer.qrc">
134
     <normaloff>:/images/listen.bmp</normaloff>:/images/listen.bmp</iconset>
135
   </property>
136
   <property name="text">
137
    <string>监听</string>
138
   </property>
139
   <property name="toolTip">
140
    <string>监听</string>
141
   </property>
142
  </action>
143
  <action name="m_actClose">
144
   <property name="icon">
145
    <iconset resource="TcpServer.qrc">
146
     <normaloff>:/images/close.bmp</normaloff>:/images/close.bmp</iconset>
147
   </property>
148
   <property name="text">
149
    <string>关闭</string>
150
   </property>
151
   <property name="toolTip">
152
    <string>关闭</string>
153
   </property>
154
  </action>
155
  <action name="m_actClear">
156
   <property name="icon">
157
    <iconset resource="TcpServer.qrc">
158
     <normaloff>:/images/clear.bmp</normaloff>:/images/clear.bmp</iconset>
159
   </property>
160
   <property name="text">
161
    <string>清空</string>
162
   </property>
163
   <property name="toolTip">
164
    <string>清空</string>
165
   </property>
166
  </action>
167
  <action name="m_actExit">
168
   <property name="icon">
169
    <iconset resource="TcpServer.qrc">
170
     <normaloff>:/images/exit.bmp</normaloff>:/images/exit.bmp</iconset>
171
   </property>
172
   <property name="text">
173
    <string>退出</string>
174
   </property>
175
   <property name="toolTip">
176
    <string>退出</string>
177
   </property>
178
  </action>
179
 </widget>
180
 <resources>
181
  <include location="TcpServer.qrc"/>
182
 </resources>
183
 <connections>
184
  <connection>
185
   <sender>m_actExit</sender>
186
   <signal>triggered()</signal>
187
   <receiver>TcpServerWindow</receiver>
188
   <slot>close()</slot>
189
   <hints>
190
    <hint type="sourcelabel">
191
     <x>-1</x>
192
     <y>-1</y>
193
    </hint>
194
    <hint type="destinationlabel">
195
     <x>339</x>
196
     <y>279</y>
197
    </hint>
198
   </hints>
199
  </connection>
200
 </connections>
201
</ui>

94.1.4 功能框架

C:\Users\Minwei\Projects\Qt\TcpServer\tcpserverwindow.h：

xxxxxxxxxx
33
1
#ifndef TCPSERVERWINDOW_H
2
#define TCPSERVERWINDOW_H
3

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

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

11
class TcpServerWindow : public QMainWindow
12
{
13
    Q_OBJECT
14

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

19
private slots:
20
    void on_m_actListen_triggered();
21
    void on_m_actClose_triggered();
22
    void on_m_actClear_triggered();
23

24
    void on_m_btnSend_clicked();
25

26
private:
27
    Ui::TcpServerWindow *ui;
28
    QLabel* m_labListenState;
29
    QLabel* m_labSocketState;
30
    QLabel* m_labSocketError;
31
};
32

33
#endif // TCPSERVERWINDOW_H

C:\Users\Minwei\Projects\Qt\TcpServer\tcpserverwindow.cpp：

xxxxxxxxxx
47
1
#include <QHostInfo>
2

3
#include "tcpserverwindow.h"
4
#include "ui_tcpserverwindow.h"
5

6
TcpServerWindow::TcpServerWindow(QWidget *parent)
7
    : QMainWindow(parent)
8
    , ui(new Ui::TcpServerWindow)
9
    , m_labListenState(new QLabel("监听状态：关闭"))
10
    , m_labSocketState(new QLabel(" 套接字状态："))
11
    , m_labSocketError(new QLabel(" 套接字错误："))
12
{
13
    ui->setupUi(this);
14

15
    for (QHostAddress address : QHostInfo::fromName(
16
        QHostInfo::localHostName()).addresses())
17
        if(address.protocol() == QAbstractSocket::IPv4Protocol)
18
            ui->m_comboLocalAddr->addItem(address.toString());
19

20
    m_labListenState->setMinimumWidth(196);
21
    ui->m_statusBar->addWidget(m_labListenState);
22
    m_labSocketState->setMinimumWidth(197);
23
    ui->m_statusBar->addWidget(m_labSocketState);
24
    m_labSocketError->setMinimumWidth(197);
25
    ui->m_statusBar->addWidget(m_labSocketError);
26
}
27

28
TcpServerWindow::~TcpServerWindow()
29
{
30
    delete ui;
31
}
32

33
void TcpServerWindow::on_m_actListen_triggered()
34
{
35
}
36

37
void TcpServerWindow::on_m_actClose_triggered()
38
{
39
}
40

41
void TcpServerWindow::on_m_actClear_triggered()
42
{
43
}
44

45
void TcpServerWindow::on_m_btnSend_clicked()
46
{
47
}

94.2 TcpClient

94.2.1 创建项目

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

94.2.2 添加资源

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

xxxxxxxxxx
8
1
<RCC>
2
    <qresource prefix="/">
3
        <file>images/clear.bmp</file>
4
        <file>images/connect.bmp</file>
5
        <file>images/disconnect.bmp</file>
6
        <file>images/exit.bmp</file>
7
    </qresource>
8
</RCC>

94.2.3 设计界面

C:\Users\Minwei\Projects\Qt\TcpClient\tcpclientwindow.ui：

xxxxxxxxxx
200
1
<?xml version="1.0" encoding="UTF-8"?>
2
<ui version="4.0">
3
 <class>TcpClientWindow</class>
4
 <widget class="QMainWindow" name="TcpClientWindow">
5
  <property name="geometry">
6
   <rect>
7
    <x>0</x>
8
    <y>0</y>
9
    <width>696</width>
10
    <height>557</height>
11
   </rect>
12
  </property>
13
  <property name="windowTitle">
14
   <string>TCP客户机</string>
15
  </property>
16
  <widget class="QWidget" name="m_central">
17
   <layout class="QVBoxLayout" name="m_layoutVer">
18
    <item>
19
     <layout class="QHBoxLayout" name="m_layoutTop">
20
      <item>
21
       <widget class="QLabel" name="m_labRemoteAddr">
22
        <property name="sizePolicy">
23
         <sizepolicy hsizetype="Fixed" vsizetype="Preferred">
24
          <horstretch>0</horstretch>
25
          <verstretch>0</verstretch>
26
         </sizepolicy>
27
        </property>
28
        <property name="text">
29
         <string>远程地址：</string>
30
        </property>
31
       </widget>
32
      </item>
33
      <item>
34
       <widget class="QLineEdit" name="m_editRemoteAddr">
35
        <property name="sizePolicy">
36
         <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
37
          <horstretch>0</horstretch>
38
          <verstretch>0</verstretch>
39
         </sizepolicy>
40
        </property>
41
        <property name="text">
42
         <string>127.0.0.1</string>
43
        </property>
44
       </widget>
45
      </item>
46
      <item>
47
       <widget class="QLabel" name="m_labRemotePort">
48
        <property name="sizePolicy">
49
         <sizepolicy hsizetype="Fixed" vsizetype="Preferred">
50
          <horstretch>0</horstretch>
51
          <verstretch>0</verstretch>
52
         </sizepolicy>
53
        </property>
54
        <property name="text">
55
         <string>远程端口：</string>
56
        </property>
57
       </widget>
58
      </item>
59
      <item>
60
       <widget class="QLineEdit" name="m_editRemotePort">
61
        <property name="sizePolicy">
62
         <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
63
          <horstretch>0</horstretch>
64
          <verstretch>0</verstretch>
65
         </sizepolicy>
66
        </property>
67
        <property name="text">
68
         <string>9000</string>
69
        </property>
70
       </widget>
71
      </item>
72
     </layout>
73
    </item>
74
    <item>
75
     <widget class="QPlainTextEdit" name="m_editOutput">
76
      <property name="frameShape">
77
       <enum>QFrame::WinPanel</enum>
78
      </property>
79
      <property name="readOnly">
80
       <bool>true</bool>
81
      </property>
82
     </widget>
83
    </item>
84
    <item>
85
     <layout class="QHBoxLayout" name="m_layoutBottom">
86
      <item>
87
       <widget class="QLineEdit" name="m_editSend">
88
        <property name="text">
89
         <string>Hello Server</string>
90
        </property>
91
       </widget>
92
      </item>
93
      <item>
94
       <widget class="QPushButton" name="m_btnSend">
95
        <property name="enabled">
96
         <bool>false</bool>
97
        </property>
98
        <property name="text">
99
         <string>发送</string>
100
        </property>
101
        <property name="default">
102
         <bool>true</bool>
103
        </property>
104
       </widget>
105
      </item>
106
     </layout>
107
    </item>
108
   </layout>
109
  </widget>
110
  <widget class="QStatusBar" name="m_statusBar"/>
111
  <widget class="QToolBar" name="m_toolBar">
112
   <property name="windowTitle">
113
    <string>toolBar</string>
114
   </property>
115
   <property name="toolButtonStyle">
116
    <enum>Qt::ToolButtonTextBesideIcon</enum>
117
   </property>
118
   <attribute name="toolBarArea">
119
    <enum>TopToolBarArea</enum>
120
   </attribute>
121
   <attribute name="toolBarBreak">
122
    <bool>false</bool>
123
   </attribute>
124
   <addaction name="m_actConnect"/>
125
   <addaction name="m_actDisconnect"/>
126
   <addaction name="m_actClear"/>
127
   <addaction name="separator"/>
128
   <addaction name="m_actExit"/>
129
  </widget>
130
  <action name="m_actConnect">
131
   <property name="icon">
132
    <iconset resource="TcpClient.qrc">
133
     <normaloff>:/images/connect.bmp</normaloff>:/images/connect.bmp</iconset>
134
   </property>
135
   <property name="text">
136
    <string>连接</string>
137
   </property>
138
   <property name="toolTip">
139
    <string>连接</string>
140
   </property>
141
  </action>
142
  <action name="m_actDisconnect">
143
   <property name="icon">
144
    <iconset resource="TcpClient.qrc">
145
     <normaloff>:/images/disconnect.bmp</normaloff>:/images/disconnect.bmp</iconset>
146
   </property>
147
   <property name="text">
148
    <string>断开</string>
149
   </property>
150
   <property name="toolTip">
151
    <string>断开</string>
152
   </property>
153
  </action>
154
  <action name="m_actClear">
155
   <property name="icon">
156
    <iconset resource="TcpClient.qrc">
157
     <normaloff>:/images/clear.bmp</normaloff>:/images/clear.bmp</iconset>
158
   </property>
159
   <property name="text">
160
    <string>清空</string>
161
   </property>
162
   <property name="toolTip">
163
    <string>清空</string>
164
   </property>
165
  </action>
166
  <action name="m_actExit">
167
   <property name="icon">
168
    <iconset resource="TcpClient.qrc">
169
     <normaloff>:/images/exit.bmp</normaloff>:/images/exit.bmp</iconset>
170
   </property>
171
   <property name="text">
172
    <string>退出</string>
173
   </property>
174
   <property name="toolTip">
175
    <string>退出</string>
176
   </property>
177
  </action>
178
 </widget>
179
 <resources>
180
  <include location="TcpClient.qrc"/>
181
 </resources>
182
 <connections>
183
  <connection>
184
   <sender>m_actExit</sender>
185
   <signal>triggered()</signal>
186
   <receiver>TcpClientWindow</receiver>
187
   <slot>close()</slot>
188
   <hints>
189
    <hint type="sourcelabel">
190
     <x>-1</x>
191
     <y>-1</y>
192
    </hint>
193
    <hint type="destinationlabel">
194
     <x>339</x>
195
     <y>279</y>
196
    </hint>
197
   </hints>
198
  </connection>
199
 </connections>
200
</ui>

94.2.4 功能框架

C:\Users\Minwei\Projects\Qt\TcpClient\tcpclientwindow.h：

xxxxxxxxxx
33
1
#ifndef TCPCLIENTWINDOW_H
2
#define TCPCLIENTWINDOW_H
3

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

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

11
class TcpClientWindow : public QMainWindow
12
{
13
    Q_OBJECT
14

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

19
private slots:
20
    void on_m_actConnect_triggered();
21
    void on_m_actDisconnect_triggered();
22
    void on_m_actClear_triggered();
23

24
    void on_m_btnSend_clicked();
25

26
private:
27
    Ui::TcpClientWindow *ui;
28
    QLabel* m_labConnectionState;
29
    QLabel* m_labSocketState;
30
    QLabel* m_labSocketError;
31
};
32

33
#endif // TCPCLIENTWINDOW_H

C:\Users\Minwei\Projects\Qt\TcpClient\tcpclientwindow.cpp：

xxxxxxxxxx
40
1
#include "tcpclientwindow.h"
2
#include "ui_tcpclientwindow.h"
3

4
TcpClientWindow::TcpClientWindow(QWidget *parent)
5
    : QMainWindow(parent)
6
    , ui(new Ui::TcpClientWindow)
7
    , m_labConnectionState(new QLabel("连接状态：断开"))
8
    , m_labSocketState(new QLabel(" 套接字状态："))
9
    , m_labSocketError(new QLabel(" 套接字错误："))
10
{
11
    ui->setupUi(this);
12

13
    m_labConnectionState->setMinimumWidth(196);
14
    ui->m_statusBar->addWidget(m_labConnectionState);
15
    m_labSocketState->setMinimumWidth(197);
16
    ui->m_statusBar->addWidget(m_labSocketState);
17
    m_labSocketError->setMinimumWidth(197);
18
    ui->m_statusBar->addWidget(m_labSocketError);
19
}
20

21
TcpClientWindow::~TcpClientWindow()
22
{
23
    delete ui;
24
}
25

26
void TcpClientWindow::on_m_actConnect_triggered()
27
{
28
}
29

30
void TcpClientWindow::on_m_actDisconnect_triggered()
31
{
32
}
33

34
void TcpClientWindow::on_m_actClear_triggered()
35
{
36
}
37

38
void TcpClientWindow::on_m_btnSend_clicked()
39
{
40
}