Qt 學習筆記 - 第二章 - 新增圖片、佈局、介面切換

Dandelion_000發表於2023-03-06
QT筆記

Qt 學習筆記全系列傳送門：

目錄

1、給 Qt 工程新增圖片

注意：不要隨意更改所需圖片的字尾，否則可能導致無法正常使用，出現Image format not supported檔案錯誤

  1. 新增圖片資原始檔

    • 在編輯模組中選擇專案目錄，右鍵，新增新檔案

    • 模板選擇 Qt - Qt Resource File，命名不能包含中文

    • 可見工程目錄下增加了 Resources 目錄

    • 將圖片檔案複製到專案目錄

    • 對 Resources 下的 .qrc 檔案右鍵，使用資源編輯器開啟

    • 單擊新增按鈕，新增字首，可按照需要修改字首

    • 儲存 .qrc 檔案

    • 單擊新增按鈕，新增檔案，新增需要的圖片

  2. 引用圖片（使用QLabel）

    • 新增QLabel控制元件，清除QLabel中的文字
    • 右擊QLabel，選擇改變樣式表
    • 點選新增資源旁邊的箭頭，選擇border-image，點選左側<resource root>，再選擇需要的圖片即可

  3. 此外，按鈕等也可以新增圖片，方法相同

2、Qt 佈局

目前程式存在問題：改變視窗大小時，介面不隨視窗變化

  • 解決方案：使用佈局

    位於上方佈局設計工具欄中，選中多個元件後點選佈局即可

    • 水平佈局
    • 垂直佈局
    • 柵格佈局

  • 彈簧元件在元件欄中的 Spacers 部分，有橫向和縱向

    • 可以配合其他元件進行佈局，用於保持頁面排布

3、介面切換

  1. 建立新的介面

    • 右鍵專案目錄，新建檔案
    • 選擇 Qt - Qt設計師介面，模板選擇 Widget 即可，此處筆者使用的類名為index

  2. 在槽函式中編寫介面切換

    void Widget::on_loginBtn_clicked()
{
//    qDebug("welcome!");
    QString uid = ui->uidEdit->text();
    QString passwd = ui->passwdEdit->text();
    if (uid == "123" && passwd == "123" ) {
        qDebug("welcome!");
        index *idx = new index;
        idx->setGeometry(this->geometry());
        idx->show();
    }
}

相關文章