Qt Designer基本控件介绍——Display Widgets（显示小部件）

原创

Elsa_111

修改于 2021-07-12 18:04:19

7.5K0

修改于 2021-07-12 18:04:19

Label : 标签

QLabel的作用：
占位符
显示文本
显示图片
放置gif动画
超链接
提示标记
常用方法：
text()：获得Qlabel的文本内容
setText()：设置Qlabel的文本内容
selectedText()：返回所选择的字符
信号：
linkActiveted：当单击标签中的超链接，希望在新窗口打开这个超链接时，setOpenExternalLinks特性必须设置为True，即setOpenExternalLinks（True）
linkHovered：当鼠标指针滑过标签中嵌入的超链接时，需要用槽函数与这个信号进行绑定
详细使用示例可参考博客“PyQt5基本控件详解之QLabel（三）”

Text Browser : 文本浏览框

使用html就可以向Qtextbrowser里插入图片，如textBrowser. append("＜img src=\"{0}\" height=30 width=30＞".format(图片路径)

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QTextBrowser, QVBoxLayout, QHBoxLayout, QMessageBox
from PyQt5.QtGui import QIcon


class Simple_Window(QWidget):
    def __init__(self):
        super(Simple_Window, self).__init__()  # 使用super函数可以实现子类使用父类的方法
        self.setWindowTitle("记事本")
        self.setWindowIcon(QIcon('NoteBook.png'))  # 设置窗口图标
        self.resize(412, 412)
        self.text_browser = QTextBrowser(self)  # 实例化一个QTextBrowser对象
        self.text_browser.setText("<h1>Hello World!</h1>")  # 设置编辑框初始化时显示的文本
        # self.text_browser.setReadOnly(False) # 调用setReadOnly方法并传入False参数即可编辑文本浏览框（编辑框也可以变成只读）

        self.save_button = QPushButton("Save", self)
        self.clear_button = QPushButton("Clear", self)
        self.add_button = QPushButton("Add", self)

        self.save_button.clicked.connect(lambda: self.button_slot(self.save_button))
        self.clear_button.clicked.connect(lambda: self.button_slot(self.clear_button))
        self.add_button.clicked.connect(self.add_text)

        self.h_layout = QHBoxLayout()
        self.v_layout = QVBoxLayout()

        self.h_layout.addWidget(self.save_button)
        self.h_layout.addWidget(self.clear_button)
        self.h_layout.addWidget(self.add_button)
        self.v_layout.addWidget(self.text_browser)
        self.v_layout.addLayout(self.h_layout)

        self.setLayout(self.v_layout)

    def button_slot(self, button):
        if button == self.save_button:
            choice = QMessageBox.question(self, "Question", "Do you want to save it?", QMessageBox.Yes | QMessageBox.No)
            if choice == QMessageBox.Yes:
                with open('Second text.txt', 'w') as f:
                    f.write(self.text_browser.toPlainText())
                self.close()
            elif choice == QMessageBox.No:
                self.close()
        elif button == self.clear_button:
            self.text_browser.clear()

    def add_text(self):
        self.text_browser.append("<h1>Hello World!</h1>")  # 调用append方法可以向文本浏览框中添加文本


if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = Simple_Window()
    window.show()
    sys.exit(app.exec())

Graphics View : 用于显示QGraphicsScene场景的部件，可用来显示图片

QGraphicsView框架主要包含三个主要的类QGraphicsScene（场景）、QGraphicsView（视图）、QGraphicsItem（图元）
常用方法：
setScene()：设置场景，如果场景已经被设置到视图中，则什么都不做。
scene()：返回当前视图中的可视化场景对象。
setCacheMode()：设置缓存模式，这个属性控制视图的哪一部分存储在缓存中，QGraphicsView可以预存一些内容在QPixmap中，然后被绘制到视口上，这样做的目的是加速整体区域重绘的速度。默认情况不使用缓存模式。
cacheMode()：返回缓存模式。
setViewportUpdateMode()：设置视口更新模式，QGraphicsView 使用这个属性来决定当场景改变或者暴露时候如何刷新场景的区域，通常不需要修改这个属性，但是在有些情况下做这个工作可以改进绘图性能。
setTransformationAnchor()：设置视口变换的锚点，这个属性控制当视图做变换时应该如何摆放场景的位置。默认情况是在变换时保持视图的中心点不变。
scale()：缩放当前的视图。
rotate()：顺时针旋转当前视图。
translate()：平移当前的视图。
setTransform()：设置视图当前的转换矩阵。
transform()：获得视图当前的转换矩阵。
shear()：剪切当前视图变换。
信号：
rubberBandChanged：橡皮筋(rubber band)矩形发生改变时，发生该信号。

import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPen, QBrush, QFont, QTransform
from PyQt5.QtWidgets import (QApplication, QMainWindow, QDialog, QLabel,
                             QSlider, QMenuBar, QMenu, QAction,
                             QFormLayout, QGraphicsScene, QGraphicsView)


class TransDialog(QDialog):
    def __init__(self, view, parent=None):
        super(TransDialog, self).__init__(parent)

        self.view = view

        # 操作窗口标题
        self.setWindowTitle('视口变换操作')

        self.initUi()

    def initUi(self):
        fLayout = QFormLayout()

        # 旋转
        sdrRotate = QSlider(Qt.Horizontal)
        sdrRotate.setRange(-360, 360)
        sdrRotate.setPageStep(5)
        sdrRotate.setValue(0)
        sdrRotate.valueChanged.connect(self.onRotateValueChanged)

        fLayout.addRow('旋转', sdrRotate)

        # 缩放
        sdrScale = QSlider(Qt.Horizontal)
        sdrScale.setRange(0, 100)
        sdrScale.setPageStep(5)
        sdrScale.setValue(50)
        sdrScale.valueChanged.connect(self.onScaleValueChanged)
        fLayout.addRow('缩放', sdrScale)

        self.setLayout(fLayout)

    def onRotateValueChanged(self, value):
        # 是个累积效应，先对变化矩阵进行复位操作
        self.view.setTransform(QTransform())
        self.view.rotate(value)

    def onScaleValueChanged(self, value):
        s = 0.5 + value / 100.0
        # 是个累积效应，先对变化矩阵进行复位操作
        self.view.setTransform(QTransform())
        self.view.scale(s, s)


class DemoGraphicsView(QMainWindow):
    def __init__(self, parent=None):
        super(DemoGraphicsView, self).__init__(parent)

        # 设置窗口标题
        self.setWindowTitle('练习 ：QGraphicsView')
        # 设置窗口大小
        self.resize(480, 360)

        self.initUi()

    def initUi(self):
        # 菜单条
        menuBar = self.menuBar()
        menuFile = menuBar.addMenu('文件')

        aTrans = QAction('变换操作', self)
        aTrans.triggered.connect(self.onTransDialog)
        aReset = QAction('复位', self)
        aReset.triggered.connect(self.onReset)
        aExit = QAction('退出', self)
        aExit.triggered.connect(self.close)

        menuFile.addAction(aTrans)
        menuFile.addAction(aReset)
        menuFile.addSeparator()
        menuFile.addAction(aExit)

        # 场景部分
        scene = QGraphicsScene()

        scene.addText('Hello Graphics View', QFont(self.font().family(), 24))
        scene.addEllipse(0, 80, 200, 120, QPen(Qt.black), QBrush(Qt.blue))
        scene.addRect(220, 80, 200, 160, QPen(Qt.red))

        self.view = QGraphicsView()
        self.view.setScene(scene)

        self.setCentralWidget(self.view)

    def onTransDialog(self):
        dlg = TransDialog(self.view, self)
        dlg.exec()

    def onReset(self):
        self.view.setTransform(QTransform())


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = DemoGraphicsView()
    window.show()
    sys.exit(app.exec())

Calendar Widget : 日历小部件。是一个设置日历的控件，它提供了一个基于月份的视图，允许用户通过鼠标和键盘选择日期，默认是选中今天，可以对日期的范围进行限制。

常用方法：
setDateRange()：设置日期可供选择的范围
setFirstDayWeek()：设置一周的第一天，默认是星期天
setMinimumDate()：设置最小的日期
setMaximumDate()：设置最大的日期
setSelectedDate()：设置一个QDate对象，作为日期控件所选定的日期
setGridvisible()：设置控件是否显示网格
minimumDate()：获取控件所设置的最小日期
maximumDate()：获取控件所设置的最大日期
selectedDate()：返回当前选定的日期
isGridvisible()：控件网格可见返回True，否则返回False
信号:
selectionChanged：当选择发生改变时，发射该信号；
clicked()：点击控件中的日期时，发射信号，传入QDate；
activated()：控件处于活动状态时，发射该信号，传入QDate；
currentPageChanged()：当前页面发生变化时，发生该信号，传入年份和月份。

import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtCore import QDate
from PyQt5.QtWidgets import (QApplication, QWidget, QCalendarWidget,
                             QLabel, QVBoxLayout)


class DemoCalendarWidget(QWidget):
    def __init__(self, parent=None):
        super(DemoCalendarWidget, self).__init__(parent)

        # 设置窗口标题
        self.setWindowTitle('练习 ：QCalendarWidget')
        # 设置窗口大小
        self.resize(400, 300)

        self.initUi()

    def initUi(self):
        self.cal = QCalendarWidget(self)
        # 设置最小日期
        self.cal.setMinimumDate(QDate(1900, 1, 1))
        # 设置最大日期
        self.cal.setMaximumDate(QDate(4046, 1, 1))
        # 设置网格可见
        self.cal.setGridVisible(True)
        # 绑定槽函数
        self.cal.clicked[QDate].connect(self.onShowDate)

        # 显示选择的日期
        self.label_info = QLabel(self)
        date = self.cal.selectedDate()
        self.label_info.setText(date.toString('yyyy-MMMM-dd dddd'))

        # 布局管理
        vLayout = QVBoxLayout(self)
        vLayout.addWidget(self.cal)
        vLayout.addStretch()
        vLayout.addWidget(self.label_info)

    def onShowDate(self, date):
        self.label_info.setText(date.toString('yyyy-MMMM-dd dddd'))


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = DemoCalendarWidget()
    window.show()
    sys.exit(app.exec())

LCD Number : LCD屏部件，显示LCD样式的数字。

QLCDNumber会将非法字符替代为空格
常用方法：
checkOverflow(double num) ：检查给定值是否可以在区域内显示（也会发射overflow信号，可以将其连接到槽函数中处理）
digitCount() ：返回当前的位数
value() ：与当前显示的值有关，若当前显示的是数字，则该属性的值为0。默认情况下，此属性包含值0
信号：溢出信号
overflow

import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtCore import Qt, QTimer, QDate, QTime, QDateTime
from PyQt5.QtGui import QFont
from PyQt5.QtWidgets import (QApplication, QWidget, QLCDNumber,
                             QLabel, QVBoxLayout)


class DemoLCDNumber(QWidget):
    def __init__(self, parent=None):
        super(DemoLCDNumber, self).__init__(parent)

        # 设置窗口标题
        self.setWindowTitle('练习 ： QLCDNumber')
        # 设置窗口大小
        self.resize(400, 200)

        self.initUi()

    def initUi(self):
        labTitle = QLabel("距离2022年北京-张家口冬奥会开幕还有", self)
        labTitle.setFont(QFont(self.font().family(), 20))

        self.lcd = QLCDNumber(self)
        # 设置液晶显示的最低高度
        self.lcd.setMinimumHeight(60)
        # 设置数字位数
        self.lcd.setDigitCount(20)
        # 设置数字显示模式, 十进制
        self.lcd.setMode(QLCDNumber.Dec)
        # 设置数字屏显示样式
        self.lcd.setSegmentStyle(QLCDNumber.Flat)
        # 设置外观样式
        self.lcd.setStyleSheet("border: 2px solid black; color: red; background: blue;")

        vLayout = QVBoxLayout(self)
        vLayout.setSpacing(20)
        vLayout.addWidget(labTitle)
        vLayout.addWidget(self.lcd)
        vLayout.addStretch()

        self.setLayout(vLayout)

        timer = QTimer(self)
        # 一秒刷新一次
        timer.setInterval(1000)
        timer.timeout.connect(self.onRefresh)
        timer.start()

    def onRefresh(self):
        owgDate = QDateTime(QDate(2022, 2, 4), QTime(0, 0, 0)).toMSecsSinceEpoch()
        interval = owgDate - QDateTime.currentMSecsSinceEpoch()
        if interval > 0:
            # 1小时多少毫秒
            oneHour = 60 * 60 * 1000
            # 一天24小时
            oneDay = 24 * oneHour
            days = interval // oneDay
            times = interval - days * oneDay
            hours = times // oneHour
            minutes = (times - hours * oneHour) // (60 * 1000)
            seconds = (times - hours * oneHour - minutes * 60 * 1000) // 1000
            dispInfo = str(days) + ':' + QTime(hours, minutes, seconds).toString('hh:mm:ss')
            self.lcd.display(dispInfo)
        else:
            self.lcd.display('0')


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = DemoLCDNumber()
    window.show()
    sys.exit(app.exec())

Progress Bar : 进度条，其实就是滑块，可以设置其最小值、最大值、当前值，也可以设置其方向，如横向或者竖向

常用方法：
setMaximum(self, int) ：设置最大值
setMinimum(self, int) ：设置最小值
setValue(self, int) ：设置当前值
setOrientation(self, Qt.Orientation) ：设置方向

import sys
from PyQt5.QtWidgets import QMainWindow, QApplication, \
    QPushButton, QProgressBar
from PyQt5.QtCore import QBasicTimer
class QProgressBarExample(QMainWindow):
    def __init__(self):
        super().__init__()
        self.init_ui()
    def init_ui(self):
        self.progressbar_obj1 = QProgressBar(self)
        self.progressbar_obj1.setGeometry(30, 40, 200, 25)
        self.button_obj1 = QPushButton(u'开始', self)
        self.button_obj1.move(40, 80)
        self.button_obj1.clicked.connect(self.on_button_clicked)
        self.timer_obj1 = QBasicTimer()
        self.step = 0
        # 窗口的大小,前面两个参数是位置信息
        # 后面两个参数是宽度和高度信息
        self.setGeometry(300, 300, 300, 200)
        self.setWindowTitle('练习 ：QProgressBar')
        self.show()
    # 定时器处理函数
    def timerEvent(self, e):
        if self.step >= 100:
            self.timer_obj1.stop()
            self.button_obj1.setText(u'重新开始')
            return
        self.step = self.step + 1
        self.progressbar_obj1.setValue(self.step)
    def on_button_clicked(self):        # 按钮被单击后的处理函数
            # 已经走到头了，重新启动起来
        if self.progressbar_obj1.value() >= 100:
            self.step = 0
            self.progressbar_obj1.setValue(0)
            self.timer_obj1.start(100, self)
            self.button_obj1.setText(u'暂停')
        else:
            if self.timer_obj1.isActive():    # 如果正在运行中，那么暂停
                self.timer_obj1.stop()
                self.button_obj1.setText(u'继续')
            else:                            # 如果处于暂停状态，那么启动起来
                self.timer_obj1.start(100, self)
                self.button_obj1.setText(u'暂停')
if __name__ == '__main__':
    app = QApplication(sys.argv)
    main_win = QProgressBarExample()
    sys.exit(app.exec_())

Horizontal Line : 水平线
Vertical Line : 垂直线

OpenGL Widget : 是一个OpenGL（Open Graphics Library，开放图形库）图形渲染的部件，可以在PyQt和Qt的应用中显示图形（包括2D和3D图形），在Designer中，该部件没有任何独有属性，都是继承的QWidget的属性。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

python

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

python

登录后参与评论

0 条评论

热度

Qt Designer基本控件介绍——Display Widgets（显示小部件）

Qt Designer基本控件介绍——Display Widgets（显示小部件）

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐