自定义控件

发表于2023-07-14|更新于2026-09-01|教程PySide

|总字数:1.4k|阅读时长:5分钟|浏览量:

Qt提供了比较丰富的内置控件，一些常规的开发通常够用。

但是有时，还是需要我们自己开发特殊用途的自定义控件。

比如，在我们的项目实战3中，要求开发一个模拟充电桩、洗车机等设备的测试工具。

模拟这些设备的控件，就需要我们自己定制开发。

QPainter

我们前面学过的内置控件，比如按钮、输入框、选择框，它们的视觉界面是怎么呈现出来的呢？

其实都是 Qt 画出来的。

Qt是通过 QPainter 类实现画出各种控件的。

QPainter 类对象可以在任何继承自 QPaintDevice （比如QWidget, QImage, QPixmap ）的实例上绘制图形、文字

控件的视觉界面，其实就是通过画出各种线条、矩形、圆形，等这些形状组合出来的。

画线

比如，下面的代码调用 QPainter 对象的 drawLine 方法画一条线，

from PySide2 import  QtGui, QtWidgets 

# 自定义一个QWidget的子类
class MyWidget(QtWidgets.QWidget):

    # QWidget类的 paintEvent方法会被Qt调用画出控件自身的形象
    def paintEvent(self, e): 
        # 参数 是绘制图形 目标对象
        painter = QtGui.QPainter(self)  
        # 画一条线，起点坐标为 50,80 ; 终点坐标为 200,300
        painter.drawLine(50, 80, 200, 300)
        
        painter.end() # 结束绘制
       
app = QtWidgets.QApplication()
window = QtWidgets.QMainWindow()
window.resize(500, 500)

my = MyWidget(window)
my.move(0,0)
my.resize(500,500)

window.show()
app.exec_()

画笔指定粗度、颜色

上面的示例中，画线的宽度比较细，颜色是黑色

如果我们想让画出的线有指定的宽度和颜色，该怎么办？

这是由 QPainter 的画笔属性（pen）决定的

缺省的画笔属性的宽度为1个像素，颜色为黑色。

我们可以设置为另外的画笔对象（QPen）作为属性

class MyWidget(QtWidgets.QWidget):

    def paintEvent(self, e):
        painter = QtGui.QPainter(self) 

        # 创建画笔对象
        pen = QtGui.QPen()
        pen.setWidth(3) # 宽度为3个像素
        pen.setColor(QtGui.QColor('red')) #颜色为红色

        # 设置 painter 的画笔属性对象
        painter.setPen(pen)

        painter.drawLine(50, 80, 200, 300)
        painter.end()

画点

调用 QPainter 对象的 drawPoint 方法可以画一个点，如下

class MyWidget(QtWidgets.QWidget):

    def paintEvent(self, e): 
        painter = QtGui.QPainter(self)

        # 创建画笔对象
        pen = QtGui.QPen()
        pen.setWidth(10) # 宽度为10个像素
        pen.setColor(QtGui.QColor('red'))
        painter.setPen(pen)


        # 画一个点坐标为 200, 150
        painter.drawPoint(200, 150)
        
        painter.end()

画矩形

调用 QPainter 对象的 drawRect 方法可以画一个矩形，如下

class MyWidget(QtWidgets.QWidget):

    def paintEvent(self, e): 
        painter = QtGui.QPainter(self)

        # 画一个矩形，左上角坐标为 50, 50
        # 宽度为200像素，高度为100像素
        painter.drawRect(50, 50, 300,300)
        
        painter.end()

画椭圆

调用 QPainter 对象的 drawEllipse 方法可以画一个椭圆，如下

class MyWidget(QtWidgets.QWidget):

    def paintEvent(self, e): 
        painter = QtGui.QPainter(self)

        painter.drawRect(50, 50, 300,200)
        
        # 画一个椭圆，左上角坐标为 50, 50
        # 水平方向直径为300像素，垂直方向直径为200像素
        painter.drawEllipse(50, 50, 300,200)
        painter.end()

可以想象，如果水平垂直方向直径相同，那就是一个正圆形了。

画刷填充

前面我们画的矩形和椭圆，这些图形内部的颜色没有设置的，和底色一致

如果我们想设定矩形椭圆等图形内部填充的颜色，就要通过 QPainter 的画刷属性（brush）来设置

from PySide2 import  QtGui, QtWidgets 
from PySide2.QtCore import Qt

class MyWidget(QtWidgets.QWidget):

    def paintEvent(self, e): 
        painter = QtGui.QPainter(self)

        # 创建画刷QBrush对象
        brush = QtGui.QBrush()
        # 设置画刷的颜色
        brush.setColor(QtGui.QColor("yellow"))
        # 设置画刷的填充样式
        brush.setStyle(Qt.SolidPattern)

        # 指定使用这个画刷对象
        painter.setBrush(brush)

        # 画图
        painter.drawRect(50, 50, 100,100)        
        painter.drawEllipse(200, 200, 100,100)

        painter.end() 
       
       
app = QtWidgets.QApplication()

window = QtWidgets.QMainWindow()
window.resize(500, 500)

my = MyWidget(window)
my.move(0,0)
my.resize(500,500)

window.show()
app.exec_()

其中

1	brush.setStyle(Qt.SolidPattern)

设定了图形内部的填充样式， SolidPattern 是最常见的填满的风格，还有其它的比如

Dense1Pattern

HorPattern

VerPattern

CrossPattern

等等，具体可以参考这里

画文字

我们也可以在控件上绘制文字，如下：

from PySide2 import  QtGui, QtWidgets 

class MyWidget(QtWidgets.QWidget):

    def paintEvent(self, e): 
        painter = QtGui.QPainter(self)

        # 文字的粗细颜色，由画笔属性决定
        pen = QtGui.QPen()
        pen.setWidth(1)
        pen.setColor(QtGui.QColor('red'))
        painter.setPen(pen) # 设置画笔

        # 字体
        font = QtGui.QFont()
        font.setFamily('黑体') #字体类型
        font.setPointSize(30)  # 字体大小
        painter.setFont(font)  # 设置字体

        painter.drawText(100, 100, 'hello，白月黑羽!')

        painter.end() 
       
       
app = QtWidgets.QApplication()

window = QtWidgets.QMainWindow()
window.resize(500, 500)

my = MyWidget(window)
my.move(0,0)
my.resize(500,500)

window.show()
app.exec_()

自定义控件示例

现在我们可以创建一个真正需要用到的自定义控件了。

在黑羽Elife项目中，要求开发一个模拟充电桩、洗车机设备的测试工具。

下面的示例代码来实现 充电口控件

from PySide2 import  QtGui, QtWidgets 

class QOutlet(QtWidgets.QWidget):
    """
    插座控件
    """

    def __init__(self,parent, color) -> None:
        super().__init__(parent)
        
        self.color = color
        # 控件设置为固定大小
        self.setMinimumSize(70, 70)
        self.setMaximumSize(70, 70)

    def paintEvent(self, e):
        painter = QtGui.QPainter(self)

        # 画插座边框，细线条
        pen = QtGui.QPen()
        pen.setWidth(1)

        pen.setColor(QtGui.QColor(self.color)) 
        painter.setPen(pen)
        painter.drawRect(0, 0, 60, 60)

        # 画插孔线条，组线条
        pen = QtGui.QPen()
        pen.setWidth(3)
        pen.setColor(QtGui.QColor(self.color))
        painter.setPen(pen)

        painter.drawLine(12,10,12,25)
        painter.drawLine(30,10,30,25)
        painter.drawLine(48,10,48,25)

        painter.drawLine(10,35,20,50)
        painter.drawLine(50,35,40,50)

        painter.end()

       
app = QtWidgets.QApplication()

window = QtWidgets.QMainWindow()
window.resize(500, 500)

# 创建第1个插座实例
my = QOutlet(window,'green')
my.move(0,0)

# 创建第2个插座实例
my = QOutlet(window,'red')
my.move(100,0)

# 创建第3个插座实例
my = QOutlet(window,'blue')
my.move(200,0)

window.show()
app.exec_()

文章作者: YuKiFuHaNe

文章链接: https://blog.yukifuhane.cn.eu.org/2023/07/14/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8E%A7%E4%BB%B6/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 YuKiFuHaNeの博客！

PySide2 QPainter QPen 自定义控件 paintEvent

相关推荐

后台线程和信号

界面阻塞问题前面我们的练习里开发了一个类似 Postman 的HTTP接口测试工具。其中，具体发送请求消息的代码如下 1234567891011121314151617181920212223242526272829def sendRequest(self): method = self.ui.boxMethod.currentText() url = self.ui.editUrl.text() payload = self.ui.editBody.toPlainText() # 获取消息头 headers = {} # 此处省略一些对消息头的处理 req = requests.Request(method, url, headers=headers, data=payload ) prepared...

树控件QTreeWidget 树控件树控件，是和 QTreeWidgetItem 树节点控件结合使用的。如下图所示 1本节讲解仅内部学员可见提示框QMessageBox 类可以用来弹出各种提示框官网介绍该类可以通过一系列静态方法，显示如下弹出框错误报告使用 critical 方法 123456from PySide2.QtWidgets import QMessageBoxQMessageBox.critical( self.ui, '错误', '请选择爬取数据存储路径！') 警告使用 warning 方法 1234QMessageBox.warning( self.ui, '阅读太快', '阅读客户协议必须超过1分钟') 信息提示使用 information 方法 1234QMessageBox.information( self.ui, '操作成功', '请继...

页面设计和布局

Qt Designer 简介点击这里，边看视频讲解，边学习以下内容 QT程序界面的一个个窗口、控件，就是像上面那样用相应的代码创建出来的。但是，把你的脑海里的界面，用代码直接写出来，是有些困难的。很多时候，运行时呈现的样子，不是我们要的。我们经常还要修改代码调整界面上控件的位置，再运行预览。反复多次这样操作。可是这样，真的…太麻烦了。其实，我们可以用QT界面生成器 Qt Designer ，拖拖拽拽就可以直观的创建出程序大体的界面。怎么运行这个工具呢？ Windows下，运行 Python安装目录下 Scripts\pyside2-designer.exe 这个可执行文件如果你安装的是pyqt5，运行 Python安装目录下 Scripts\pyqt5designer.exe 这个可执行文件根据上面链接的视频讲解，大家初步了解一下 Qt Designer 的使用方法。通过 Qt Designer 设计的界面，最终是保存在一个ui文件中的。大家可以打开这个ui文件看看，就是一个XML格式的界面定义。动态加载UI文件点击这里，边看视频讲解，边学习以下内容有了...

按钮QPushButton 就是常见的按钮官网介绍信号：被点击当按钮被点击就会发出 clicked 信号，可以这样指定处理该信号的函数 1button.clicked.connect(handleCalc) 改变文本代码中可以使用 setText 方法来改变按钮文本，比如 1button.setText(text) 禁用、启用所有控件（继承自QWidget类）都支持禁用和启用方法。禁用后，该控件不再处理用户操作禁用 1button.setEnabled(False) 启用 1button.setEnabled(True) 设置图标可以通过如下方法给按钮设置图标 12345678from PySide2.QtCore import Qt,QSizefrom PySide2.QtGui import QIcon# 设置图标button.setIcon(QIcon('logo.png'))# 设置图标大小button.setIconSize(QSize(30, 30)) 单行文本框QLineEdit 是只能单行编辑的文本框。官网介绍...

QSS 概念点击这里，边看视频讲解，边学习以下内容前面，我们开发的程序界面有点简陋。大家点击这里，下载一个白月黑羽实战班学员开发的程序界面代码，解压后，拖动里面的main.ui界面文件到Qt设计师里面。像这样要让产品更好看一些，通常就是指定界面元素的显示样式。比如指定颜色、字体、间距。像这样 Qt有种定义界面显示样式的方法，称之为 Qt Style Sheet ，简称 QSS 如果你学习过Web网页开发，就会发现这个名词和 CSS 特别的相似。没错，它的语法和用途和 CSS 特别的相似。我们来看上图对应的示例如果在设计师界面上最上层的 MainWindow 对象 styleSheet 属性指定如下的内容 1234QPushButton { color: red ; font-size:15px;} 就会发现，所有的按钮上的文字都变成了红色的，并且字体变大了。注意这个指定界面元素显示样式的语法，由 selector 和 declaration 组成。花括号前面的部分，比如示例中的 QPushButton 称...

PySide2 内嵌 Web 浏览器

有时候，我们需要在程序中嵌入浏览器，显示一个指定的网页。 Qt5中，有一个 QtWebEngineWidgets 模块，通过它，可以启动基于Chromium的浏览器（和chrome是同样的内核）进程，并且把web界面内嵌入 Qt程序中。参考官网说明案例我们可以实现一个内嵌浏览器，打开白月黑羽网站。整个案例的参考代码，点击这里下载链接：https://pan.baidu.com/s/1FBLdSU0w_LYSsPUzVjsQsA 提取码：byhy 首先使用Qt designer设计界面。注意：显示web内容的是 QtWebEngineWidgets 模块里面的 QWebEngineView类。所以需要 premote 一个QtWindget 控件为 QWebEngineView。详见参考代码中的ui文件。创建完界面后，使用命令 1pyside2-uic main.ui > ui_main.py 把界面定义转化为Python代码。然后，编写如下代码，使用 QWebEngineView 打开网址 12345678910111213141516171819from...