用Qt学着做个界面

程序员文章站 2022-03-27 10:04:52

既然我们已经知道了一点点Python的基础，那么我们现在试着做一点基础的GUI界面试试看吧。...

导读

既然我们已经知道了一点点Python的基础，那么我们现在试着做一点基础的GUI界面试试看吧。

使用环境

首先说一下我所使用的环境：

Ubuntu $20.04$
Python $3.8.5$
Microsoft Visual Studio Code $1.52.1$
Microsoft官方提供的适用于Microsoft Visual Studio Code的Python拓展包（名字就是Python）

由于是Ubuntu系统，可能和Windows有一些出入，但是不需要配环境确实方便。

一个窗体

好的，我们来根据这个不确定是不是官方文档的教程来试一个简单的窗体程序：

# version 1
import sys
from PyQt5.Qt import Qt
from PyQt5.QtWidgets import QApplication, QWidget

# 通过继承，构造一个自定义的窗体
class QWindow(QWidget):
  def __init__(self, parent = None, flags = Qt.WindowFlags()):
    super().__init__(parent = parent, flags = flags)
    # 规定窗体宽度、高度
    # 同时规定屏幕宽度、高度，便于中心定位
    self.WINDOW_WIDTH = 500
    self.WINDOW_HEIGHT = 300
    self.SCREEN_WIDTH = 1920
    self.SCREEN_HEIGHT = 1080
    self.x = int((window.SCREEN_WIDTH - window.WINDOW_WIDTH) / 2)
    self.y = int((window.SCREEN_HEIGHT - window.WINDOW_HEIGHT) / 2)
    pass
  pass
 
if __name__ == '__main__':
  # 创建应用主线程，其中sys.argv是从命令行传入的参数（一般应用不常用）
  app = QApplication(sys.argv)
  # 创建主窗体
  window = QWindow()
  # 尺寸设置
  window.resize(window.WINDOW_WIDTH, window.WINDOW_HEIGHT)
  # 移动到指定的位置
  window.move(window.x, window.y)
  # 设置窗体标题
  window.setWindowTitle('example')
  # 显示窗体
  window.show()
  # 限制整个程序只能在主线程结束后结束，否则窗体会闪退
  sys.exit(app.exec_())
  pass

真实的效果就像这样：

用Qt学着做个界面

看起来还不错。在Ubuntu系统中的默认主题就是这样的样式，和Windows稍稍有些区别。

加上按钮

既然结果还行，那让我们来加点东西。就先加个按钮吧，等之后再把事件绑上去。

注：以下代码version 2和上面version 1有区别的地方就在于添加注释的地方

# version 2
import sys
from PyQt5.Qt import Qt
# 增加QGridLayout库
from PyQt5.QtWidgets import QApplication, QPushButton, QWidget, QGridLayout

class QWindow(QWidget):
  def __init__(self, parent = None, flags = Qt.WindowFlags()):
    super().__init__(parent = parent, flags = flags)
    self.WINDOW_WIDTH = 500
    self.WINDOW_HEIGHT = 300
    self.SCREEN_WIDTH = 1920
    self.SCREEN_HEIGHT = 1080
    self.x = int((self.SCREEN_WIDTH - self.WINDOW_WIDTH) / 2)
    self.y = int((self.SCREEN_HEIGHT - self.WINDOW_HEIGHT) / 2)
    # 定义一个按钮的实例
    self.btn = QPushButton('test button')
    # 定义容纳按钮的布局
    self.window_grid_layout = QGridLayout()
    # 设置这个布局的位置和大小
    self.window_grid_layout.setContentsMargins(0, 0, 0, 0)
    # 将定义的按钮塞进布局
    self.window_grid_layout.addWidget(self.btn, 0, 0, 1, 1)
    # 将窗体布局设为构建的布局
    self.setLayout(self.window_grid_layout)
    pass
  pass
 
if __name__ == '__main__':
  app = QApplication(sys.argv)
  window = QWindow()
  window.resize(window.WINDOW_WIDTH, window.WINDOW_HEIGHT)
  window.move(window.x, window.y)
  window.setWindowTitle('example')
  window.show()
  sys.exit(app.exec_())
  pass

于是，就有了这样的效果：

用Qt学着做个界面

看上去还行。

方法封装

但是窗体不能只有一个按钮，还得有标签、按钮、下拉框等等。

于是我们再回头看看我们代码中设置控件的地方：

# 定义一个按钮的实例
self.btn = QPushButton('test button')
# 定义容纳按钮的布局
self.window_grid_layout = QGridLayout()
# 设置这个布局的位置和大小
self.window_grid_layout.setContentsMargins(0, 0, 0, 0)
# 将定义的按钮塞进布局
self.window_grid_layout.addWidget(self.btn, 0, 0, 1, 1)
# 将窗体布局设为构建的布局
self.setLayout(self.window_grid_layout)

设置控件，一行；将控件添加进布局，一行。这样两行不停的交替，也许会有人喜欢，但是我是坚决不会允许的。我会将控件设置专门放在一起，将布局设置专门放在一起，最后再把布局塞入窗体，就像下面这样：

# version 3
import sys
from PyQt5.Qt import Qt
from PyQt5.QtWidgets import QApplication, QPushButton, QWidget, QGridLayout

class QWindow(QWidget):
  def __init__(self, parent = None, flags = Qt.WindowFlags()):
    super().__init__(parent = parent, flags = flags)
    self.WINDOW_WIDTH = 500
    self.WINDOW_HEIGHT = 300
    self.SCREEN_WIDTH = 1920
    self.SCREEN_HEIGHT = 1080
    self.x = int((self.SCREEN_WIDTH - self.WINDOW_WIDTH) / 2)
    self.y = int((self.SCREEN_HEIGHT - self.WINDOW_HEIGHT) / 2)
    self.window_grid_layout = QGridLayout()
    self.window_grid_layout.setContentsMargins(0, 0, 0, 0)
    # 按照顺序执行三个方法
    self.init_layout()
    self.set_layout()
    self.finish_layout()
    pass
  # 定义控件
  def init_layout(self):
    self.btn = QPushButton('test button')
    pass
  # 设置控件的位置
  def set_layout(self):
    self.window_grid_layout.addWidget(self.btn, 0, 0, 1, 1)
    pass
  # 结束控件设置
  def finish_layout(self):
    self.setLayout(self.window_grid_layout)
    pass
  pass
 
if __name__ == '__main__':
  app = QApplication(sys.argv)
  window = QWindow()
  window.resize(window.WINDOW_WIDTH, window.WINDOW_HEIGHT)
  window.move(window.x, window.y)
  window.setWindowTitle('example')
  window.show()
  sys.exit(app.exec_())
  pass

这样就看起来更简洁了！如果出现了问题，也能够快速定位出现问题的方法。

QSS样式美化

如果你对Web前端比较熟悉，那么你一定知道CSS3。强大的样式表让我们能够做到很多事。同样的，PyQt5也有类似的QSS，但是却相对CSS3缺少很多强大的效果。

我们可以类比CSS3写一点点样式表，命名为style.qss，和窗体文件一起放在pyqt5文件夹里：

QPushButton {
  /* 边框 */
  border: 1px solid black;
  /* 背景 */
  background: white;
  /* 字体颜色 */
  color: olive;
  /* 字体大小 */
  font-size: 20px;
  /* 控件高度 */
  height: 40px;
}

由于Python3在Ubuntu系统中不支持相对路径，所以我们需要使用其他的库：os，其中的getcwd()方法能够获得当前工作区的绝对路径。注意，是工作区，而不是当前文件。也就是说，os.getcwd()方法只能够获得该文件所在文件夹的绝对路径，获取的地址还得加上当前文件夹名字。

于是，加上QSS美化的代码就像是这样：

注：以下代码段version 4和上面version 3仅在于添加注释的地方有区别。

# version 4
# 获取路径的库
import os
import sys
from PyQt5.Qt import Qt
from PyQt5.QtWidgets import QApplication, QPushButton, QWidget, QGridLayout

class QWindow(QWidget):
  def __init__(self, parent = None, flags = Qt.WindowFlags()):
    super().__init__(parent = parent, flags = flags)
    self.WINDOW_WIDTH = 500
    self.WINDOW_HEIGHT = 300
    self.SCREEN_WIDTH = 1920
    self.SCREEN_HEIGHT = 1080
    self.x = int((self.SCREEN_WIDTH - self.WINDOW_WIDTH) / 2)
    self.y = int((self.SCREEN_HEIGHT - self.WINDOW_HEIGHT) / 2)
    self.window_grid_layout = QGridLayout()
    self.window_grid_layout.setContentsMargins(0, 0, 0, 0)
    self.init_layout()
    self.set_layout()
    self.finish_layout()
    # 将读取的内容作为样式表美化控件
    self.setStyleSheet(self.load_qss())
    pass

  def init_layout(self):
    self.btn = QPushButton('test button')
    pass

  def set_layout(self):
    self.window_grid_layout.addWidget(self.btn, 0, 0, 1, 1)
    pass

  def finish_layout(self):
    self.setLayout(self.window_grid_layout)
    pass

  def load_qss(self):
    # 获取路径并读取文件
    with open(os.getcwd() + '/pyqt5/style.qss') as q:
      return q.read()
      pass
    pass
  pass
 
if __name__ == '__main__':
  app = QApplication(sys.argv)
  window = QWindow()
  window.resize(window.WINDOW_WIDTH, window.WINDOW_HEIGHT)
  window.move(window.x, window.y)
  window.setWindowTitle('example')
  window.show()
  sys.exit(app.exec_())
  pass

于是效果就像是这样：

用Qt学着做个界面

看上去没毛病。

第三方美化插件

但是这样的界面稍微有点单调，再加一点小图标怎么样？

如果你做过Web项目，那么你应该知道font-awesome。这是个非常不错的字体库。当然，也有大佬把这些字体库放在了PyQt中，就是qtawesome。

当然，这个是第三方库，所以我们需要另外使用pip安装：

pip3 install qtawesome

然后就开始写代码。注：以下代码version 5修改的地方和上面version 3相比只有导包和注释处有改动。

# version 5
import sys
from PyQt5.Qt import Qt
from PyQt5.QtWidgets import QApplication, QPushButton, QWidget, QGridLayout
# 添加代码库
import qtawesome as qta

class QWindow(QWidget):
  def __init__(self, parent = None, flags = Qt.WindowFlags()):
    super().__init__(parent = parent, flags = flags)
    self.WINDOW_WIDTH = 500
    self.WINDOW_HEIGHT = 300
    self.SCREEN_WIDTH = 1920
    self.SCREEN_HEIGHT = 1080
    self.x = int((self.SCREEN_WIDTH - self.WINDOW_WIDTH) / 2)
    self.y = int((self.SCREEN_HEIGHT - self.WINDOW_HEIGHT) / 2)
    self.window_grid_layout = QGridLayout()
    self.window_grid_layout.setContentsMargins(0, 0, 0, 0)
    self.init_layout()
    self.set_layout()
    self.finish_layout()
    pass

  def init_layout(self):
    # 在构建按钮的时候添加QIcon
    # 这个意思是：使用fa5库中的实心图标（Solid），并且涂上橄榄色（olive）
    self.btn = QPushButton(qta.icon('fa5s.cannabis', color='olive'), 'test button')
    pass

  def set_layout(self):
    self.window_grid_layout.addWidget(self.btn, 0, 0, 1, 1)
    pass

  def finish_layout(self):
    self.setLayout(self.window_grid_layout)
    pass
  pass
 
if __name__ == '__main__':
  app = QApplication(sys.argv)
  window = QWindow()
  window.resize(window.WINDOW_WIDTH, window.WINDOW_HEIGHT)
  window.move(window.x, window.y)
  window.setWindowTitle('example')
  window.show()
  sys.exit(app.exec_())
  pass

于是就变成了这样：

用Qt学着做个界面

看着还行。

是不是有点能理解了呢？

本文地址：https://blog.csdn.net/ordinary_brony/article/details/112000176

不对应

为什么还是可以显示的_html/css_WEB-ITnose

用Qt学着做个界面

导读

使用环境

一个窗体

加上按钮

方法封装

QSS样式美化

第三方美化插件

不对应

用Python给图像算法做个简单应用界面