Qt Widgets; как создать дизайн, подобный QT Creator - PullRequest
Новая
       53

Qt Widgets; как создать дизайн, подобный QT Creator

0 голосов
/ 04 апреля 2020

Я думал, что это будет довольно легко, но сейчас я нахожусь на одной неделе и все еще очень далеко. Я пытаюсь создать экран приветствия со списком «недавно открытых». Цель состояла в том, чтобы сделать его похожим на список проектов в QT Creator:

example

Я думал, что мог бы использовать некоторую форму виджета списка, но Я не нашел ничего подходящего. Так что теперь я собираюсь создать его самостоятельно. Вот результат на данный момент:

current status

Я использовал для этого следующий код: 

QGridLayout *childLayout1= new QGridLayout();
QLabel *label1_1 = new QLabel("first label");
QLabel *label1_2 = new QLabel("Child first label");
childLayout1->addWidget(label1_1);
childLayout1->addWidget(label1_2);

QGridLayout *childLayout2= new QGridLayout();
QLabel *label2_1 = new QLabel("second label");
QLabel *label2_2 = new QLabel("Child second label");
childLayout2->addWidget(label2_1);
childLayout2->addWidget(label2_2);


QGridLayout *mainLayout = new QGridLayout();
mainLayout->addItem(childLayout1, 0, 0);
mainLayout->addItem(childLayout2, 1, 0);

ui->mainFrame->setLayout(mainLayout);

А теперь я Я потерян Это не выглядит рядом со списком QT Creator. На самом деле, он даже не пригоден для использования. Есть ли у меня какие-нибудь указания для того, как подойти к этому вопросу проектирования?

1 Ответ

0 голосов
/ 05 апреля 2020

Некоторый отдых творил чудеса, и сейчас у меня есть кое-что, что выглядит достаточно хорошо. Я надеюсь, что этот ответ может помочь любому в будущем.

enter image description here

Он использует QFrame, помещенный внутри QGridLayout. Использование setRowStretch на QGridLayout устраняет проблему с выравниванием, упомянутым в вопросе. Используемые значения могут быть изменены, 25 - немного-много. Но я не совсем уверен, как это работает, поэтому я пока оставлю все как есть.

Также используется eventFilter для захвата щелчка левой кнопкой мыши по кадру.

Ниже моего файла mainwindow.h: 

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class QFrame;

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    QImage *img = new QImage(":/all/Folder-1.svg");
    QPixmap p = QPixmap::fromImage(*img);

    QFrame *CreateNewRow(int number, QString title, QString subtitle, QString mouseReleaseValue, int generalFontSize=18);

protected:
    bool eventFilter(QObject *obj, QEvent *event) override;
};
#endif // MAINWINDOW_H

И моего главного окна . cpp файл: 

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel>
#include <QGridLayout>
#include <QMouseEvent>
#include <QMessageBox>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QFrame *row1 = CreateNewRow(1, "First row", "First subtitle row", "row_1");
    QFrame *row2 = CreateNewRow(2, "Second row", "Second subtitle row", "row_2");

    QGridLayout *mainLayout = new QGridLayout();
    // All rows no stretch
    // Not sure about the magic numbers, but it works..
    mainLayout->setRowStretch(25, 25);
    mainLayout->addWidget(row1, 0, 0);
    mainLayout->addWidget(row2, 1, 0);

    ui->mainFrame->setLayout(mainLayout);
}

QFrame* MainWindow::CreateNewRow(int number, QString title, QString subtitle, QString mouseReleaseValue, int generalFontSize)
{
    QString styleFrame = QString("*:hover {background: #F6F6F6;}");
    QString styleNumber = QString("font-size: %1px; color: #8B8D8F;").arg(qRound(generalFontSize * 0.7));
    QString styleTitle = QString("font-size: %1px; color: #5CAA15;").arg(generalFontSize);
    QString styleSubtitle = QString("font-size: %1px; color: #8B8D8F;").arg(qRound(generalFontSize * 0.7));

    QFrame *frame = new QFrame();
    frame->setStyleSheet(styleFrame);
    frame->setCursor(Qt::PointingHandCursor);
    frame->installEventFilter(this);
    frame->setProperty("mouseReleaseValue", mouseReleaseValue);

    QLabel *imgDisplayLabel = new QLabel("");
    imgDisplayLabel->setPixmap(p.scaled(generalFontSize, generalFontSize, Qt::KeepAspectRatio));
    imgDisplayLabel->adjustSize();
    imgDisplayLabel->setContentsMargins(5, 0, 10, 0);

    QGridLayout *layout= new QGridLayout(frame);
    // All rows no stretch
    // Not sure about the magic numbers, but it works..
    layout->setColumnStretch(25, 25);

    QLabel *labelNumber = new QLabel(QString::number(number));
    QLabel *labelTitle = new QLabel(title);
    QLabel *labelSubtitle = new QLabel(subtitle);

    labelNumber->setStyleSheet(styleNumber);
    labelTitle->setStyleSheet(styleTitle);
    labelSubtitle->setStyleSheet(styleSubtitle);

    layout->addWidget(labelNumber, 0, 0);
    layout->addWidget(imgDisplayLabel, 0, 1, Qt::AlignVCenter);
    layout->addWidget(labelTitle, 0, 2);
    layout->addWidget(labelSubtitle, 1, 2);

    return frame;
}

bool MainWindow::eventFilter(QObject *obj, QEvent *event)
{
    if (event->type() == QEvent::MouseButtonRelease) {
        QMouseEvent* mouseEvent = static_cast<QMouseEvent*> (event);
        if (mouseEvent->button() == Qt::LeftButton) {
            QString prop = obj->property("mouseReleaseValue").toString();
            QMessageBox msgBox;
            msgBox.setText(QString("You have clicked an object with mouseReleaseValue: %1.").arg(prop));
            msgBox.exec();
            return true;
        }
    }
    // standard event processing
    return QObject::eventFilter(obj, event);
}

MainWindow::~MainWindow()
{
    delete ui;
}
...