PyQt5 标签居中显示图片（QLabel）

本是古典何须时尚 2022-10-24 13:29 228阅读 0赞

## 首先嘞！！！！回答一下标题的内容： ##

自己需要加一行代码

#别忘了引入欧
    from PyQt5.QtCore import Qt
    self.label.setAlignment(Qt.AlignCenter)

## PyQt5 标签显示图片的常用方法 ##

#### 总体介绍 ####

QLabel小部件提供文本或图像显示。  
QLabel用于显示文本或图像。没有提供用户交互功能。标签的外观可以通过各种方式进行配置，可以用于指定另一个小部件的焦点助记键。  
QLabel可以包含以下任何内容类型：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvY2tob3U_size_16_color_FFFFFF_t_70_pic_center]  
当使用任何方法改变内容时，任何先前的内容都被清除。

> 警告：当在QLabel中使用setText()设置文本内容的时候，因为QLabel会尝试猜测它是将文本显示为纯文本还是作为HTML 4标记的一部分的富文本。想明确地显示文本格式，请调用setTextFormat()，例如如果您希望文本是纯文本格式，但无法控制文本源（例如，显示从Web上加载的数据时）。  
> 默认情况下，标签显示左对齐、垂直居中的文本和图像。QLabel的外观可以通过多种方式进行调整和微调。  
> 可以使用setAlignment()和setIndent()来调整QLabel小部件区域内的内容定位。文本内容还可以使用setwordpwrap ()沿单词边界换行。  
> 例如，这段代码在右下角设置了一个双行文本的凹陷面板（两行与标签的右侧齐平）：

label = QLabel(self)
    label.resize(200,100)
    label.setFrameStyle(QFrame.Panel | QFrame.Sunken)
    label.setText("first line\nsecond line")
    label.setAlignment(Qt.AlignBottom | Qt.AlignRight)
    QLabel从QFrame继承的属性和函数，也可以用来指定要用于任何给定标签的构件框架。

更多介绍详见[官网][Link 1]

#### QLabel的小例子 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvY2tob3U_size_16_color_FFFFFF_t_70]

核心代码如下：
    class Example(QWidget):
    
        def initUI(self):
    
            self.lb1 = QLabel('学点编程吧，我爱你~！',self)
            self.lb2 = QLabel('我内容很少哦...',self)
            self.lb3 = QLabel('我内容很少哦...',self)
            self.lb3.setWordWrap(True)
    
            self.bt1 = QPushButton('输入内容1',self)
            self.bt2 = QPushButton('输入内容2',self)
    
    
            self.ra1 = QRadioButton('左边',self)
            self.ra2 = QRadioButton('中间',self)
            self.ra3 = QRadioButton('右边',self)
    
            self.bg1 = QButtonGroup(self)
            self.bg1.addButton(self.ra1, 1)
            self.bg1.addButton(self.ra2, 2)
            self.bg1.addButton(self.ra3, 3)
    
            self.show()
    
            self.bg1.buttonClicked.connect(self.rbclicked)
            self.bt1.clicked.connect(self.showDialog)
            self.bt2.clicked.connect(self.showDialog)
    
        def rbclicked(self):
            if self.bg1.checkedId() == 1:
                self.lb1.setAlignment(Qt.AlignVCenter | Qt.AlignLeft)
            elif self.bg1.checkedId() == 2:
                self.lb1.setAlignment(Qt.AlignCenter)
            elif self.bg1.checkedId() == 3:
                self.lb1.setAlignment(Qt.AlignVCenter | Qt.AlignRight)
        
        def showDialog(self):
            sender = self.sender()
                if sender == self.bt1:
                    text, ok = QInputDialog.getText(self, '内容1', '请输入内容1：')
                    if ok:
                        self.lb2.setText(text)
                elif sender == self.bt2:
                    text, ok = QInputDialog.getText(self, '内容2', '请输入内容2：')
                    if ok:
                        self.lb3.setText(str(text))

> 这个例子主要是实现了两个功能：  
> QLabel内容的对齐方式：这里我们给出了三个：左中、中间、右中。  
> 当QLabel内容较多的时候，里面的内容可以换行，这里通过两个输入对话框我们对比实现了。

self.lb3 = QLabel('我内容很少哦...',self)
    self.lb3.setWordWrap(True)

> 将WordWrap的属性设置为True，实现自动换行，默认是不能自动换行的。

def rbclicked(self):
        if self.bg1.checkedId() == 1:
            self.lb1.setAlignment(Qt.AlignVCenter | Qt.AlignLeft)    elif self.bg1.checkedId() == 2:
            self.lb1.setAlignment(Qt.AlignCenter)    elif self.bg1.checkedId() == 3:
            self.lb1.setAlignment(Qt.AlignVCenter | Qt.AlignRight)

> 当我们点击不同的单选按钮的时候会对QLabel的内容进行相应的对齐。默认情况下，标签的内容是左对齐和垂直居中的。其它的情况如下：它包含水平和垂直的标志，可以结合起来产生所需的效果。  
> 水平标志是：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvY2tob3U_size_16_color_FFFFFF_t_70_pic_center 1]  
> 垂直标志是：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvY2tob3U_size_16_color_FFFFFF_t_70_pic_center 2]  
> 特殊：  
> Qt.AlignCenter： 水平、垂直居中  
> 一次最多可以使用一个水平和一个垂直标志。当然凡是也有例外，下面的就可以可表现出两个属性。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvY2tob3U_size_16_color_FFFFFF_t_70 1]

部分核心代码如下：
    class Example(QWidget):
        def initUI(self):
    
            lb = QLabel(self)
    
            html = '''
                    <style type="text/css">
                        table.imagetable {
                            font-family: verdana,arial,sans-serif;
                            font-size:11px;
                            color:#333333;
                            border-width: 1px;
                            border-color: #999999;
                            border-collapse: collapse;
                        }
                      #...里面众多的CSS内容，我就省略了，节约空间
                '''
            lb.setText(html)
            self.show()

> PyQt5的文本小部件能够显示丰富的文本，使用HTML4标记的一个子集指定，具体内容显示哪些内容，请见官方文档：https://doc.qt.io/qt-5/richtext-html-subset.html,，常用的HTML标记和CSS属性是支持的。

#### 图片演示 ####

部分核心代码如下：
    class Example(QWidget):
        def initUI(self):
    
            pix = QPixmap('sexy.jpg')
    
            lb1 = QLabel(self)
            lb1.setGeometry(0,0,300,200)
            lb1.setStyleSheet("border: 2px solid red")
            lb1.setPixmap(pix)
    
            lb2 = QLabel(self)
            lb2.setGeometry(0,250,300,200)
            lb2.setPixmap(pix)
            lb2.setStyleSheet("border: 2px solid red")
            lb2.setScaledContents(True)

> 图片的演示是一个对比演示。

我们先用QPixmap()创建一个QPixmap对象，然后在两个QLabel对象中分别插入，不同的地方在于：

lb1我们是直接插入  
lb2，我们启用了setScaledContents(True)，这个函数的意义就在于是否将缩放其内容以填充所有可用空间。当启用时，标签显示一个像素图，它将缩放像素图以填充可用空间。该属性的默认值是False。  
setStyleSheet()是为了便于大家查看我们设置这个标签的大小范围而已。详细的解释请看上一章节[《液晶显示屏》。][Link 1]

#### 动画演示 ####

部分核心代码如下：
    
    class Example(QWidget):
    
        def initUI(self):
    
            self.lb = QLabel(self)
            self.lb.setGeometry(100,50,300,200)
    
            self.bt1 = QPushButton('开始',self)
            self.bt2 = QPushButton('停止',self)
    
            self.pix = QPixmap('movie.gif')
            self.lb.setPixmap(self.pix)
            self.lb.setScaledContents(True)
    
            self.bt1.clicked.connect(self.run)
            self.bt2.clicked.connect(self.run)
    
            self.show()
        def run(self):
            movie = QMovie("movie.gif")
            self.lb.setMovie(movie)
            if self.sender() == self.bt1:
                movie.start()
            else:
                movie.stop()
                self.lb.setPixmap(self.pix)

> 没想到吧，QLabel还有这凶残技能，放动画。。。  
> 这段代码的关键就是QMovie的使用，简单介绍一下吧。  
> QMovie类是用QImageReader播放动画的便捷类。  
> 这个类用来显示没有声音的简单的动画。如果您要显示视频和媒体内容，请改为使用Qt多媒体多媒体框架。

> 首先，来创建一个QMovie对象。在启动电影之前，您可以调用isValid()来检查图像数据是否有效。要启动电影，请调用start()。 QMovie将进入运行状态，并发出start()和stateChanged()。要获得电影的当前状态，请调用state()。  
> 要在应用程序中显示电影，可以将QMovie对象传递给QLabel.setMovie()。例：

label = QLabel(self)
    movie = QMovie("animations/fire.gif")
    label.setMovie(movie)
    movie.start()

> 每当电影中有新的帧时，QMovie将发出updated()信号。如果框架的大小发生变化，则发出resized()信号。您可以调用currentImage()或currentPixmap()来获取当前帧的副本。当电影完成后，QMovie发出finished()。如果播放过程中发生错误（即图像文件损坏），QMovie将发出error()。  
> 您可以通过调用setSpeed()来控制电影播放的速度，setSpeed()将原始速度的百分比作为参数。通过调用setPaused（True）来暂停电影。 QMovie将进入暂停状态并发出stateChanged()。如果您调用setPaused（False），QMovie将重新进入运行状态并再次启动电影。要停止电影，请使用stop()。  
> 某些动画格式允许您设置背景颜色。你可以调用setBackgroundColor()来设置颜色，或者调用backgroundColor()来获取当前的背景颜色。  
> currentFrameNumber()返回当前帧的序列号。如果图像格式支持，frameCount()将返回动画中的总帧数。您可以调用loopCount()来获取电影在完成前应循环的次数。 nextFrameDelay()返回当前帧应显示的毫秒数。  
> 可以通过调用setCacheMode()来指示QMovie缓存动画帧。  
> 调用supportedFormats()以获取QMovie支持的格式列表。

def run(self):
        movie = QMovie("movie.gif")
        self.lb.setMovie(movie)
        if self.sender() == self.bt1:
            movie.start()
        else:
            movie.stop()
            self.lb.setPixmap(self.pix)

这个函数很简单就是当我们点击“开始”按钮的时候，播放动画；点击“停止”按钮的时候，停止动画。

转载于：https://zhuanlan.zhihu.com/p/32134728

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvY2tob3U_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/4dc262b6b0f846ddb4e47212a76dceb8.png
[Link 1]: https://zhuanlan.zhihu.com/p/32134728
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvY2tob3U_size_16_color_FFFFFF_t_70]: /images/20221024/ef81e318196f4629ae41e613d54e9864.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvY2tob3U_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/8a8224d9339f4457b5f2fd655c056bf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvY2tob3U_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221024/f6f3489d3f6c40fd8f194bf7394d3e83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvY2tob3U_size_16_color_FFFFFF_t_70 1]: /images/20221024/7744efb2b5664a8d857181fb59906cee.png