Qt—QLabel 使用總結

阿新 • • 發佈：2020-07-21

轉載自一去丶二三裡的Qt 之 QLabel

簡述

QLabel(標籤控制元件) 提供了一個文字或影象的顯示，沒有提供使用者互動功能。

一個 QLabel 可以包含以下任意內容型別：

內容	設定
純文字	使用 setText() 設定一個 QString
富文字	使用 setText() 設定一個富文字的 QString
影象	使用 setPixmap() 設定一個影象
動畫	使用 setMovie() 設定一個動畫
數字	使用 setNum() 設定 int 或 double，並轉換為純文字
Nothing	空的純文字，預設的，使用 clear() 設定

顯示

首先我們構造一個 QLabel 物件。通過呼叫 setText 可以為標籤設定文字（Hello World），這時標籤就可以正常顯示出來了。為了顯示更佳的效果，我們可以通過呼叫 setStyleSheet 來設定樣式。

QLabel *pLabel = new QLabel(this);
pLabel->setText("Hello World");
pLabel->setStyleSheet("color: red");

對齊方式

預設的標籤文字對齊方式為：左對齊、垂直居中，我們可以通過 setAlignment 來設定，包括：左、上、右、下、居中對齊，一般情況，我們會進行兩兩組合（水平方向、垂直方向）。

比如：居中對齊

pLabel->setAlignment(Qt::AlignCenter);

使用樣式表來控制（水平居右、垂直居下）：

setStyleSheet("qproperty-alignment: 'AlignBottom | AlignRight';");

自動換行

如果文字過長，我們可以採用自動換行的方式來顯示。

pLabel->setWordWrap(true);

注意：當使用英文的時候，如果寫為類似形式 ”abcdefghijklmnopqrstuvwxyz” 則是不能換行的，why？因為中間沒有空格，所以需要寫為 ”abcde fghij klmno pqrst uvwxyz”。

設定行高

一般情況下，自動換行之後文字上下行會距離比較近，我們可以通過下面方式來設定行高。

pLabel->setWordWrap(true);
QString strText = QStringLiteral("一去二三裡，煙村四五家。亭臺六七座，八九十枝花。");
QString strHeightText = "<p style=\"line-height:%1%\">%2<p>";
strText = strHeightText.arg(150).arg(strText);
pLabel->setText(strText);

省略

如果過長，我們又不想換行，只想把其中一部分省略為…，那麼我們可以通過 QFontMetrics 來實現，這裡先不介紹 QFontMetrics，感興趣的童鞋可以先自行研究。

QString strText = QStringLiteral("一去二三裡，煙村四五家。亭臺六七座，八九十枝花。");
QString strElidedText = pLabel->fontMetrics().elidedText(strText, Qt::ElideRight, 200, Qt::TextShowMnemonic);
pLabel->setText(strElidedText);

富文字

我們可以在助手中查詢關於Using HTML Markup in Text Widgets的資料，檢視 Qt 支援哪些 HTML 標記。

下面我們來寫一段 HTML 程式碼，O(∩_∩)O哈哈~。。。顯示不同顏色的文字以及圖片

QString strHTML = QString("<html> \
                           <head> \
                           <style> \
                           font{color:white;} #f{font-size:18px; color: green;} \
                           </style> \
                           </head> \
                           <body>\
                           <font>%1</font><font id=\"f\">%2</font> \
                           <br/><br/> \
                           <img src=\":/Images/logo\" width=\"100\" height=\"100\"> \
                           </body> \
                           </html>").arg("I am a ").arg("Qter");
pLabel->setText(strHTML);
pLabel->setAlignment(Qt::AlignCenter);

是不是很神奇？經常我們要用好幾個控制元件來組合才能實現的功能，就僅僅幾行HTML程式碼就搞定了。。。何樂而不為！

影象

首先我們構建一個 QPixmap 來作為顯示的圖片，然後設定標籤的大小，可以通過 setScaledContents 按比例縮放圖片達到理想的效果。

QPixmap pixmap(":/Images/logo");
pLabel->setPixmap(pixmap);
pLabel->setFixedSize(100, 100);
pLabel->setScaledContents(true);

動畫

這裡我們需要使用另外一個類 QMovie 來控制動畫，start() 可以進行播放與 stop() 則可以停止，也可以通過呼叫 setSpeed() 來設定動畫的播放速度。

QMovie *pMovie = new QMovie(":/Images/movie");
pLabel->setMovie(pMovie);
pLabel->setFixedSize(135, 200);
pLabel->setScaledContents(true);
pMovie->start();