QtGUI/QDialog 美化入門

這篇文章旨在向初學者介紹如何使用QtGUI和QDialog來美化界面，代碼示例均在Qt Creator中使用C++語言撰寫。

一、美化界面樣式

Qt提供了多種預定義的美化界面樣式，可以通過QApplication的setStyle函數來設置界面樣式。以下示例代碼設置界面樣式為「fusion」：

QApplication::setStyle("fusion");

您也可以通過調用QStyleFactory::keys()函數來獲取系統支持的所有樣式名。

二、美化QDialog窗口

QDialog是一個常用的窗口界面類，通過添加控制項和設置布局，我們可以改變QDialog窗口的外觀和樣式。

1、設置標題和圖標

可以使用setWindowTitle函數來設置窗口標題，並且使用setWindowIcon函數來設置窗口圖標，以下示例代碼設置窗口標題為「登錄」：

setWindowTitle("登錄");

2、設置背景顏色

可以使用setStyleSheet函數來設置窗口和控制項的背景顏色，以下示例代碼設置窗口背景顏色為灰色：

setStyleSheet("background-color: grey");

3、設置按鈕樣式

可以使用setStyleSheet函數來設置按鈕的樣式，以下示例代碼設置按鈕的背景顏色、文本顏色和邊框樣式：

QPushButton *btn = new QPushButton(this);
btn->setText("登錄");
btn->setStyleSheet("background-color: #3498db; color: #fff; border: none; padding: 5px 10px;");

三、使用QPalette和QBrush美化控制項

QPalette提供了對界面部件的顏色組合和背景組合的劃分，可以通過設置各種顏色來定製自己的界面風格。QBrush則可以通過設置不同的顏色、漸變或者圖片等實現更加複雜的背景效果。

1、使用QPalette設置控制項顏色

可以使用setPalette函數來設置控制項的顏色，以下示例代碼設置文本框的背景顏色為黑色，文本顏色為白色：

QPalette palette = ui->lineEdit->palette();
palette.setColor(QPalette::Base, Qt::black);
palette.setColor(QPalette::Text, Qt::white);
ui->lineEdit->setPalette(palette);

2、使用QBrush設置控制項背景

可以使用setPalette函數和QBrush結合來設置控制項的背景效果，以下示例代碼設置一個漸變色的背景效果：

QPalette palette = ui->label->palette();
QLinearGradient gradient(0, 0, 0, ui->label->height());
gradient.setColorAt(0.0, Qt::red);
gradient.setColorAt(0.5, Qt::green);
gradient.setColorAt(1.0, Qt::blue);
QBrush brush(gradient);
palette.setBrush(QPalette::Window, brush);
ui->label->setPalette(palette);

四、使用QSS樣式表美化控制項

QSS樣式表與CSS語法非常相似，可以直接對控制項的樣式進行設置，可以實現更加複雜的美化效果。

1、使用QSS設置控制項樣式

可以使用setStyleSheet函數來設置控制項的樣式，以下示例代碼設置一個紅色背景色的文本標籤：

ui->label->setStyleSheet("background-color: red; color: white;");

2、使用QSS選擇器設置控制項樣式

可以使用QSS選擇器來選擇特定的控制項進行設置樣式，以下示例代碼選擇所有QPushButton控制項設置樣式：

QPushButton { color: white; background-color: #3498db; }

3、使用QSS實現控制項動畫效果

通過使用QPropertyAnimation和QSS結合可以實現控制項的動畫效果，以下示例代碼實現QPushButton按下時的縮放效果：

QPushButton {
    border: none;
    color: white;
    background-color: #3498db;
}

QPushButton:pressed {
    animation: zoom 0.3s;
}

@keyframes zoom {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

五、總結

本篇文章介紹了使用QtGUI和QDialog進行界面美化的基本方法，同時也介紹了QPalette、QBrush和QSS的使用方式，希望能夠對初學者有所幫助。