c++ - 将子部件放在父部件的特定位置

Question

我正在尝试制作一个用作龙与地下城角色表的 QT 应用程序。因此，我需要在另一个小部件中放置一个小部件。例如，一个 stat block 需要看起来像这样:

这意味着它需要一个用于文本的 QLabel，一个用于输入底部数字的 QLineEdit，以及另一个用于修饰符 (+3) 的 QLabel。它还需要有一个 SVG 文件作为背景。

我的问题是:有没有办法制作这样一个自定义小部件，将所有三个需要的小部件和背景合并到一个单独的小部件中？我当前的代码目前看起来像这样:

statBlock.hpp:

class QLineEdit;
class QLabel;
class QSvgRenderer;
class QSize;

class StatBlockWidget : public QWidget {
    Q_OBJECT

public:
    StatBlockWidget(const QString& name, QWidget* parent = 0);

    ~StatBlockWidget();


protected:
    QSize sizeHint() const override;
    QSize minimumSizeHint() const override;

private:
    QLineEdit* abilityScoreEntry;
    AbilityScoreModDisplay* abilityModifierDisplay; // Custom widget that automatically shows the correct modifier for a stat's number.
    QLabel* abilityName;
    QSvgRenderer* svgRenderer;
    QLabel* background;
};

statBlock.cpp:

#include "statBlock.hpp"

#include <QLineEdit>
#include <QLabel>
#include <QValidator>
#include <QSvgRenderer>
#include <QPainter>
#include <QPaintEvent>
#include <QPixmap>
#include <QSizePolicy>

StatBlockWidget::StatBlockWidget(const QString& name, QWidget* parent):
    QWidget(parent)
{
    // Properties of this widget
    this->setSizePolicy(QSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed));
    this->resize(100, 100);

    // Create child widgets
    abilityModifierDisplay = new AbilityScoreModDisplay(this);
    abilityName = new QLabel(this);
    abilityScoreEntry = new QLineEdit(this);
    svgRenderer = new QSvgRenderer(QStringLiteral(":/charSheet/assets/statblock.svg"), this);
    background = new QLabel(this);

    QImage backgroundImage{100, 100, QImage::Format_A2RGB30_Premultiplied};

    backgroundImage.fill(Qt::transparent);

    // Set attributes
    abilityModifierDisplay->raise();

    abilityScoreEntry->raise();
    abilityScoreEntry->setValidator(new QIntValidator(1, 30, this));

    abilityName->raise();
    abilityName->setText(name);
    // Render the background svg onto the widget
    QPainter painter(&backgroundImage);
    svgRenderer->render(&painter);

    background->setPixmap(QPixmap::fromImage(backgroundImage));

    // Set styles and positions for inputs and outputs

    abilityScoreEntry->setFixedWidth(80);
    abilityScoreEntry->setAlignment(Qt::AlignCenter);
    abilityScoreEntry->setStyleSheet("background-color: transparent;"
                                     "color: black;"
                                     "font-size: 35px;"
                                     "border: 1px solid white;");
    QPoint centerPoint = this->rect().center() - abilityScoreEntry->rect().center();
    centerPoint.setY(centerPoint.y() - 10);
    abilityScoreEntry->move(centerPoint);

    abilityModifierDisplay->setAlignment(Qt::AlignHCenter | Qt::AlignTop);
    abilityModifierDisplay->setFixedWidth(this->width());
    abilityModifierDisplay->move(0,-1); // Needed to fix center the text vertically.
    abilityModifierDisplay->setStyleSheet("background-color: transparent;"
                                          "color: black;"
                                          "font-size: 14px");

    abilityName->setFixedWidth(80);
    abilityName->setAlignment(Qt::AlignCenter);
    abilityName->setStyleSheet("background-color: transparent;"
                               "color: black;"
                               "font-size: 12px;");
    centerPoint = this->rect().center() - abilityName->rect().center();
    centerPoint.setY(centerPoint.y() + 40);
    abilityName->move(centerPoint);

    // Set fixed size for this widget
    this->setSizePolicy(QSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed));

    // Connect Signals and Slots
    connect(abilityScoreEntry, SIGNAL(textChanged(const QString&)), abilityModifierDisplay, SLOT(updateModifer(const QString&)));
}

StatBlockWidget::~StatBlockWidget() {}

QSize StatBlockWidget::sizeHint() const {
    return QSize(100,100);
}

QSize StatBlockWidget::minimumSizeHint() const {
    return QSize(100,100);
}

我在代码中尝试做的是创建一个自定义小部件，其中包含 4 个子小部件，3 个用于文本和数字，一个 QLabel 作为背景(以及一个 QSvgRenderer 将 svg 渲染到 QLabel 上)。但是，这种方法很难修改，而且对于工作表的其他方面也更难修改。

在 QT 中有什么方法可以让我将小部件放置在其父小部件的特定位置，并且易于调整？我研究过布局，但这些布局似乎不是用于小部件的一般放置(即在一条直线或网格中)，而我想非常具体地将小部件放置在其父级上(例如，在 40% 标记处它的高度和宽度)。我怎么能这样做？

Answer 1

您必须创建一个函数来更新相对于大小变化的位置，为此函数 updatePosition 已创建。此方法必须在 resizeEvent 事件中调用，如下所示:

#ifndef POSITIONWIDGET_H
#define POSITIONWIDGET_H

#include <QLabel>
#include <QLineEdit>
#include <QResizeEvent>
#include <QWidget>

class PositionWidget : public QWidget
{
    Q_OBJECT

public:
    PositionWidget(QWidget *parent = 0):QWidget(parent){
        label = new QLabel("LABEL", this);
        lineEdit = new QLineEdit(this);
    }
    ~PositionWidget(){
    }
protected:
    void resizeEvent(QResizeEvent *event){
        updatePosition(label, 0.5, 0.5); //50% , 50%
        updatePosition(lineEdit, 0.3, 0.7); //30% , 70%
        QWidget::resizeEvent(event);
    }
private:
    QLabel *label;
    QLineEdit *lineEdit;

    void updatePosition(QWidget *widget, float xscale, float yscale){
        int w = size().width();
        int h = size().height();
        widget->move( QPoint(w*xscale, h*yscale) - widget->rect().center());
    }
};

#endif // POSITIONWIDGET_H

完整的例子可以在下面的link找到.