Qt 學習總結 UI 篇（二）：圓角、半透明、圖標、字體加載與 UI 設計技巧

Qt 學習總結 UI 篇（二）：圓角、半透明、圖標、字體加載與 UI 設計技巧

1. QSS 定義圓角

border-radius: 10px;              /* 四個角同樣圓角 */
/* 單獨指定某個角 */
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;

2. 半透明效果

使用 rgba(r, g, b, alpha) 顏色格式，alpha 範圍 0~255（或 0.0~1.0）。

background-color: rgba(100, 100, 100, 40); /* 40/255 ≈ 16% 不透明度 */

3. 為可執行文件添加圖標

1. 新建文本文件 app.rc（後綴必須為 .rc）。
2. 編輯內容：IDI_ICON1 ICON DISCARDABLE "app.ico"（路徑相對於 .rc 文件）。
3. 加入工程（.pro 中 RC_FILE += app.rc）並重新編譯。

4. 加載 TTF 字體文件（從資源系統）

int main(int argc, char *argv[]) {
    QApplication a(argc, argv);
    // 從資源加載
    int id = QFontDatabase::addApplicationFont(":/DS-DIGIB.TTF");
    QStringList families = QFontDatabase::applicationFontFamilies(id);
    foreach (QString f, families) qDebug() << "font family:" << f;
    // 輸出: "DS-Digital"
    
    QFont font;
    font.setFamily("DS-Digital");
    font.setPointSize(25);
    // 使用 font 設置給控件...
}

5. 如何在代碼中使用 .ui 文件（單繼承模式）

1. Qt Designer 製作界面，保存為 myform.ui。記住：objectName（類名）、基類類型、需訪問控件的 objectName。
2. .pro 添加 FORMS += myform.ui。
3. 代碼引用：

// myform.h
#include "ui_myform.h"
class MyForm : public QWidget { // 基類與 ui 一致
    Q_OBJECT
    Ui::MyForm ui; // ui 類在 Ui 命名空間
public:
    MyForm(QWidget* parent=0) : QWidget(parent) {
        ui.setupUi(this); // 關鍵：將 ui 佈局安裝到 this
    }
    void slot() { ui.lineEdit->setText("Hello"); } // 直接訪問控件
};

6. 製作好看 UI 的核心要素

• 審美基礎：配色、留白、對齊、層次感——技術再強，界面醜也白搭。
• 吃透控件屬性：善用 QTableWidget 隱藏表頭/邊框模擬列表、QProxyStyle 自繪複雜控件。
• 自繪標題欄：去掉系統標題欄（Qt::FramelessWindowHint），自己畫可拖動、可縮放的標題區（參考 360/騰訊界面）。
• QSS (StyleSheet)：掌握選擇器、盒模型、偽狀態（:hover, :pressed）、漸變、圖片邊框——是 Qt 顏值的核心。
• 繼承重寫：需微調行為時，繼承控件重寫 paintEvent, mouseEvent 等，而非事件過濾器硬改。

「一有設計二有實現。Qt 基礎要扎實，審美觀要在線，控件屬性要摸透，QSS 要精通，自繪要會寫。」