【GUI】使用 PySide6 开发图片左右切换软件

使用 PySide6 开发图片左右切换软件

前言

在现代软件开发中，使用 Python 开发跨平台的 GUI 应用程序变得非常普遍。今天，我们将使用 PySide6 来开发一个简单的图片浏览器，它可以实现图片左右切换的功能，并自适应按钮布局。本教程适合那些对 PySide6 和 Qt 库有一定了解，但想进一步实践图像处理和界面布局的开发者。

项目需求

我们的目标是开发一个全屏应用，用户可以：

左右切换图片：通过点击“Previous”和“Next”按钮。
关闭应用：通过点击一个较大的“Close”按钮。
自适应布局：左右按钮位于图片两侧，并且按钮和图片都可以自适应窗口大小。
图片统一大小：即使图片分辨率不同，它们也会显示在相同的固定区域内。

开发环境

Python 版本：3.12
PySide6：跨平台的 Python 绑定，基于 Qt 库的 UI 开发框架。
开发工具：可以使用任何支持 Python 开发的 IDE，例如 PyCharm、VSCode。

安装 PySide6

首先，我们需要安装 PySide6：

pip install PySide6

核心功能实现

1. 创建基础的 GUI 应用

首先，我们需要创建一个窗口，并设置标题和默认大小。为了使用户可以方便地切换图片，我们将通过 QPushButton 控件创建按钮。

import sys
from PySide6.QtWidgets import QApplication, QWidget, QVBoxLayout, QHBoxLayout, QPushButton, QLabel
from PySide6.QtGui import QPixmap
from PySide6.QtCore import Qtclass ImageSwitcher(QWidget):def __init__(self):super().__init__()self.setWindowTitle("Image Switcher")self.setGeometry(0, 0, 1920, 1080)  # 设置初始窗口大小

2. 显示图片

为了显示图片，我们使用 QLabel 和 QPixmap 结合。图片的大小会被缩放到固定的区域内。

self.image_label = QLabel()
self.image_label.setFixedSize(800, 600)  # 设置固定大小
self.image_label.setAlignment(Qt.AlignCenter)
self.layout.addWidget(self.image_label)

3. 创建左右切换按钮

左右切换按钮用于前后切换图片。我们将按钮放置在图片两侧，通过 QHBoxLayout 来排列按钮和图片。

# 创建按钮和图像的水平布局
self.image_layout = QHBoxLayout()# 创建左按钮
self.previous_button = QPushButton("Previous")
self.previous_button.setFixedSize(100, 50)  # 设置按钮大小
self.image_layout.addWidget(self.previous_button)# 显示图片的标签
self.image_layout.addWidget(self.image_label)# 创建右按钮
self.next_button = QPushButton("Next")
self.next_button.setFixedSize(100, 50)
self.image_layout.addWidget(self.next_button)# 将布局添加到主布局中
self.layout.addLayout(self.image_layout)

4. 添加关闭按钮

关闭按钮位于图片下方，并且会设置为较大的按钮，以方便用户点击退出。

self.close_button = QPushButton("Close")
self.close_button.setFixedSize(200, 70)
self.layout.addWidget(self.close_button, alignment=Qt.AlignCenter)

5. 图片切换逻辑

为了在按钮点击时切换图片，我们创建一个图像列表，并通过按钮点击事件来更新显示的图片。

self.images = ["image1.jpg", "image2.jpg", "image3.jpg"]
self.current_index = 0def update_image(self):pixmap = QPixmap(self.images[self.current_index])self.image_label.setPixmap(pixmap.scaled(800, 600, Qt.KeepAspectRatio))def show_previous_image(self):self.current_index = (self.current_index - 1) % len(self.images)self.update_image()def show_next_image(self):self.current_index = (self.current_index + 1) % len(self.images)self.update_image()# 连接按钮点击事件
self.previous_button.clicked.connect(self.show_previous_image)
self.next_button.clicked.connect(self.show_next_image)
self.close_button.clicked.connect(self.close_application)

6. 使应用全屏显示

为了让应用更具视觉冲击力，用户体验更加流畅，我们可以使窗口在启动时全屏显示。

def show_full_screen(self):self.showFullScreen()# 在初始化时调用全屏
self.show_full_screen()

图片左右切换软件

7. 完整代码

结合以上各个部分，下面是完整的代码：

import sys
from PySide6.QtWidgets import QApplication, QWidget, QVBoxLayout, QHBoxLayout, QPushButton, QLabel, QSizePolicy
from PySide6.QtGui import QPixmap
from PySide6.QtCore import Qtclass ImageSwitcher(QWidget):def __init__(self):super().__init__()self.setWindowTitle("Image Switcher")self.setGeometry(0, 0, 1920, 1080)self.layout = QVBoxLayout()self.image_layout = QHBoxLayout()self.previous_button = QPushButton("Previous")self.previous_button.setFixedSize(100, 50)self.image_layout.addWidget(self.previous_button)self.image_label = QLabel()self.image_label.setFixedSize(800, 600)self.image_label.setAlignment(Qt.AlignCenter)self.image_layout.addWidget(self.image_label)self.next_button = QPushButton("Next")self.next_button.setFixedSize(100, 50)self.image_layout.addWidget(self.next_button)self.layout.addLayout(self.image_layout)self.close_button = QPushButton("Close")self.close_button.setFixedSize(200, 70)self.layout.addWidget(self.close_button, alignment=Qt.AlignCenter)self.setLayout(self.layout)self.images = ["image1.jpg", "image2.jpg", "image3.jpg"]self.current_index = 0self.update_image()self.previous_button.clicked.connect(self.show_previous_image)self.next_button.clicked.connect(self.show_next_image)self.close_button.clicked.connect(self.close_application)self.show_full_screen()def update_image(self):pixmap = QPixmap(self.images[self.current_index])self.image_label.setPixmap(pixmap.scaled(800, 600, Qt.KeepAspectRatio))def show_previous_image(self):self.current_index = (self.current_index - 1) % len(self.images)self.update_image()def show_next_image(self):self.current_index = (self.current_index + 1) % len(self.images)self.update_image()def close_application(self):self.close()def show_full_screen(self):self.showFullScreen()if __name__ == "__main__":app = QApplication(sys.argv)window = ImageSwitcher()window.show()sys.exit(app.exec())