###
使用 Qt Designer 创建
上传图片功能的界面
在
Qt Designer 中创建一个用于
上传图片的功能界面涉及多个组件的选择和配置。以下是具体方法：
#### 选择合适的控件
为了
实现文件
上传功能，通常会
使用 `QPushButton` 来触发文件对话框，并
使用 `QLabel` 或者 `QGraphicsView` 显示所选图像[^1]。
```xml
<widget class="QWidget" name="Form">
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QPushButton" name="pushButtonSelectImage">
<property name="text">
<string>Select Image</string>
</property>
</widget>
</item>
<item>
<widget class="QLabel" name="labelShowImage"/>
</item>
</layout>
</widget>
```
这段 XML 片段展示了如何布置
按钮和标签来构建基本布局。其中 `QPushButton` 被命名为 `pushButtonSelectImage` 并设置文本为 "Select Image"；而 `QLabel` 则用来展示选定后的
图片预览[^2]。
#### 连接信号与槽函数
完成 UI 设计之后，在转换成 Python 文件的过程中需编写逻辑代码使该
按钮能够弹出文件选择器并加载
图片到界面上显示出来。这一步骤是在 .py 文件里通过定义相应的事件处理程序完成的[^3]。
```python
from
PyQt5.
QtWidgets import QApplication, QWidget, QPushButton, QLabel, QVBoxLayout, QFileDialog
import sys
class ImageUploader(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
layout = QVBoxLayout()
self.button_select_image = QPushButton('Select Image', self)
self.label_show_image = QLabel(self)
layout.addWidget(self.button_select_image)
layout.addWidget(self.label_show_image)
self.setLayout(layout)
self.button_select_image.clicked.connect(self.openFileNameDialog)
def openFileNameDialog(self):
options = QFileDialog.Options()
fileName, _ = QFileDialog.getOpenFileName(
self,
"Choose an image",
"",
"Images (*.png *.jpg *.bmp);;All Files (*)",
options=options
)
if fileName:
pixmap = QPixmap(fileName).scaled(800, 600, aspectRatioMode=
Qt.KeepAspectRatio)
self.label_show_image.setPixmap(pixmap)
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = ImageUploader()
ex.show()
sys.exit(app.exec_())
```
上述代码片段
实现了当点击 “Select Image”
按钮时打开文件对话框让用户挑选一张本地磁盘上的
图片，并将其缩放后呈现在界面上作为预览效果[^4]。
超级会员免费看
订阅专栏 解锁全文
扫一扫
594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
