PyQt5 简单入门——实现伪装目标检测

毕业设计其中一个环节是为伪装目标检测算法设计一个用户界面，实现选择图片或拍照上传原始图片，显示伪装目标检测结果，并且可以保存。

之前没有使用过Qt绘制界面编写代码，下面大致记录一下基本的使用方法。

前端界面绘制

安装流程可以参考：VSCode配置PyQt5过程

新建ui文件

• 可以在VSCode工作区 右击->PYQT: New Form ，也可以在QtDesigner中新建ui文件。
• 对于已经存在的ui文件可以 右击->PYQT: Edit in Designer ，也可以在QtDesigner中打开。

基本绘制

模块介绍

• 以下是QtDesigner的主界面，主要包括以下几个部分：

  • 组件工具箱：此处有很多可以使用的组件，根据需求可以直接拖拽至窗口中。
  • 页面主体操作区：用户可以在此区域进行窗口界面绘制，调整位置大小等。
  • 对象查看器：在这个区域可以看到该窗口中的所有对象及其包含关系，并对其进行删除、重命名等操作。
  • 属性编辑器：在这个区域可以对所选对象进行具体属性的编辑，例如宽高、坐标、字体样式等。
  • 信号和槽编辑器：该部分主要用于将前端和后端业务逻辑进行关联，前端发出信号，后端的槽函数做出反应。

布局

• 可以将多个组件关联为一个layout组，用于方便我们的布局。

  • 首先选中所要关联的组件，例如我选中下方的五个button。
  • 其次点击左上角的水平布局（除此之外还有垂直布局、栅格布局等）。
  • 在对象查看器中即可看到这些组件归到一个layout组下。
  • 在属性编辑器中可以对该布局进行操作，例如上下左右的margin（留白）和组件之间的padding（边距）属性。

  

• 水平布局的button组件往往是非常的扁的（高根据字体大小适应），若要调节其高，可以在组件的属性中限制其最小高度。（相应地，在垂直布局中限制最小宽度）

  

样式

• 因为这次的界面比较简单，没有非常复杂的设计，所以我的页面设计均在DtDesigner中进行，并未直接在代码中添加。

• 具体流程如下：

  • 选中组件->右击->改变样式表

    

  • 编写修改属性的代码

    • 我分别修改了背景颜色、文字颜色、按钮圆角和图标的本地路径。以及当鼠标悬浮在按钮上时的背景颜色。

    

    

    • 按钮的图标大小可以在button组件的属性中找到iconSize进行修改，图标和文字的位置Qt可以自动调节，如果需要其他复杂布局可以网络搜索。

    

    • 各种图标的下载可以去iconfont

其他

• 如果需要禁止用户拖拽窗口大小，可以在窗口的属性中修改minimumSize和maxmumSize为当前窗口大小，则最大化按钮和窗口拖拽失效。

• 如果窗口为MainWindow类型，且不需要上下的状态栏和菜单栏可以在右侧的对象查看器中右击移除。

  

• 如果需要给应用程序添加一个图标，如图所示，则可以在窗口组件的属性中，上传本地图片作为图标。

  

  

添加函数

• 要与后端交互，需要为组件添加槽函数，我这里只用到了button和且只用到了它的单击操作（clicked()），流程如下：

  • 点击工具栏中的 编辑信号/槽，即可进入信号和槽的编辑模式。

    

  • 左键长按需要添加函数的组件并将其拖拽至空白处会出现配置连接窗口。

  • 点击单机信号（clicked()）后点击右侧的编辑，编辑槽函数。

  • 点击加号添加自定义函数并重命名。

  • 添加后点击确定。

    

  • 点击新建的槽函数，并确定。

    

  • 即可看到该按钮的clicked()信号关联了一个名为my_func()的槽函数。

    

  • 槽函数创建完成。

后端逻辑编码

绘制好界面后，将ui文件保存至工作区文件夹中，系统会自动将其编译为py文件，如果为编译，可以 右击->PYQT: Compile Form 进行编译。

新建类

创建一个py文件作为主程序文件，因为代码较少，我将两个窗口类（MainWindow、CameraWindow）和main函数都定义在了main.py中。

具体类结构如下，其中的函数均为我们定义的槽函数。

主函数

编写主函数，显示主窗口。

if __name__ == "__main__":
    app = QApplication([])
    window = MainWindow()
    window.show()
    app.exec_()

具体代码

实现所需功能的具体函数代码不具有普适性和参考价值，只留作个人记录回顾。

代码地址：github仓库

最终呈现效果如下：