iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
Software Development

Qt 6 跨平台應用程式開發系列 第 17

D17: 看圖軟體(五) 狀態列

  • 分享至 

  • xImage
  •  

昨天我們實現了滑鼠拖放讀取圖片,這個看圖軟體總算有點用了。

可是除了圖片以外,使用者應該也想知道圖片的一些基本資訊吧?比如長寬、檔案大小等等。

我們今天就把這些資訊顯示在主視窗下方的「狀態列」上吧!

避免有人不知道狀態列是什麼。狀態列就是位於在視窗底部的條狀資訊列,平常不太不引人注目。放在這個位置,自然就是不希望干擾應用程式正中央的主要工作區,但是補充資訊卻是相當好用。

Microsoft Word 的狀態列藏了很多資訊:
WordStatusBar

狀態列 QStatusBar

今天的內容一樣會接續昨天的進度,所以請把昨天的專案打開。

Qt 的狀態列物件叫做 QStatusBar,需跟 QMainWindow 一起搭配使用。

要在主視窗設置狀態列,需要在 mainwindow.cpp 的建構子裡面創建一個 QStatusBar 物件,接著呼叫 QMainWindow::setStatusBar() 來添加狀態列:

...
#include <QStatusBar> // 別忘了引入標頭檔!

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

    QStatusBar *statusBar = new QStatusBar(this); // 創建狀態列
    setStatusBar(statusBar);
}

呼叫 QStatusBar::showMessage() 就能做到最基本的功能:顯示狀態列文字。

我們現在試著要來在狀態列上顯示圖片的寬高資訊。

剛剛讀取完圖片時,是個更新狀態列的好時機。所以我們在 loadImage() 的下方加幾行程式碼:

void MainWindow::loadImage(const QString& fileName)
{
    QImageReader reader(fileName);
    reader.setAutoTransform(true);
    const QImage newImage = reader.read();
    Q_ASSERT(!newImage.isNull());
    m_imageLabel->setPixmap(QPixmap::fromImage(newImage));

    // 獲取圖片的寬高
    int width = newImage.width();
    int height = newImage.height();
    
    // 獲取圖片的檔案大小
    QFileInfo fileInfo(fileName);
    int byteSize = fileInfo.size();

    QString statusInfo = QString("寬高: %1x%2, 檔案大小: %3 bytes")
                       .arg(width)
                       .arg(height)
                       .arg(byteSize);
    statusBar()->showMessage(statusInfo);
}

我們首先藉由 QImage 物件拿取圖片的寬高數值。接著用 QFileInfo 物件來獲取檔案在磁碟上的大小(單位是byte)。最後使用 QString 的格式化字串方法把數值組合成我們想要的字串,呼叫statusBar()->showMessage(statusInfo); 狀態列文字就顯示出來啦!

ShowStatusText

QString 格式化字串

因為我們用了一個新功能 QString 格式化字串,有必要說明一下:

如果你用過 printf(),那你一定很熟悉格式化字串的規則。格式化字串的第一段一定是個字串模板,比如:
QString("寬高: %1x%2, 檔案大小: %3 bytes")

這個模板字串裡會挖洞,然後由變數來填補這些洞。QString格式裡,洞就是百分號起頭的數字(%1, %2)。後方接著不定數量的 arg(var) 來傳入想要填洞的變數。

QString statusInfo = QString("寬高: %1x%2, 檔案大小: %3 bytes") //挖了三個洞
                   .arg(width)     //填洞
                   .arg(height)
                   .arg(byteSize);

如果該張圖片寬320高240,檔案大小是12000 bytes,那個字串組合結果就會是:
寬高: 320x240, 檔案大小: 12000 bytes


上一篇
D16: 看圖軟體(四) 拖放讀取任意圖片
下一篇
D18: 看圖軟體(六) 選單
系列文
Qt 6 跨平台應用程式開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言