QT将子窗口小部件放在父级的某个位置

Question

我试图制作一个可作为龙与地下城角色表的QT应用程序。因此，我需要在另一个小部件中有一个小部件。例如，stat块需要如下所示：

这意味着它需要一个QLabel用于文本，一个QLineEdit用于输入底部数字，另一个QLabel用于修饰符（+3）。它还需要有一个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作为背景（以及用于将svg渲染到QLabel上的QSvgRenderer） 。但是，这种方法很难修改，而且对于工作表的其他方面也很难做到。

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找到。

Answer 2

因为你的小部件有一个固定的大小，你可以使用元素的固定高度来简化它，这是一个布局的例子：

auto widget = new QWidget;

widget->setFixedSize(100, 100);
// set your SVG background on widget

auto layout = new QVBoxLayout;
layout->setSpacing(0);
layout->setMargin(0);

auto abilityName = new QLabel(tr("Strength"));
abilityName->setFixedHeight(25);
abilityName->setAlignment(Qt::AlignCenter);
abilityName->setStyleSheet("font-size: 12px"); // Background is transparent by default
layout->addWidget(abilityName);

auto abilityModifierDisplay = new QLabel("+3");
abilityModifierDisplay->setFixedHeight(40);
abilityModifierDisplay->setAlignment(Qt::AlignCenter);
abilityModifierDisplay->setStyleSheet("font-size: 15px");
layout->addWidget(abilityModifierDisplay);

auto abilityScoreEntry = new QLineEdit("16");
abilityScoreEntry->setFixedHeight(25);
abilityScoreEntry->setAlignment(Qt::AlignCenter);
abilityScoreEntry->setStyleSheet("border:none; font-size: 11px");
layout->addWidget(abilityScoreEntry);

// That is your margin from bottom so abilityScoreEntry is not vertically centered
// from the bottom, but centered in the area of the background you want it to be
layout->addSpacing(10);

widget->setLayout(layout);

要使用自定义小部件来封装它，只需完成您所做的操作：从QWidget继承，在构造函数中创建所有sub-elements和布局，为修饰符添加信号/插槽。