如何对齐文本和图像，如 Qt 中提供的示例图像？

Question

我想在生成的PDF文件中显示图像和文本，我不知道如何进行。

起初我试过这个：

for(int i=0; i<COVDATA.COV_ComponentName.size(); i++){
    //------------------------------------------------------------------------------------
    x = x + 550;
    y = y + 150;
    // ScreenShot_path = COVDATA.COV_ComponentScreenShot[i];
    // img = QImage(ScreenShot_path);
    // painter.drawImage(QRect(100,y,210,150),img.scaled( 800 , 800, Qt::KeepAspectRatio) );
    // painter.setPen(QPen(Qt::black, 5));
    // painter.setFont(OpenSans);
    // painter.setFont(QFont("Open Sans",10,QFont::Normal));
    // painter.drawText( QRect(0,y,PageWidth-210,150), Qt::AlignRight|Qt::AlignVCenter, COVDATA.COV_ComponentName[i]);
    if(i % 2 == 0 || i==0){
        painter.setPen(QPen(Qt::black, 5));
        painter.setFont(OpenSans);
        painter.setFont(QFont("Open Sans",10,QFont::Normal));
        painter.drawText( QRect(0,y,210,150), Qt::AlignLeft|Qt::AlignVCenter, COVDATA.COV_ComponentName[i]);

        ScreenShot_path = COVDATA.COV_ComponentScreenShot[i];
        img = QImage(ScreenShot_path);
        painter.drawImage(QRect(150,y+350,210,450),img.scaled( 800 , 800, Qt::KeepAspectRatio) );
    }else{
        painter.setPen(QPen(Qt::black, 5));
        painter.setFont(OpenSans);
        painter.setFont(QFont("Open Sans",10,QFont::Normal));
        painter.drawText( QRect(0,y,PageWidth-210,150), Qt::AlignRight|Qt::AlignVCenter, COVDATA.COV_ComponentName[i]);

        ScreenShot_path = COVDATA.COV_ComponentScreenShot[i];
        img = QImage(ScreenShot_path);
        painter.drawImage(QRect(0,y+350,210,350),img.scaled( 800 , 800, Qt::KeepAspectRatio) );
    }
}

但这对我来说并没有真正解决，老实说，我不知道如何继续下去。 COVDATA.COV_ComponentName 是一个列表，其中包含我要打印的文本，而 COVDATA.COV_ComponentScheenShot 是一个列表，其中包含调用的图像的存储位置，并将图像存储在 QImage 对象中以供生成。这些将打印在我的 PDF 文件中。

Answer 1

您的坐标计算未按预期进行。我整理了一个简短的示例来说明如何根据需要实施布局：

QStringList Text;
Text << "String 1" << "String 2" << "String 3" << "String 4" << "String 5" << "String 6" << "String 7" << "String 8";
int TextHeight = painter.fontMetrics().height() * 1.5;
int Padding = 10;
int NumOfColumns = 2;
int RectWidth = (geometry().width() - (NumOfColumns+1) * Padding) / NumOfColumns;
int NumOfRows = std::ceil(Text.size() / static_cast<float>(NumOfColumns));    // std::ceil requires #include <cmath>

int RectHeight = (geometry().height() - NumOfRows * TextHeight - (NumOfRows + 1) * Padding) / NumOfRows;
for (int i = 0; i < Text.size(); i++)
{
    int x = Padding + (i % NumOfColumns) * (RectWidth + Padding);
    int y = Padding + (i / NumOfColumns) * (RectHeight + TextHeight + Padding);
    painter.setPen(QPen(Qt::black, 2));
    painter.drawText(QRect(x, y, RectWidth, TextHeight), Qt::AlignLeft | Qt::AlignVCenter, Text[i]);
    painter.drawRect(QRect(x, y + TextHeight, RectWidth, RectHeight));
}

我用简单的文本和矩形列表替换了 COVDATA 内容和屏幕截图。使用上面的代码，您可以配置列数（行数将根据我的列表 Text 中的所有项目都在屏幕上的位置计算）以及矩形之间的填充。

但是原理要清楚：

我根据索引 i 计算 x 和 y 分量
根据为矩形分配的 space 的预定义宽度和高度计算坐标，在我的例子中，这被设置为小部件可用的完整 space 的一小部分（所以它也适应本机调整大小）。

结果是这样的：

如何对齐文本和图像，如 Qt 中提供的示例图像？

How to align text and images like the sample image provided in Qt?

c++

qt5

alignment

qimage