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