实际效果

三个图片（QLabel）显示，两个按钮（QPushButton）加载图片，一个（Slider）滑动条。
三个图片：从左到右，显示图像A、图像B以及透明度叠加后的图像。
两个按钮：“打开图像A”打开图像A并显示；“打开图像B”打开图像B并显示。
滑动条：控制透明度比例。

界面UI

放置控件

把控件按照前面“实际效果”取出并放置。

设置布局

一个垂直布局包括了两个水平布局。

布局以及控件相关的名字。

界面自适应

随着窗口调整：
思路：centralwidget变为栅格布局（虽然前面我的图片上已经是，但是新建的时候通常是不能修改的表单布局Form Layout）。
方法：工具->界面编辑器->栅格布局

调整布局中比例：
情况：希望垂直布局中上面部分比下面大。
方法：右键对象“upLayout”升级为Qwidget，让其具有Qwidget属性。设置sizePolicy属性，修改其垂直伸展因子，让其为1即可。此时“downLayout”默认垂直伸展因子为0，只会保持一个建议尺寸。
补充知识点：甚至布局中的伸展因子设置的是不同元素在其中自适应的比例，为0时会保持一个建议尺寸。

处理QLabel添加图片后，布局错乱：
原因：为QLabel添加图片通常都会分辨率大于分配的，会挤压其它空间，从而导致布局错乱。
表现：我遇到情况表现为，水平方向缩小一定大小后无法缩小。
方法：修改“upLayout” 的sizePolicy属性，让水平策略和垂直策略都为Ignored。

代码

项目工程的文件

初始化

变量：在界面cpp文件中声明两个地址全局变量，记录打开图像A和B的路径。

QString pathA,pathB;

滑动条值：在界面cpp文件中的构造函数里面初始化滑动条的范围和初始值。

PicMix::PicMix(QWidget *parent): QMainWindow(parent), ui(new Ui::PicMix)
{ui->setupUi(this);ui->sliderTrans->setMaximum(100);ui->sliderTrans->setMinimum(0);ui->sliderTrans->setValue(50);
}

图片调整透明度叠加函数的添加：在界面的h和cpp文件中添加。

void display_picMix(int value);

按钮功能

采用自动关联信号和槽的方法，右键“按钮”->转到槽。

代码：

void PicMix::on_btnA_clicked()
{pathA=QFileDialog::getOpenFileName();ui->labelA->setScaledContents(true);ui->labelA->setPixmap(pathA);display_picMix(ui->sliderTrans->value());
}void PicMix::on_btnB_clicked()
{pathB=QFileDialog::getOpenFileName();ui->labelB->setScaledContents(true);ui->labelB->setPixmap(pathB);display_picMix(ui->sliderTrans->value());
}

滑动条功能

采用自动关联信号和槽的方法，右键“按钮”->转到槽。

代码：

void PicMix::on_sliderTrans_valueChanged(int value)
{display_picMix(value);
}

图片调整透明度叠加

函数输入滑条的值，然后计算图像A和图像B的像素值，根据value调整透明度后叠加显示出来。

void PicMix::display_picMix(int value){// value是滑动条当前值// 地址是否存在if(pathA.isNull()||pathB.isNull())return ;// 读取图片A和图片B的数据QImage imageA,imageB;imageA.load(pathA);imageB.load(pathB);// 获取图片高度和宽度，选择最小的int w,h;w=qMin(imageA.width(),imageB.width());h=qMin(imageA.height(),imageB.height());// 声明imageMix用来存储叠加后的图像数据QImage imageMix(w,h, QImage::Format_ARGB32);float alpha=value/100.0;// 计算透明程度QColor colorA,colorB;int r,g,b;for(int x=0;x<w;x++){for(int y=0;y<h;y++){colorA=QColor(imageA.pixel(x,y));colorB=QColor(imageB.pixel(x,y));r=colorA.red()*alpha+colorB.red()*(1-alpha);g=colorA.green()*alpha+colorB.green()*(1-alpha);b=colorA.blue()*alpha+colorB.blue()*(1-alpha);imageMix.setPixel(x,y,qRgb(r,g,b));}}ui->labelMix->setScaledContents(true);ui->labelMix->setPixmap(QPixmap::fromImage(imageMix));
}