Qt 高级开发 007： 图片查看器案例

Qt 高级开发 007： 图片查看器案例

• [Bilibili 同步视频](#Bilibili 同步视频)
• [🎯 一、先明确：我们要做什么？](#🎯 一、先明确：我们要做什么？)
• [🧩 二、核心控件速览：3 个控件搞定全部界面](#🧩 二、核心控件速览：3 个控件搞定全部界面)
• • [1. QLabel ------ 文本 & 图片 "双料显示"](#1. QLabel —— 文本 & 图片 “双料显示”)
  • [2. QLineEdit ------ 图片路径展示框](#2. QLineEdit —— 图片路径展示框)
  • [3. QPushButton ------ 触发文件选择](#3. QPushButton —— 触发文件选择)
• [📐 三、界面搭建：布局才是界面的灵魂](#📐 三、界面搭建：布局才是界面的灵魂)
• • [1. 拖入控件](#1. 拖入控件)
  • [2. 布局设置](#2. 布局设置)
  • [3. 控件重命名（规范很重要）](#3. 控件重命名（规范很重要）)
• [⚙️ 四、功能实现：从点击按钮到显示图片](#⚙️ 四、功能实现：从点击按钮到显示图片)
• • [1. 绑定按钮点击信号槽](#1. 绑定按钮点击信号槽)
  • [2. 弹出文件选择对话框](#2. 弹出文件选择对话框)
  • [3. 加载并显示图片](#3. 加载并显示图片)
• [⚠️ 五、当前版本小问题（可优化方向）](#⚠️ 五、当前版本小问题（可优化方向）)
• [📌 六、总结](#📌 六、总结)

Bilibili 同步视频

Qt 高级开发 006： 架构全解 + 高效学习指南

当你踏入 Qt 开发的大门，第一个上手的小项目往往能帮你快速吃透控件、布局、信号槽、文件对话框 这些核心知识点。今天就用最直白的步骤，带你从零实现一个图片查看软件------ 支持选择图片、显示路径、预览图片，新手也能跟着敲完直接运行！

---

🎯 一、先明确：我们要做什么？

本次实现的图片查看器，核心功能非常清晰：

• 点击按钮弹出文件选择框，筛选图片格式（PNG/JPG）

• 在输入框中显示选中图片的完整路径

• 在界面中加载并显示所选图片

• 界面整洁、布局合理，比例可控

整个项目用到的 Qt 基础控件只有 3 种，逻辑简单、扩展性强，非常适合 Qt 入门练手。

---

🧩 二、核心控件速览：3 个控件搞定全部界面

Qt 提供了丰富的 UI 控件，本项目只需要最常用的三种，就能完成全部交互：

1. QLabel ------ 文本 & 图片 "双料显示"

QLabel 是 Qt 里最灵活的显示控件，本次承担两个角色：

• 显示 "图片路径" 静态文本

• 承载并渲染选中的图片

高频方法速记：

// 设置文本
ui->label->setText("图片路径");
// 获取文本
QString text = ui->label->text();
// 设置图片（核心！）
ui->label->setPixmap(QPixmap(filePath));
// 清空内容
ui->label->clear();
// 设置样式表
ui->label->setStyleSheet("font-size:14px; color:#333;");

2. QLineEdit ------ 图片路径展示框

专门用来显示图片的完整路径，支持只读展示，禁止用户手动编辑。

// 设置路径文本
ui->lineEdit->setText(fileName);
// 获取路径文本
QString path = ui->lineEdit->text();

3. QPushButton ------ 触发文件选择

按钮负责响应用户点击，弹出文件选择对话框，是整个程序的交互入口 。

按钮的点击行为必须通过 Qt 信号槽 绑定，这是 Qt 事件处理的核心机制。

---

📐 三、界面搭建：布局才是界面的灵魂

界面丑不丑，全看布局怎么搞！本次采用 水平布局 + 垂直布局 嵌套，步骤超简单：

1. 拖入控件

• 顶部：QLabel（提示文字）+ QLineEdit（路径）+ QPushButton（浏览）

• 底部：QLabel（大图展示区域，命名为 image）

2. 布局设置

1. 选中顶部 3 个控件 → 水平布局

2. 点击空白处 → 选中整个界面 → 垂直布局

3. 调整布局比例：设置上下比例为 1:10，让图片展示区占满大部分界面

4. 微调 margin 边距，让界面更紧凑美观

这样无论窗口怎么拉伸，布局比例都不会乱，体验直接拉满！

3. 控件重命名（规范很重要）

• 按钮：btnOpen（显示文字：浏览）

• 图片展示标签：image

• 路径输入框：lineEdit_Path

规范命名能让后期代码维护更轻松，避免一堆默认名乱成一锅粥。

---

⚙️ 四、功能实现：从点击按钮到显示图片

1. 绑定按钮点击信号槽

按钮点击信号 clicked() 需要绑定自定义槽函数，格式遵循 Qt 规范：

// 头文件中声明槽函数
private slots:
    void on_btnOpen_clicked();

2. 弹出文件选择对话框

使用 QFileDialog::getOpenFileName() 静态方法，快速打开系统文件选择框，支持文件过滤：

void on_btnOpen_clicked()
{
    // 弹出文件对话框，只显示 PNG/JPG 图片
    QString fileName = QFileDialog::getOpenFileName(
        this,                // 父窗口
        "请选择图片",        // 对话框标题
        "D:",              // 默认打开路径
        "图片 (*.png *.jpg)" // 文件过滤器
    );

    // 如果未选择文件，直接返回
    if (fileName.isEmpty()) {
        return;
    }

    // 1. 显示图片路径到输入框
    ui->lineEdit_Path->setText(fileName);
}

3. 加载并显示图片

路径获取成功后，用 QPixmap 加载图片，再交给 QLabel 显示：

// 继续上面的代码
// 2. 加载图片并显示
QPixmap pixmap(fileName);
// 将图片设置到 label 中
ui->image->setPixmap(pixmap);

到这里，基础功能已经全部实现！运行程序，点击浏览，选择图片，就能看到路径和图片同步显示啦 ✨

---

⚠️ 五、当前版本小问题（可优化方向）

虽然功能跑通了，但还有两个细节可以优化：

1. 图片尺寸太小：默认按原图大小显示，不会自适应 Label 区域

2. 路径未记忆：每次打开都从默认路径开始，没有记录上次选择目录

3. 图片拉伸变形：未做等比例缩放，大图会被裁剪

这些问题我们会在下一节完整优化，让图片查看器更专业、更好用！

---

📌 六、总结

这个小项目虽然简单，却覆盖了 Qt 入门最核心的知识点：

• ✅ 三大基础控件（QLabel / QLineEdit / QPushButton）

• ✅ 信号槽绑定（点击事件触发）

• ✅ 布局管理（水平 + 垂直嵌套）

• ✅ 文件对话框（QFileDialog）

• ✅ 图片加载与显示（QPixmap）

只要跟着步骤敲完代码，你就已经跨过了 Qt 入门的第一道门槛，后续再做复杂工具、客户端软件，思路都是相通的！