Qt自帶案例基本是純程式碼擼出的介面，本片部落格記錄ImageViewer案例的UI版本。

VS2017配合Qt5.14.2實現。

【功能介紹】

影象居中顯示，過大則出現滾動條，影象縮小、放大、還原、適應窗體，開啟、另存為、退出。

【介面】MainWindow專案，專案名ImageViewer

看動圖，注意控制元件物件名。

4個按鈕，1個label，1個scrollArea。

選單欄裡三項：開啟、另存為、退出

【介面屬性設定】

scrollArea不勾選widgetResizable，sizeAdjustPolicy改為AdjustToContents，alignment改為AlignHCenter、AlignVCenter
label，不勾選scaledContents

【標頭檔案】

#pragma once

#include <QtWidgets/QMainWindow>
#include "ui_ImageViewer.h"
//#include<QScrollArea>

class ImageViewer : public QMainWindow
{
    Q_OBJECT

public:
    ImageViewer(QWidget *parent = Q_NULLPTR);
    //private slots:
    void loadFile();
    void saveAs(); //儲存影象
    void zoomOut(); //
 
縮小
    void zoomIn(); //放大
    void normalSize(); //還原
    void fitToWindow(); //適應窗體
private:
    Ui::ImageViewerClass ui;
    QImage image;
    double scaleFactor; //縮放係數
public:
};

【cpp檔案】

#include "ImageViewer.h"
#include<QFileDialog>
#include<QScrollBar>
#include<QImageWriter>
//#include<QScrollArea> 
 
//滾動區域，當影象過大時，會自動出現滾動條

ImageViewer::ImageViewer(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
    connect(ui.actionOpen, &QAction::triggered, this, &ImageViewer::loadFile); //自定義函式
    connect(ui.actionExit, &QAction::triggered, this, &QWidget::close); //系統函式
    connect(ui.actionSaveAs, &QAction::triggered, this, &ImageViewer::saveAs); 
    connect(ui.pushButton, &QPushButton::clicked, this, &ImageViewer::zoomOut);
    connect(ui.pushButton_2, &QPushButton::clicked, this, &ImageViewer::zoomIn);
    connect(ui.pushButton_3, &QPushButton::clicked, this, &ImageViewer::normalSize);
    connect(ui.pushButton_4, &QPushButton::clicked, this, &ImageViewer::fitToWindow);
}

//ui介面屬性設定說明
//scrollArea不勾選widgetResizable，sizeAdjustPolicy改為AdjustToContents，alignment改為AlignHCenter、AlignVCenter
//label，不勾選scaledContents

void ImageViewer::loadFile()
{
    QFileDialog dialog(this, "開啟圖片",NULL, "Image Files (*.bmp) \n Image Files (*.png *.jpg)"); //優先bmp格式
    if (dialog.exec() != QDialog::Accepted)
    {
        return;
    }
    
    QString fullPath = dialog.selectedFiles().first(); //獲取圖片全路徑
    image.load(fullPath);
    //視窗標題“檔名 - 窗體名”
    QFileInfo fi(fullPath); //fi.fileName()獲取檔名
    const QString title = QString("%1 - %2").arg(fi.fileName()).arg(windowTitle());
    setWindowTitle(title);
    //狀態列顯示圖片資訊
    const QString msg = QString("解析度：%1×%2 ，位深度：%3").arg(image.width()).arg(image.height()).arg(image.depth());
    ui.statusBar->showMessage(msg); //狀態列顯示圖片資訊
    //顯示圖片
    ui.label->setPixmap(QPixmap::fromImage(image));
    ui.label->adjustSize(); //控制元件適應圖片
    ui.scrollArea->setWidget(ui.label); //讓label顯示在scrollArea控制元件。注意窗體上label控制元件與scrollArea控制元件並列關係，而非巢狀。label大小設定為0以不佔空間。alignment設定為水平、垂直居中，這樣圖片會居中顯示。
    
    scaleFactor = 1.0; //縮放係數

    return;
}

void ImageViewer::saveAs()
{
    QFileDialog dialog(this, "儲存圖片", NULL, "Image Files (*.bmp) \n Image Files (*.png *.jpg)");
    dialog.setAcceptMode(QFileDialog::AcceptSave);
    if (dialog.exec() != QDialog::Accepted)
    {
        return;
    }
    QImageWriter writer(dialog.selectedFiles().first());
    writer.write(image);
}

//縮小
void ImageViewer::zoomOut()
{
    scaleFactor *= 0.8; //每次縮小0.8
    ui.label->setScaledContents(true); //圖片適應控制元件
    ui.label->resize(scaleFactor * ui.label->pixmap(Qt::ReturnByValue).size()); //注意，圖片大小未變，而是label改變

}

//放大
void ImageViewer::zoomIn()
{
    scaleFactor *= 1.2; //每次放大1.2
    ui.label->setScaledContents(true); //圖片適應控制元件
    ui.label->resize(scaleFactor * ui.label->pixmap(Qt::ReturnByValue).size()); //注意，圖片大小未變，而是label改變

}

//還原
void ImageViewer::normalSize()
{
    ui.label->adjustSize(); //控制元件適應圖片。或者用以下三行
    scaleFactor = 1.0;
    //ui.label->setScaledContents(true); //圖片適應控制元件
    //ui.label->resize(scaleFactor * ui.label->pixmap(Qt::ReturnByValue).size()); //注意，圖片大小未變，而是label改變

}

//還原
void ImageViewer::fitToWindow()
{
    ui.label->setScaledContents(true); //圖片適應控制元件
    ui.label->resize(ui.scrollArea->width()-1,ui.scrollArea->height()-1);
}