天天看點

Qt 之 QLabel簡述純文字富文本圖像動畫數字超連結總結

簡述

QLabel提供了一個文本或圖像的顯示,沒有提供使用者互動功能。

一個QLabel可以包含以下任意内容類型:

内容 設定
純文字 使用setText()設定一個QString
富文本 使用setText()設定一個富文本的QString
圖像 使用setPixmap()設定一個圖像
動畫 使用setMovie()設定一個動畫
數字 使用setNum()設定int或double,并轉換為純文字。
Nothing 空的純文字,預設的,使用clear()設定
|

版權聲明:一去、二三裡,未經部落客允許不得轉載。

純文字

顯示

Qt 之 QLabel簡述純文字富文本圖像動畫數字超連結總結

首先我們構造一個QLabel對象,其中this為其所在的父窗體。通過調用setText可以為标簽設定文本(Hello World),這時标簽就可以正常顯示出來了。為了顯示更佳的效果,我們可以通過調用setStyleSheet來設定樣式。color: white-顧名思義,就是為标簽設定一個文本色(白色)。

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

對齊方式

預設的标簽文本對齊方式為:左對齊、垂直居中,我們可以通過setAlignment來設定,包括:左、上、右、下、居中對齊,一般情況,我們會進行兩兩組合(水準方向、垂直方向)。

比如:居中對齊

setAlignment(Qt::AlignCenter);
           

使用樣式表來控制(水準居右、垂直居下):

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

自動換行

如果文本過長,我們可以采用自動換行的方式來顯示。

setWordWrap(true);
           
Qt 之 QLabel簡述純文字富文本圖像動畫數字超連結總結

注意:當使用英文的時候,如果寫為類似形式”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().arg(strText);
pLabel->setText(strText);
           

省略

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

Qt 之 QLabel簡述純文字富文本圖像動畫數字超連結總結
QString strText = QStringLiteral("一去二三裡,煙村四五家。亭台六七座,八九十枝花。");
QString strElidedText = pLabel->fontMetrics().elidedText(strText, Qt::ElideRight, , Qt::TextShowMnemonic);
pLabel->setText(strElidedText);
           

垂直顯示

預設情況下,文本顯示方式為水準方向,如果我們需要在垂直方向上顯示,需要用一些小技巧來處理。

Qt 之 QLabel簡述純文字富文本圖像動畫數字超連結總結
QString strText = QStringLiteral("一去二三裡,煙村四五家。");
pLabel->setText(strText.split("", QString::SkipEmptyParts).join("\n"));
pLabel->setAlignment(Qt::AlignCenter);
           

富文本

我們可以在助手中查找關于

Using HTML Markup in Text Widgets

的資料,檢視Qt支援哪些HTML标記。

下面我們來寫一段HTML代碼,O(∩_∩)O哈哈~。。。顯示不同顔色的文本以及圖檔

Qt 之 QLabel簡述純文字富文本圖像動畫數字超連結總結
QString strHTML = QString("<html> \
                           <head> \
                           <style> \
                           font{color:white;} #f{font-size:px; 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按比例縮放圖檔達到理想的效果。

Qt 之 QLabel簡述純文字富文本圖像動畫數字超連結總結
QPixmap pixmap(":/Images/logo");
pLabel->setPixmap(pixmap);
pLabel->setFixedSize(, );
pLabel->setScaledContents(true);
           

動畫

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

Qt 之 QLabel簡述純文字富文本圖像動畫數字超連結總結
QMovie *pMovie = new QMovie(":/Images/movie");
pLabel->setMovie(pMovie);
pLabel->setFixedSize(, );
pLabel->setScaledContents(true);
pMovie->start();
           

數字

如果我們需要顯示一個數字,則可以調用setNum(),他可以将内容轉換為純文字。

pLabel->setNum();
           

很簡單就一段代碼,我們可以打開源碼瞅瞅,究竟setNum是如何實作的。

void QLabel::setNum(int num)
{
    QString str;
    str.setNum(num);
    setText(str);
}
           

就三行代碼,呵呵哒。。。超簡單吧,我們要有一顆随時看源碼的心!

超連結

我們需要簡單使用标簽

<a></a>

寫一段簡單的HTML超連結代碼

方法一

比較簡單,直接調用setOpenExternalLinks(true)即可。

pLabel->setText(QString("<a href = \"%1\">%2</a>").arg("http://blog.csdn.net/liang19890820").arg(QStringLiteral("一去丶二三裡")));
pLabel->setOpenExternalLinks(true);
           

方法二

聲明一個槽openUrl,将其與linkActivated信号關聯。

pLabel->setText(QString("<a href = \"%1\">%2</a>").arg("http://blog.csdn.net/liang19890820").arg(QStringLiteral("一去丶二三裡")));
connect(pLabel, SIGNAL(linkActivated(QString)), this, SLOT(openUrl(QString)));

void MainWindow::openUrl(const QString &link)
{
    QDesktopServices::openUrl(QUrl(link));
}
           

總結

通過上面的學習,我們基本将标簽的大部分用法都分享了,可以看出HTML、CSS的重要性,是以無論你現在所從事的工作是什麼,或者以後做什麼,我都建議好好研究下Web,技多不壓身。。。上面的内容雖多,但都很簡單,也很重要,是以都需要掌握,我們不隻是Qter,我們更是工匠-精益求精、嚴謹、耐心,專注,堅持。

繼續閱讀