devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Python | 人脸识别系统 — UI界面设计_python设计人脸识别界面

作者：空白诗007 | 2024-06-19 16:55:16

赞

踩

python设计人脸识别界面

博客汇总：Python | 人脸识别系统 — 博客索引

GitHub地址：Su-Face-Recognition

注：阅读本博客前请先参考

工具安装、环境配置：Python | 人脸识别系统 — 简介

一、UI界面编写

1、基础使用

        本项目采用PyQt库作为UI界面的编写，使用Qt-Designer、PyUIC自动生成UI界面代码。

关于PyQt库的详细使用可以参考该系列博客：

1、PyQt基础教程

2、使用PyQt开发图形界面Python应用专栏目录

        打开PyCharm,选择 工具 -> External Tools -> Qt-Designal .

注意：Qt-Designer并非PyCharm自带，需要自行安装，可以参考博客：PyCharm安装PyQt5及其工具（Qt Designer、PyUIC、PyRcc）详细教程

​

         打开工具后，选择 MainWindow ，点击创建。

​

         从界面左端选择你需要的组件，拖到工作区内，选择好布局。

        双击组件，可以修改需要显示的内容，如“按钮1”

​

         在界面右端修改组件名。工具默认组件名为“组件类型+数字”，这样你在输出代码的时候就不知道这个组件是干什么用的了。建议修改组件为“组件功能+组件类型”，如 login_button

​

         点击保存，选择保存路径（一般为你的项目目录下）。保存之后，你就会发现项目下多了一个以.ui结尾的文件。

​         点击该.ui文件（注意一定要点击一下）。然后选择 工具 -> Exteneral Tools -> PyUIC .

注意：PyUIC同样并非PyCharm自带，需要自行安装，可以参考上面博客：PyCharm安装PyQt5及其工具（Qt Designer、PyUIC、PyRcc）详细教程

​         运行之后，你会发现,ui文件下多了一个同样名字的.py文件，这个就是工具为我们自动生成的代码。只需要在下方添加如下代码，就可以运行查看效果：

​         生成的代码：

​         添加如下代码：

  1. import sys
  2. if __name__ == '__main__':
  3.     app = QtWidgets.QApplication(sys.argv)
  4.     widgets = QtWidgets.QMainWindow()
  5.     ui = Ui_MainWindow()
  6.     ui.setupUi(widgets)
  7.     widgets.show()
  8.     sys.exit(app.exec_())

        运行效果：

​         这就是PyQt编写UI界面的基本流程了，本项目的UI界面的布局基本上都是根据这种方式编写出来的。

2、项目UI基础

这里仅展示用户主界面的代码，更多代码可以参考本项目GitHub地址：

        项目的初始界面如下：

​         项目的初始代码如下：

 注意：按钮旁边的图标使用了qtawesome库，需要自行下载，下载可参考博客：Qt5开发工具---常用Qt5开发工具

  1. # -*- coding: utf-8 -*-
  2. import sys
  3. import qtawesome
  4. from PyQt5 import QtCore, QtWidgets
  5. from PyQt5.QtCore import Qt
  6. from PyQt5.QtGui import *
  7.  
  8.  
  9. class UserMainUi(object):
  10.     def setupUi(self, MainWindow):
  11.         MainWindow.setObjectName("UserMainWindow")
  12.         MainWindow.resize(1200, 800)
  13.  
  14.         # ------------ 整体界面设计，使用网格布局 ------------ #
  15.         self.main_widget = QtWidgets.QWidget(MainWindow)  # 创建窗口主部件
  16.         self.main_layout = QtWidgets.QGridLayout()  # 创建主部件的网格布局
  17.         self.main_widget.setLayout(self.main_layout)  # 设置窗口主部件布局为网格布局
  18.  
  19.         self.left_widget = QtWidgets.QWidget(MainWindow)  # 创建左侧部件
  20.         self.left_widget.setObjectName('left_widget')
  21.         self.left_layout = QtWidgets.QGridLayout()
  22.         self.left_widget.setLayout(self.left_layout)  # 设置左侧部件布局为网格
  23.  
  24.         self.right_widget = QtWidgets.QWidget(MainWindow)  # 创建右侧部件
  25.         self.right_widget.setObjectName('right_widget')
  26.         self.right_layout = QtWidgets.QGridLayout()
  27.         self.right_widget.setLayout(self.right_layout)  # 设置右侧部件布局为网格
  28.  
  29.         self.main_layout.addWidget(self.left_widget, 0, 0, 15, 2)  # 左侧部件在第0行第0列，占15行2列
  30.         self.main_layout.addWidget(self.right_widget, 0, 2, 15, 10)  # 右侧部件在第0行第2列，占15行10列
  31.         MainWindow.setCentralWidget(self.main_widget)  # 设置窗口主部件
  32.  
  33.         # ------------ 左侧菜单模块，使用网格布局 ------------ #
  34.         # 关闭按钮
  35.         self.close_button = QtWidgets.QPushButton("")
  36.         # 空白按钮
  37.         self.other_button = QtWidgets.QPushButton("")
  38.         # 最小化按钮
  39.         self.minimize_button = QtWidgets.QPushButton("")
  40.  
  41.         # JUNIOR 标志
  42.         self.left_label_1 = QtWidgets.QPushButton("JUNIOR")
  43.         self.left_label_1.setObjectName('left_label')
  44.         # SENIOR 标志
  45.         self.left_label_2 = QtWidgets.QPushButton("SENIOR")
  46.         self.left_label_2.setObjectName('left_label')
  47.  
  48.         # 打开摄像头 按钮
  49.         self.camera_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.video', color='white'), "打开相机")
  50.         self.camera_button.setObjectName('left_button')
  51.         # 用户登录 按钮
  52.         self.login_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.user-alt', color='white'), "用户登录")
  53.         self.login_button.setObjectName('left_button')
  54.  
  55.         # 用户登出 按钮
  56.         self.logout_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.sign-out-alt', color='white'), "用户登出")
  57.         self.logout_button.setObjectName('left_button')
  58.         # 用户注册 按钮
  59.         self.register_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.user-plus', color='white'), "用户注册")
  60.         self.register_button.setObjectName('left_button')
  61.         # 查询用户 按钮
  62.         self.query_user_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.search', color='white'), "修改信息")
  63.         self.query_user_button.setObjectName('left_button')
  64.  
  65.         # 人脸识别 按钮
  66.         self.recognition_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.eye', color='white'), "人脸识别")
  67.         self.recognition_button.setObjectName('left_button')
  68.         # 人脸对比 按钮
  69.         self.face_compare_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.people-arrows', color='white'),
  70.                                                          "人脸对比")
  71.         self.face_compare_button.setObjectName('left_button')
  72.         # 活体检测 按钮
  73.         self.biopsy_testing_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.atom', color='white'), "活体检测")
  74.         self.biopsy_testing_button.setObjectName('left_button')
  75.         # 精细分割 按钮
  76.         self.fine_segmentation_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.cut', color='white'), "精细分割")
  77.         self.fine_segmentation_button.setObjectName('left_button')
  78.         # 关键点检测 按钮
  79.         self.attitude_detection_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.draw-polygon', color='white'),
  80.                                                                "姿态检测")
  81.         self.attitude_detection_button.setObjectName('left_button')
  82.  
  83.         # 添加左侧按钮
  84.         self.left_layout.addWidget(self.close_button, 0, 0, 1, 1)
  85.         self.left_layout.addWidget(self.minimize_button, 0, 2, 1, 1)
  86.         self.left_layout.addWidget(self.other_button, 0, 1, 1, 1)
  87.  
  88.         self.left_layout.addWidget(self.left_label_1, 1, 0, 1, 3)
  89.         self.left_layout.addWidget(self.camera_button, 2, 0, 1, 3)
  90.         self.left_layout.addWidget(self.login_button, 3, 0, 1, 3)
  91.         self.left_layout.addWidget(self.logout_button, 4, 0, 1, 3)
  92.         self.left_layout.addWidget(self.register_button, 5, 0, 1, 3)
  93.         self.left_layout.addWidget(self.query_user_button, 6, 0, 1, 3)
  94.  
  95.         self.left_layout.addWidget(self.left_label_2, 7, 0, 1, 3)
  96.         self.left_layout.addWidget(self.recognition_button, 8, 0, 1, 3)
  97.         self.left_layout.addWidget(self.biopsy_testing_button, 9, 0, 1, 3)
  98.         self.left_layout.addWidget(self.face_compare_button, 10, 0, 1, 3)
  99.         self.left_layout.addWidget(self.fine_segmentation_button, 11, 0, 1, 3)
  100.         self.left_layout.addWidget(self.attitude_detection_button, 12, 0, 1, 3)
  101.  
  102.         # ------------ 右侧模块，使用网格布局 ------------ #
  103.         # 摄像头展示部分
  104.         self.camera_label = QtWidgets.QLabel('\n人脸识别\n\n系统')
  105.         self.camera_label.setAlignment(Qt.AlignCenter)
  106.         self.camera_label.setObjectName('camera_label')
  107.  
  108.         # 信息展示界面
  109.         self.img_label_1 = QtWidgets.QLabel('')
  110.         self.img_label_2 = QtWidgets.QLabel('')
  111.         self.img_label_3 = QtWidgets.QLabel('')
  112.         self.msg_label_1 = QtWidgets.QLabel('')
  113.         self.msg_label_2 = QtWidgets.QLabel('')
  114.         self.msg_label_3 = QtWidgets.QLabel('')
  115.         self.remind_label = QtWidgets.QLabel('')
  116.  
  117.         self.right_layout.addWidget(self.camera_label, 1, 0, 3, 10)
  118.         self.right_layout.addWidget(self.img_label_1, 5, 1, )
  119.         self.right_layout.addWidget(self.img_label_2, 5, 3, )
  120.         self.right_layout.addWidget(self.img_label_3, 5, 5, )
  121.         self.right_layout.addWidget(self.msg_label_1, 5, 2, )
  122.         self.right_layout.addWidget(self.msg_label_2, 5, 4, )
  123.         self.right_layout.addWidget(self.msg_label_3, 5, 6, )
  124.         self.right_layout.addWidget(self.remind_label, 5, 3, )
  125.  
  126.         self.camera_label.setMinimumSize(QtCore.QSize(900, 560))
  127.         self.camera_label.setMaximumSize(QtCore.QSize(900, 560))
  128.  
  129.         labels = [self.img_label_1, self.msg_label_1,
  130.                   self.img_label_2, self.msg_label_2,
  131.                   self.img_label_3, self.msg_label_3]
  132.         for label in labels:
  133.             label.setMinimumSize(QtCore.QSize(150, 200))
  134.             label.setMaximumSize(QtCore.QSize(150, 200))
  135.  
  136.         self.remind_label.setMinimumSize(QtCore.QSize(170, 200))
  137.         self.remind_label.setMaximumSize(QtCore.QSize(170, 200))
  138.  
  139.  
  140. if __name__ == '__main__':
  141.     app = QtWidgets.QApplication(sys.argv)
  142.     widgets = QtWidgets.QMainWindow()
  143.     ui = UserMainUi()
  144.     ui.setupUi(widgets)
  145.     widgets.show()
  146.     sys.exit(app.exec_())

3、项目UI美化

        通过以下方式进行界面的美化工作：

        （1）美化控制按钮

                通过 setFixedSize 方法设置按钮大小，通过 setStyleSheet 方法设置按钮CSS样式：

  1.         self.close_button.setFixedSize(28, 28)
  2.         self.other_button.setFixedSize(28, 28)
  3.         self.minimize_button.setFixedSize(28, 28)
  4.  
  5.         self.close_button.setStyleSheet('''
  6.             QPushButton{
  7.                 background:#F76677;
  8.                 border-radius:7px;}
  9.             QPushButton:hover{
  10.                 background:red;}''')
  11.         self.other_button.setStyleSheet('''
  12.             QPushButton{
  13.                 background:#F7D674;
  14.                 border-radius:7px;}
  15.             QPushButton:hover{
  16.                 background:yellow;}''')
  17.         self.minimize_button.setStyleSheet('''
  18.             QPushButton{
  19.                 background:#6DDF6D;
  20.                 border-radius:7px;}
  21.             QPushButton:hover{
  22.                 background:green;}''')

                效果：

​        （2）美化左侧布局

                通过 setStyleSheet 方法设置左侧布局 left_widget 的样式，其中CSS样式的 QWidget #left_label 等字段对应上方初始化代码组件 setObjectName 方法的值，如：

        self.left_label_1.setObjectName('left_label')

         美化代码：

  1.         # 设置左侧菜单按钮
  2.         self.left_widget.setStyleSheet('''
  3.             QPushButton{
  4.                 border:none;
  5.                 color:white;
  6.                 height:35px;
  7.                 padding-left:5px;
  8.                 padding-right:10px;
  9.                 font-size:15px;}
  10.                 
  11.             QWidget#left_widget{
  12.                 background:#96989B;
  13.                 border-top-left-radius:5px;
  14.                 border-bottom-left-radius:5px;}
  15.                 
  16.             QPushButton#left_label{
  17.                 border:none;
  18.                 font-size:20px;
  19.                 font-weight:700;
  20.                 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
  21.                 
  22.             QPushButton#left_button:hover{
  23.                 color:white;
  24.                 border-radius:10px;
  25.                 background:#646669;}''')

                效果：

​         （3）美化右侧布局

                方法如上，代码：

  1.     self.right_widget.setStyleSheet('''
  2.         QWidget#right_widget{
  3.         background:#AAACAF;
  4.         border-top-right-radius:5px;
  5.         border-bottom-right-radius:5px;}''')

                效果：

​        （4）去除组件间缝隙

                代码如下：

  1.         # 设置右边布局间距为0
  2.         self.right_layout.setContentsMargins(0, 0, 2, 1)  
  3.         # 设置布局内部件间隙
  4.         self.main_layout.setSpacing(0)  
  5.         self.right_layout.setSpacing(0)
  6.         self.left_layout.setSpacing(0)

                效果：

​        （5）整体样式美化

                通过 setWindowOpacity 方法设置透明度

                通过 setAttribute(QtCore.Qt.WA_TranslucentBackground) 方法隐藏外围边框

                通过 setWindowFlag(QtCore.Qt.FramelessWindowHint) 方法产生一个无边框的窗口，用户不能移动和改变大小

                通过 setWindowTitle("人脸识别") 方法设置窗口标题

                通过 setWindowIcon(QIcon('logo.jpg')) 方法设置窗口logo

注意：QIcon('logo.jpg') 中的 logo.jpg 为导入的图片名称路径，你导入的图片叫什么名字就写什么名字。

  1.         # 设置整体样式
  2.         MainWindow.setWindowOpacity(0.9)  # 设置窗口透明度
  3.         MainWindow.setAttribute(QtCore.Qt.WA_TranslucentBackground)  # 隐藏外围边框
  4.         MainWindow.setWindowFlag(QtCore.Qt.FramelessWindowHint) # 产生一个无边框的窗口，用户不能移动和改变大小
  5.         MainWindow.setWindowTitle("人脸识别")  # 设置窗口标题
  6.         MainWindow.setWindowIcon(QIcon('logo.jpg'))  # 设置窗口logo

        效果：

​        （6）其他组件美化

                代码：

  1.         self.camera_label.setStyleSheet('''
  2.                                         color:#F8FCFF;
  3.                                         font-size:60px;
  4.                                         font-weight:bold;
  5.                                         font-family:Roman times;''')
  6.         self.remind_label.setStyleSheet('''
  7.                                         color:#F0F7F4;
  8.                                         font-size:30px;
  9.                                         font-family:Microsoft YaHei;''')
  10.         self.remind_label.setWordWrap(True)
  11.         self.remind_label.setAlignment(Qt.AlignRight)

                效果：

​

4、美化后的UI代码

        最终代码：

  1. # -*- coding: utf-8 -*-
  2. import sys
  3. import qtawesome
  4. from PyQt5.QtGui import *
  5. from PyQt5.QtCore import Qt
  6. from PyQt5 import QtCore, QtWidgets
  7.  
  8. class UserMainUi(object):
  9.     def setupUi(self, MainWindow):
  10.         MainWindow.setObjectName("UserMainWindow")
  11.         MainWindow.resize(1200, 800)
  12.  
  13.         # ------------ 整体界面设计，使用网格布局 ------------ #
  14.         self.main_widget = QtWidgets.QWidget(MainWindow)  # 创建窗口主部件
  15.         self.main_layout = QtWidgets.QGridLayout()  # 创建主部件的网格布局
  16.         self.main_widget.setLayout(self.main_layout)  # 设置窗口主部件布局为网格布局
  17.  
  18.         self.left_widget = QtWidgets.QWidget(MainWindow)  # 创建左侧部件
  19.         self.left_widget.setObjectName('left_widget')
  20.         self.left_layout = QtWidgets.QGridLayout()
  21.         self.left_widget.setLayout(self.left_layout)  # 设置左侧部件布局为网格
  22.  
  23.         self.right_widget = QtWidgets.QWidget(MainWindow)  # 创建右侧部件
  24.         self.right_widget.setObjectName('right_widget')
  25.         self.right_layout = QtWidgets.QGridLayout()
  26.         self.right_widget.setLayout(self.right_layout)  # 设置右侧部件布局为网格
  27.  
  28.         self.main_layout.addWidget(self.left_widget, 0, 0, 15, 2)  # 左侧部件在第0行第0列，占15行2列
  29.         self.main_layout.addWidget(self.right_widget, 0, 2, 15, 10)  # 右侧部件在第0行第2列，占15行10列
  30.         MainWindow.setCentralWidget(self.main_widget)  # 设置窗口主部件
  31.  
  32.         # ------------ 左侧菜单模块，使用网格布局 ------------ #
  33.         # 关闭按钮
  34.         self.close_button = QtWidgets.QPushButton("")
  35.         # 空白按钮
  36.         self.other_button = QtWidgets.QPushButton("")
  37.         # 最小化按钮
  38.         self.minimize_button = QtWidgets.QPushButton("")
  39.  
  40.         # JUNIOR 标志
  41.         self.left_label_1 = QtWidgets.QPushButton("JUNIOR")
  42.         self.left_label_1.setObjectName('left_label')
  43.         # SENIOR 标志
  44.         self.left_label_2 = QtWidgets.QPushButton("SENIOR")
  45.         self.left_label_2.setObjectName('left_label')
  46.  
  47.         # 打开摄像头 按钮
  48.         self.camera_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.video', color='white'), "打开相机")
  49.         self.camera_button.setObjectName('left_button')
  50.         # 用户登录 按钮
  51.         self.login_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.user-alt', color='white'), "用户登录")
  52.         self.login_button.setObjectName('left_button')
  53.  
  54.         # 用户登出 按钮
  55.         self.logout_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.sign-out-alt', color='white'), "用户登出")
  56.         self.logout_button.setObjectName('left_button')
  57.         # 用户注册 按钮
  58.         self.register_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.user-plus', color='white'), "用户注册")
  59.         self.register_button.setObjectName('left_button')
  60.         # 查询用户 按钮
  61.         self.query_user_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.search', color='white'), "修改信息")
  62.         self.query_user_button.setObjectName('left_button')
  63.  
  64.         # 人脸识别 按钮
  65.         self.recognition_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.eye', color='white'), "人脸识别")
  66.         self.recognition_button.setObjectName('left_button')
  67.         # 人脸对比 按钮
  68.         self.face_compare_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.people-arrows', color='white'),
  69.                                                          "人脸对比")
  70.         self.face_compare_button.setObjectName('left_button')
  71.         # 活体检测 按钮
  72.         self.biopsy_testing_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.atom', color='white'), "活体检测")
  73.         self.biopsy_testing_button.setObjectName('left_button')
  74.         # 精细分割 按钮
  75.         self.fine_segmentation_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.cut', color='white'), "精细分割")
  76.         self.fine_segmentation_button.setObjectName('left_button')
  77.         # 关键点检测 按钮
  78.         self.attitude_detection_button = QtWidgets.QPushButton(qtawesome.icon('fa5s.draw-polygon', color='white'),
  79.                                                                "姿态检测")
  80.         self.attitude_detection_button.setObjectName('left_button')
  81.  
  82.         # 添加左侧按钮
  83.         self.left_layout.addWidget(self.close_button, 0, 0, 1, 1)
  84.         self.left_layout.addWidget(self.other_button, 0, 1, 1, 1)
  85.         self.left_layout.addWidget(self.minimize_button, 0, 2, 1, 1)
  86.  
  87.         self.left_layout.addWidget(self.left_label_1, 1, 0, 1, 3)
  88.         self.left_layout.addWidget(self.camera_button, 2, 0, 1, 3)
  89.         self.left_layout.addWidget(self.login_button, 3, 0, 1, 3)
  90.         self.left_layout.addWidget(self.logout_button, 4, 0, 1, 3)
  91.         self.left_layout.addWidget(self.register_button, 5, 0, 1, 3)
  92.         self.left_layout.addWidget(self.query_user_button, 6, 0, 1, 3)
  93.  
  94.         self.left_layout.addWidget(self.left_label_2, 7, 0, 1, 3)
  95.         self.left_layout.addWidget(self.recognition_button, 8, 0, 1, 3)
  96.         self.left_layout.addWidget(self.biopsy_testing_button, 9, 0, 1, 3)
  97.         self.left_layout.addWidget(self.face_compare_button, 10, 0, 1, 3)
  98.         self.left_layout.addWidget(self.fine_segmentation_button, 11, 0, 1, 3)
  99.         self.left_layout.addWidget(self.attitude_detection_button, 12, 0, 1, 3)
  100.  
  101.         # ------------ 右侧模块，使用网格布局 ------------ #
  102.         # 摄像头展示部分
  103.         self.camera_label = QtWidgets.QLabel('\n人脸识别\n\n系统')
  104.         self.camera_label.setAlignment(Qt.AlignCenter)
  105.  
  106.         # 信息展示界面
  107.         self.msg_label_a = QtWidgets.QLabel('')
  108.         self.msg_label_b = QtWidgets.QLabel('')
  109.         self.msg_label_c = QtWidgets.QLabel('')
  110.         self.remind_label = QtWidgets.QLabel('')
  111.  
  112.         self.right_layout.addWidget(self.camera_label, 1, 0, 3, 10)
  113.         self.right_layout.addWidget(self.msg_label_a, 5, 2, )
  114.         self.right_layout.addWidget(self.msg_label_b, 5, 4, )
  115.         self.right_layout.addWidget(self.msg_label_c, 5, 6, )
  116.         self.right_layout.addWidget(self.remind_label, 5, 3, )
  117.  
  118.         self.camera_label.setMinimumSize(QtCore.QSize(900, 560))
  119.         self.camera_label.setMaximumSize(QtCore.QSize(900, 560))
  120.  
  121.         labels = [self.msg_label_a, self.msg_label_b, self.msg_label_c]
  122.         for label in labels:
  123.             label.setMinimumSize(QtCore.QSize(150, 200))
  124.             label.setMaximumSize(QtCore.QSize(150, 200))
  125.  
  126.         self.remind_label.setMinimumSize(QtCore.QSize(170, 200))
  127.         self.remind_label.setMaximumSize(QtCore.QSize(170, 200))
  128.  
  129.         # ----------------------美化------------------ #
  130.         # 美化控制按钮
  131.         self.close_button.setFixedSize(28, 28)
  132.         self.other_button.setFixedSize(28, 28)
  133.         self.minimize_button.setFixedSize(28, 28)
  134.  
  135.         self.close_button.setStyleSheet('''
  136.             QPushButton{
  137.                 background:#F76677;
  138.                 border-radius:7px;}
  139.             QPushButton:hover{
  140.                 background:red;}''')
  141.         self.other_button.setStyleSheet('''
  142.             QPushButton{
  143.                 background:#F7D674;
  144.                 border-radius:7px;}
  145.             QPushButton:hover{
  146.                 background:yellow;}''')
  147.         self.minimize_button.setStyleSheet('''
  148.             QPushButton{
  149.                 background:#6DDF6D;
  150.                 border-radius:7px;}
  151.             QPushButton:hover{
  152.                 background:green;}''')
  153.  
  154.         # 美化左侧布局
  155.         self.left_widget.setStyleSheet('''
  156.             QPushButton{
  157.                 border:none;
  158.                 color:white;
  159.                 height:35px;
  160.                 padding-left:5px;
  161.                 padding-right:10px;
  162.                 font-size:15px;}
  163.                 
  164.             QWidget#left_widget{
  165.                 background:#96989B;
  166.                 border-top-left-radius:5px;
  167.                 border-bottom-left-radius:5px;}
  168.                 
  169.             QPushButton#left_label{
  170.                 border:none;
  171.                 font-size:20px;
  172.                 font-weight:700;
  173.                 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
  174.                 
  175.             QPushButton#left_button:hover{
  176.                 color:white;
  177.                 border-radius:10px;
  178.                 background:#646669;}''')
  179.  
  180.         # 美化右侧布局
  181.         self.right_widget.setStyleSheet('''
  182.             QWidget#right_widget{
  183.                 background:#AAACAF;
  184.                 border-top-right-radius:5px;
  185.                 border-bottom-right-radius:5px;}''')
  186.  
  187.         # 去除组件间间隙
  188.         self.right_layout.setContentsMargins(0, 0, 2, 1)
  189.         self.main_layout.setSpacing(0)
  190.         self.right_layout.setSpacing(0)
  191.         self.left_layout.setSpacing(0)
  192.  
  193.         # 设置整体样式
  194.         MainWindow.setWindowOpacity(0.9)  # 设置窗口透明度
  195.         MainWindow.setAttribute(QtCore.Qt.WA_TranslucentBackground)  # 隐藏外围边框
  196.         MainWindow.setWindowFlag(QtCore.Qt.FramelessWindowHint) # 产生一个无边框的窗口，用户不能移动和改变大小
  197.         MainWindow.setWindowTitle("人脸识别")  # 设置标题
  198.         MainWindow.setWindowIcon(QIcon('Logo.jpg'))  # 设置logo
  199.  
  200.         # 其他组件美化
  201.         self.camera_label.setStyleSheet('''
  202.                                         color:#F8FCFF;
  203.                                         font-size:60px;
  204.                                         font-weight:bold;
  205.                                         font-family:Roman times;''')
  206.         self.remind_label.setStyleSheet('''
  207.                                         color:#F0F7F4;
  208.                                         font-size:30px;
  209.                                         font-family:Microsoft YaHei;''')
  210.         self.remind_label.setWordWrap(True)
  211.         self.remind_label.setAlignment(Qt.AlignRight)
  212.  
  213.  
  214.  
  215.  
  216. if __name__ == '__main__':
  217.     app = QtWidgets.QApplication(sys.argv)
  218.     widgets = QtWidgets.QMainWindow()
  219.     ui = UserMainUi()
  220.     ui.setupUi(widgets)
  221.     widgets.show()
  222.     sys.exit(app.exec_())

        最终样式：

​注：现在完成的UI界面，各个按钮还不能进行点击，即逻辑部分的代码还没有编写。

继续阅读：

UI事件处理：Python | 人脸识别系统 — UI事件处理

摄像头画面展示：Python | 人脸识别系统 — 摄像头画面展示

用户端逻辑：

管理员端逻辑：

注：以上代码仅供参考，如需运行，参考GitHub源代码： Su-Face-Recognition

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/737095
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号