本文链接: https://blog.csdn.net/xietansheng/article/details/72814492
0. JavaSwing 简介

Java Swing 图形界面开发简介

1. JavaSwing 布局管理器

JavaSwing_1.1: FlowLayout（流式布局）
JavaSwing_1.2: GridLayout（网格布局）
JavaSwing_1.3: GridBagLayout（网格袋布局）
JavaSwing_1.4: BoxLayout（箱式布局）
JavaSwing_1.5: GroupLayout（分组布局）
JavaSwing_1.6: CardLayout（卡片布局）
JavaSwing_1.7: BorderLayout（边界布局）
JavaSwing_1.8: SpringLayout（弹性布局）
JavaSwing_1.9: null（绝对布局）

2. JavaSwing 基本组件

JavaSwing_2.1: JLabel（标签）
JavaSwing_2.2: JButton（按钮）
JavaSwing_2.3: JRadioButton（单选按钮）
JavaSwing_2.4: JCheckBox（复选框）
JavaSwing_2.5: JToggleButton（开关按钮）
JavaSwing_2.6: JTextField（文本框）
JavaSwing_2.7: JPasswordField（密码框）
JavaSwing_2.8: JTextArea（文本区域）
JavaSwing_2.9: JComboBox（下拉列表框）
JavaSwing_2.10: JList（列表框）
JavaSwing_2.11: JProgressBar（进度条）
JavaSwing_2.12: JSlider（滑块）

3. JavaSwing 面板组件

JavaSwing_3.1: JPanel（面板）
JavaSwing_3.2: JScrollPane（滚动面板）
JavaSwing_3.3: JSplitPane（分隔面板）
JavaSwing_3.4: JTabbedPane（选项卡面板）
JavaSwing_3.5: JLayeredPane（层级面板）

4. JavaSwing 其他组件

JavaSwing_4.1: JFrame（窗口）
JavaSwing_4.2: JDialog、JOptionPane（对话框）
JavaSwing_4.3: JFileChooser（文件选择器）
JavaSwing_4.4: JColorChooser（颜色选择器）
JavaSwing_4.5: JMenuBar（菜单栏）
JavaSwing_4.6: JToolBar（工具栏）
JavaSwing_4.7: JPopupMenu（弹出菜单）
JavaSwing_4.8: JTable（表格）
JavaSwing_4.9: JTree（树）
JavaSwing_4.10: JInternalFrame（内部窗口）

5. JavaSwing 相关特性

JavaSwing_5.1: 组件的位置和尺寸
JavaSwing_5.2: 组件边框（Border）
JavaSwing_5.3: 事件处理
JavaSwing_5.4: 多线程并发与线程安全
JavaSwing_5.5: 拖拽功能
JavaSwing_5.6: 系统托盘（System Tray）
JavaSwing_5.7: 闪屏（Splash Screen）

扩展：Java AWT/Swing 其他相关

Java绘图: 使用Graphics类绘制线段、矩形、椭圆/圆弧/扇形、图片、文本
Java图片操作 — 图片的读取、绘制、缩放、裁剪、保存
Java代码截屏：使用 Java 代码截取电脑屏幕并保存
Java模拟鼠标键盘输入事件 — Robot 类
Java操作桌面应用 — Desktop 类
Java操作系统剪贴板(Clipboard)实现复制和粘贴

    最近开始学习Python，但只限于看理论，编几行代码，觉得没有意思，就想能不能用Python编写可视化的界面。遂查找了相关资料，发现了PyQt，由于前一段时间刚看过Qt，而且对Qt的印象很好，于是觉得用PyQt应该是一个比较愉快的选择。

1、前言

    PyQt的版本需要与Python的版本保持一致，在这里我用的PyQT的版本是 PyQt5-5.6-gpl-Py3.5-Qt5.6.0-x64.exe，具体下载方式，请直接搜索。由于该版本需要v3.5版本的Python，所以首先需要安装Python3.5，然后安装PyQt，为了更加方便的写代码，故安装了Pycharm，版本为pycharm-community-2017.3.2.exe。具体的下载、安装，网上有很多教程，在这里就不多做描述，请自行搜索，下面就先介绍基于Pycharm+Python3.5+PyQt5.6的Python可视化编程。文末还会介绍一下基于最新版本的Pycharm2018.3+Python3.7+PyQt5.11的Python可视化编程。

2、开始

1）、打开PyCharm并配置相关设置

    打开PyCharm界面如下：



    点击界面右下方的“Configure”下拉按钮，选择“Settings”，如下所示：



    打开如下设置界面：



    如上图所示，在“Project Interpreter”选显卡中选择本机所安装的Python版本，一般情况下，它会自动识别本机所安装的Python版本，如图所示，选择的为Python3.5；

    配置完成之后，点击“OK”，返回开始界面，

    选择“Create New Project”，选择工程路径和工程的名称，然后点击"Create"，然后弹出如下界面：



    此时，工作环境已准备完毕；

3、编写

1）、首先，创建一个.py文件，暂命名为PyQt.py

2）、其次，需要导入PyQt的文件如下所示：

import sys
from PyQt5.QtWidgets import QWidget, QApplication

注意，如果提示找不到对应文件，请确保PyQt5的安装路径在环境变量中！

然后先添加主函数：

if __name__ == "__main__":
    app = QApplication(sys.argv)
    sys.exit(app.exec_())

接下来就需要添加界面相关函数：

#class Example
class Example(QWidget):
    def __init__(self):
        super(Example, self).__init__()
        self.InitUI()

    def InitUI(self):
        self.btn = QPushButton("Dialog", self)
        self.btn.move(20, 20)
        self.btn.clicked.connect(self.ShowDialog)

        self.le = QLineEdit(self)
        self.le.move(130, 22)

        self.setWindowTitle("Input Dialog")
        self.show()

    def ShowDialog(self):
        text,ok = QInputDialog.getText(self, "Input Dialog", "Enter your name:")
        if ok:
            self.le.setText(str(text))

如上代码所示，在Python中主要是通过类来生成界面的，在类中，可以进行界面的生成，控件的创建，创建控件的响应函数，connect控件与控件响应函数。

其中函数 __init__(self) 可以理解为该类的构造函数，其中界面的初始化在该部分执行；

函数 InitUI(self) 主要是生成界面控件；

当类创建完成后，只需要在主函数中调用该类即可。如下所示：

if __name__ == "__main__":
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

在以上的代码中，主要是在界面中添加了一个按钮（btn），一个编辑框（le），一个按钮响应函数（ShowDialog），其中在ShowDialog响应函数中打开了一个标准输入窗口，并将标准输入窗口中输入的值显示到编辑框（le）中。
  

结果：



4、扩展

    在接下来做了一个更加复杂的例子，主要是模拟汇率的解算，界面主要如下所示：



其中主要涉及了按钮、编辑框、Label、布局等 ，

与第一个例子写在了同一个文件中，可点击一下链接下载：

http://download.csdn.net/download/bailang_zhizun/10249579

5、最新版本配置方法

采用最新版本的Python、PyQt、Pycharm配置可视化编程环境。

首先先安装Python3.7，然后安装Pycharm2018.3，并配置python解释器为Python3.7的本地目录，接下来就是安装PyQt5.11。

安装PyQt5.11是采用pip+wheel文件安装的形式，下载网址：https://pypi.org/project/PyQt5/#files

关于pip的安装请参考https://blog.csdn.net/bailang_zhizun/article/details/84563095

把下载的PyQt5-5.11.3-5.11.2-cp35.cp36.cp37.cp38-none-win_amd64.whl文件放置到合适的位置。

打开CMD，按照以下形式输入安装命令：



回车，pip就会自动安装该文件了：



此时PyQt5.11就安装成功了。

可以通过以上的代码进行测试。

6、Ubuntu下python2.7安装pyqt5

上面记录的都是在windows+python3环境下pyqt5的安装。由于工作需要，需要在Ubuntu+python2.7环境下安装pyqt5，根据pyqt5的官网，pyqt5只有针对python3的安装包，而没有python2.7的，所以可以通过在线安装的方式安装，下面是Ubuntu+python2.7环境下pyqt5的安装：

在ubuntu中打开终端，直接输入：

$sudo apt-get install python-pyqt5

即可,安装完成之后，直接在代码编辑页面import PyQt5即可，亲测可用。

另外，上面这种方式好像还可以用于ubuntu+python3环境下pyqt5的安装，也是通过命令安装：

$sudo apt-get install python3-pyqt5

上面未经测试，但是应该没问题。

 

 （1）这是当时做的一个课程设计，很多人想要图片，在这里我把用到的所有图片资源分享下

 （2）链接：https://pan.baidu.com/s/1nUX1DQe_aDZQMf2Zbblm_A

         提取码：twcp

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
#wrap {
	height: 719px;
	width: 100;
	background-image: url(4.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
}
#head {
	height: 120px;
	width: 100;
	background-color: #66CCCC;
	text-align: center;
	position: relative;
}
#foot {
	width: 100;
	height: 126px;
	background-color: #CC9933;
	position: relative;
}
#wrap .logGet {
	height: 408px;
	width: 368px;  
	position: absolute;
	background-color: #FFFFFF;
	top: 20%;
	right: 15%;
}
.logC a button {
	width: 100%;
	height: 45px;
	background-color: #ee7700;
	border: none;
	color: white;
	font-size: 18px;
}
.logGet .logD.logDtip .p1 {
	display: inline-block;
	font-size: 28px;
	margin-top: 30px;
	width: 86%;
}
#wrap .logGet .logD.logDtip {
	width: 86%;
	border-bottom: 1px solid #ee7700;
	margin-bottom: 60px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
.logGet .lgD img {
	position: absolute;
	top: 12px;
	left: 8px;
}
.logGet .lgD input {
	width: 100%;
	height: 42px;
	text-indent: 2.5rem;
}
#wrap .logGet .lgD {
	width: 86%;
	position: relative;
	margin-bottom: 30px;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
}
#wrap .logGet .logC {
	width: 86%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}


.title {
	font-family: "宋体";
	color: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
	font-size: 36px;
	height: 40px;
	width: 30%;
}

.copyright {
	font-family: "宋体";
	color: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
	height: 60px;
	width: 40%;
	text-align:center;
}
	

#foot .copyright .img {
	width: 100%;
	height: 24px;
	position: relative;
}
.copyright .img .icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-image: url(%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6.png);
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 5px;
}
	
.copyright .img .icon1 {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-image: url(%E5%9C%B0%E5%9D%80.png);
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 5px;
}
.copyright .img .icon2 {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-image: url(%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8F.png);
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 5px;
}
#foot .copyright p {
	height: 24px;
	width: 100%;
}
</style>
</head>

<body>
<div class="header" id="head">
  <div class="title">企业人事管理系统</div>
	
</div>
	
<div class="wrap" id="wrap">
	<div class="logGet">
			<!-- 头部提示信息 -->
			<div class="logD logDtip">
				<p class="p1">登录</p>
			</div>
			<!-- 输入框 -->
			<div class="lgD">
				<img src="img/logName.png" width="20" height="20" alt=""/>
				<input type="text"
					placeholder="输入用户名" />
			</div>
			<div class="lgD">
				<img src="img/logPwd.png" width="20" height="20" alt=""/>
				<input type="text"
					placeholder="输入用户密码" />
			</div>
			<div class="logC">
				<a href="index.html" target="_self"><button>登 录</button></a>
			</div>
		</div>
</div>
	
<div class="footer" id="foot">
  <div class="copyright">
    <p>Copyright © 2018 Qunar.com Inc. All Rights Reserved.</p>
    <div class="img">
		<i class="icon"></i><span>联系邮箱：jiankangsun@yahoo.com</span>
	</div>
	
	<div class="img">
		<i class="icon1"></i><span>联系地址：合肥工业大学</span>
	</div>
	  
	<div class="img">
	  <i class="icon2"></i><span>联系电话：18355042634</span>
	</div>


  </div>
	
</div>
	
	
</body>
</html>

注：资源主要来源：http://www.qtcn.org/bbs/u/110085 （刘大神）

如若侵权，请联系删除。

本文只是将作品集合到起来，方便大家一起学习。

资源集合已经放到 链接：https://pan.baidu.com/s/1sVvQE8uDujVxeKVVSoxyYw 密码：wslk

Qt界面开发（各种控件以及图表）

1.Qt简洁窗体



源代码链接：点击打开链接

2.QT漂亮界面

 



源代码链接：点击打开链接

3.音乐播放器界面



源代码链接：点击打开链接

4.六宫格界面



源代码链接：点击打开链接

5.漂亮通用界面



源代码链接：点击打开链接

6.净化设备管理



源代码链接：点击打开链接

7.树形界面通用图



源代码链接：点击打开链接

8.窗口主框架



源代码链接：点击打开链接

9.tcp文件传输



源代码链接：点击打开链接

10.综合组件的界面



源代码链接：点击打开链接

11.Qt动态圆形进度条



源代码链接：点击打开链接

12.动态绘制曲线





 

源代码链接：点击打开链接

13.二维码解析



源代码链接：点击打开链接

14.自定义UI演示



源代码链接：点击打开链接

15.Widget例子





源代码链接：点击打开链接

16.俄罗斯方块



源代码链接：点击打开链接

17.Qt360 界面



源代码链接：点击打开链接

18.正则表达式



源代码链接：点击打开链接

19.绘制（平滑与折线）曲线



源代码链接：点击打开链接

20.Tab选项界面



源代码链接：点击打开链接

21.十二宫格界面



源代码链接：点击打开链接

22.网络调试助手



源代码链接：点击打开链接

23.List树形列表界面



源代码链接：点击打开链接

24.Ping界面实现



源代码链接：点击打开链接

25.脉冲维修工具界面



源代码链接：点击打开链接

26.Qt个性时钟



源代码链接：点击打开链接

27.Qt漂亮日历



源代码链接：点击打开链接

28.Qt个性按钮



源代码链接：点击打开链接

29.Led数字显示



源代码链接：点击打开链接

30.多种组件界面



源代码链接：点击打开链接

31.英语词典



源代码链接：点击打开链接

32.绝对牛逼的计算器



源代码链接：点击打开链接

33.Led显示以及list列表



源代码链接：点击打开链接

34.Qt（动态数据模拟）曲线



源代码链接：点击打开链接

35.Tab飘逸界面



源代码链接：点击打开链接

36.滑动显示图片



源代码链接：点击打开链接

37.各种Chart例子



源代码链接：点击打开链接

38.背景图界面



源代码链接：点击打开链接

39.多种样式的进度条



源代码链接：点击打开链接

40.360UI完美界面



源代码链接：点击打开链接

41.360安防系统

 



源代码链接：点击打开链接

42.机器人聊天



源代码链接：点击打开链接

43.各种chart图表







源代码链接：点击打开链接

44.Qt图片预览(图形列表)



源代码链接：点击打开链接

45.动态显示文本的label



源代码链接：点击打开链接

46.Qt2048游戏



源代码链接：点击打开链接

47.Animation按钮



源代码链接：点击打开链接

48.模拟电量进度条



源代码链接：点击打开链接

49.网易云音乐界面



源代码链接：点击打开链接

50.多种样式日历



源代码链接：点击打开链接

51.myseria串口



源代码链接：点击打开链接

52.绘制魔法鱼儿



源代码链接：点击打开链接