首页 > 解决方案 > 在 Qt 上添加小部件并将它们排列到屏幕的角落

问题描述

我尝试在屏幕右上角安排一些小部件,其中包括两个标签和一个图像。我正在使用 HBoxlayout。当我尝试在 HBoxlayout 中将小部件添加到屏幕时,所有小部件都没有排列在我希望它们放置的位置。那么如何将这些安排到屏幕顶部。这是我尝试过的代码

#include "screen.h"
#include "ui_screen.h"
#include<QGridLayout>
#include<QLabel>
#include<QBitmap>

screen::screen(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::screen)
{
    ui->setupUi(this);
    QGridLayout *g=new QGridLayout();
    QHBoxLayout *h=new QHBoxLayout();
    QLabel *l=new QLabel();
    QLabel *l2=new QLabel();
    QLabel *l3=new QLabel();
    QPixmap p(":/img/img/user.jpg");
    l->setPixmap(p);
    l->setMask(p.mask());
    l->show();
    l->setStyleSheet("QLabel { background-color : red; color : blue; }");
    l2->setText("User");
    l3->setText("Value");
    h->addWidget(l,0,Qt::AlignRight);
    h->addWidget(l2,0,Qt::AlignRight);
    h->addWidget(l3,0,Qt::AlignRight);
    g->addLayout(h,0,0,1,1,Qt::AlignTop);
    this->setLayout(g);
    this->showFullScreen();
}

screen::~screen()
{
    delete ui;
}

我尝试制作的布局示例布局

在此处输入图像描述

现在我还没有在我的代码中添加左侧标签。提前致谢 :)

标签: c++qtuser-interfacelayoutqt5

解决方案


玩弄这样的布局:

#include "screen.h"
#include <QVBoxLayout>
#include <QLabel>
#include <QBitmap>
#include <QFrame>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent)
{
    auto *widget = new QWidget(this);
    auto *frmLogin = new QFrame(this);
    auto *layoutMain = new QVBoxLayout(widget);
    auto *layoutTitle = new QHBoxLayout();
    auto *layoutLogin = new QHBoxLayout(frmLogin);
    auto *layoutInfo = new QVBoxLayout();
    auto *labTitle = new QLabel(tr("Some other stuff you want in the title"), this);
    auto *labBody = new QLabel(tr("Some other stuff you want in the body"), this);
    auto *labAvatar = new QLabel(this);
    auto *labUser = new QLabel(tr("User"), this);
    auto *labValue = new QLabel(tr("Value"), this);
    QPixmap p(":/pix/images/avatars/user.png");

    labTitle->setAlignment(Qt::AlignCenter);
    labTitle->setStyleSheet(".QLabel { background-color: white; }");

    labBody->setAlignment(Qt::AlignCenter);

    labAvatar->setPixmap(p);
    labAvatar->setMask(p.mask());

    layoutInfo->addWidget(labUser);
    layoutInfo->addWidget(labValue);

    layoutLogin->addWidget(labAvatar);
    layoutLogin->addLayout(layoutInfo);

    frmLogin->setStyleSheet(".QFrame { background-color : orange; }");
    frmLogin->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);

    layoutTitle->addWidget(labTitle);
    layoutTitle->addWidget(frmLogin);

    layoutMain->addLayout(layoutTitle);
    layoutMain->addWidget(labBody);
    layoutMain->setContentsMargins(0, 0, 0, 0);
    layoutMain->setSpacing(0);

    setCentralWidget(widget);
    showFullScreen();
}

上面的代码导致以下布局:

在此处输入图像描述


推荐阅读