用Qt学着做个界面

系统管理员 2023-01-01 03:37 170阅读 0赞

# 导读 #

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

# 使用环境 #

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

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

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

# 一个窗体 #

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

# 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

真实的效果就像这样：

![窗体效果][0e7c5eb9ac9b2bd43e40ebbbccc67bba.png]

看起来还不错。在`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

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

![窗体效果][3675197ed004821b1f94b5be6fd2cd99.png]

**看上去还行**。

# 方法封装 #

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

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

# 定义一个按钮的实例
    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

于是效果就像是这样：

![窗体样式][595525ad8011aeeaccaf3a5b8fdf56bc.png]

**看上去没毛病**。

# 第三方美化插件 #

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

如果你做过`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

于是就变成了这样：

![窗体样式][d567452039796b793abd04581ae93d8b.png]

**看着还行**。

是不是有点能理解了呢？

[Link 1]: http://code.py40.com/pyqt5/16.html
[0e7c5eb9ac9b2bd43e40ebbbccc67bba.png]: /images/20221120/0d4dc5b2148f4f6f970ef93a38d6d11e.png
[3675197ed004821b1f94b5be6fd2cd99.png]: https://img-blog.csdnimg.cn/img_convert/3675197ed004821b1f94b5be6fd2cd99.png
[595525ad8011aeeaccaf3a5b8fdf56bc.png]: https://img-blog.csdnimg.cn/img_convert/595525ad8011aeeaccaf3a5b8fdf56bc.png
[d567452039796b793abd04581ae93d8b.png]: https://img-blog.csdnimg.cn/img_convert/d567452039796b793abd04581ae93d8b.png