Qt 学习笔记 - 第二章 - 添加图片、布局、界面切换

Qt 学习笔记全系列传送门：

• Qt 学习笔记 - 第一章 - 快速开始、信号与槽

• 【本章】Qt 学习笔记 - 第二章 - 添加图片、布局、界面切换

• Qt 学习笔记 - 第三章 - Qt的三驾马车之一 - 串口编程 + 程序打包成Windows软件

• Qt 学习笔记 - 第四章 - 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，点选左侧，再选择需要的图片即可

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