昨天我們詳細的檢視了 Qt Creator 幫我們建立的範本應用程式，今天我們開始要在這個地基上蓋房子啦。

準備實現第一個也是最重要的一個功能：顯示一張JPEG圖片。

用 QLabel 顯示圖片

請打開昨天的 ImageViewer 專案。我們接下來每一天的功能，都會基於前一天的進度來開發。

開始動手，請先打開 mainwindow.h

#include <QMainWindow>
#include <QLabel>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget* parent = nullptr);
    ~MainWindow();

private:
    QLabel* m_imageLabel = nullptr;
};

在 MainWindow 類別下，我加了一個名為 imageLabel 的文字標籤成員。文字標籤(QLabel)典型用途是顯示文字，但是也可以顯示圖片喔（想不到吧！），我們等等會用這個 m_imageLabel 來顯示圖片。

別忘了加上對應的標頭檔 #include <QLabel>。

mainwindow.cpp

接著我們著手從檔案讀取圖片。請打開 mainwindow.cpp

#include "mainwindow.h"
#include <QImageReader>
#include <QImage>

MainWindow::MainWindow(QWidget* parent) : QMainWindow(parent)
{
    m_imageLabel = new QLabel(this);
    setCentralWidget(m_imageLabel);
}

在 MainWindow 建構子的前兩行，我們首先創建出 QLabel 實體，接著呼叫 setCentralWidget() 把 QLabel 設成位於中央圖形元件 Central Widget。

Central Widget

什麼是 Central Widget 呢？從官方 QMainWindow 的示例圖中可以看到，MainWindow 排版框架的中心位置就叫做 central widget，通常都是放置最核心功能的地方。比如試算表軟體的中央元件就會是一個表格，繪圖軟體的中央元件就會是一塊畫布。中央元件的四周圍繞著其他的元件，像是上方的選單，下方的狀態列，左右側邊欄等等。

我們在寫看圖軟體，那中央元件顯然就是顯示圖形的地方囉！

QImageReader

設定好中央元件和文字標籤後，接著來寫圖片讀取的程式碼。

這裡我們先寫死一張圖片的檔案路徑，之後慢慢再擴充多種不同讀檔的方法。

QString fileName = "C:/temp/taipei-101.jpg"; // 請換成你喜歡的圖片路徑
QImageReader reader(fileName);   // 設定檔案路徑
reader.setAutoTransform(true);   // 根據EXIF自動轉換方向
const QImage newImage = reader.read(); // 讀取圖片
Q_ASSERT(!newImage.isNull());    // 檢查圖片讀取是否成功 (失敗的話圖片為空)

m_imageLabel->setPixmap(QPixmap::fromImage(newImage)); // 設定顯示圖片

這裡引入了一個非常好用的物件 QImageReader。顧名思義，就是專門拿來讀取圖像的類別啦。QImageReader的建構子可以吃檔案路徑，接著呼叫 QImageReader::read() 方法，就能取得一個 QImage 物件。當我們拿到 QImage 物件，就表示圖片已經讀取成功啦！

最後一步，就是用 QLabel::setPixmap() 來設定圖片。這時候，編譯並執行程式，應該就可以看到你的圖片囉！