Qt 學習筆記 - 第二章 - 添加圖片、佈局、界面切換

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

• Qt 學習筆記 - 第一章 - 快速開始、信號與槽

• 【本章】Qt 學習筆記 - 第二章 - 添加圖片、佈局、界面切換

• 1、給 Qt 工程添加圖片
• 2、Qt 佈局
• 3、界面切換

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();
       }
   }