Qt+C++初学者项目：将三个QGraphicsRectItems合并为单个对象

Hey there! Let’s walk through building this basic Qt widget with C++—no design patterns required, just straightforward code to get a working version up and running first. Perfect for laying the groundwork before you dive into design pattern optimizations later.

核心思路 #

We’ll create a custom QWidget subclass and override its paintEvent method to draw all three rectangles directly. This is the simplest approach for beginners—no fancy structures, just pure drawing logic you can follow step by step.

Step 1: Create the Custom Widget Class #

First, define a class that inherits from QWidget (let’s call it CompositeRectWidget) and handle the drawing in the paintEvent:

#include <QWidget>
#include <QPainter>

class CompositeRectWidget : public QWidget
{
    Q_OBJECT
public:
    explicit CompositeRectWidget(QWidget *parent = nullptr) : QWidget(parent) {}

protected:
    void paintEvent(QPaintEvent *event) override {
        Q_UNUSED(event); // We don't need the event details here—just draw!

        QPainter painter(this);
        painter.setRenderHint(QPainter::Antialiasing); // Smooth out those edges

        // 1. Draw the big rectangle: takes up most of the widget with a small margin
        QRect bigRect(20, 20, width()-40, height()-40);
        painter.setBrush(QColor(180, 220, 255)); // Light blue fill
        painter.drawRect(bigRect);

        // 2. Draw the top-left small rectangle: 1/4 the width, 1/5 the height of the big one
        int smallWidth = bigRect.width() / 4;
        int smallHeight = bigRect.height() / 5;
        QRect topLeftRect(bigRect.topLeft(), QSize(smallWidth, smallHeight));
        painter.setBrush(QColor(255, 180, 180)); // Light red fill
        painter.drawRect(topLeftRect);

        // 3. Draw the top-right small rectangle: same size, aligned to the big rectangle's top-right corner
        QPoint topRightPos(bigRect.right() - smallWidth, bigRect.top());
        QRect topRightRect(topRightPos, QSize(smallWidth, smallHeight));
        painter.setBrush(QColor(180, 255, 180)); // Light green fill
        painter.drawRect(topRightRect);
    }
};

Step 2: Use the Widget in Your Main Window #

Next, set up a main window in your main function to display our custom widget:

#include <QApplication>
#include <QMainWindow>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QMainWindow window;
    window.setWindowTitle("Basic Rect Composite");
    window.resize(600, 400); // Set a reasonable window size

    CompositeRectWidget *widget = new CompositeRectWidget(&window);
    window.setCentralWidget(widget); // Make our custom widget the main content

    window.show();
    return a.exec();
}

Step 3: Project Setup Tips #

• Make sure your Qt .pro file includes the widgets module (required for QWidget and QPainter):

QT       += core gui widgets

TARGET = BasicRectDemo
TEMPLATE = app

SOURCES += main.cpp \
           compositerectwidget.cpp

HEADERS  += compositerectwidget.h

• If you’re using Qt Creator, just start a new "Qt Widgets Application" project and replace the default widget code with what’s above—it’s super straightforward.

Why This Works for Beginners #

• No design patterns, no overhead: All logic lives in one class, so you can focus on understanding how Qt’s drawing system works instead of complex object relationships.
• Instant feedback: Run the code and you’ll see your rectangles right away—great for building confidence.
• Solid foundation: This follows Qt’s standard widget drawing flow, so when you later refactor with design patterns (like Composite or Factory), you’ll already know the core mechanics.

Once you have this up and running, you can start thinking about how to refactor! For example, abstracting each rectangle into a reusable Shape class (Composite pattern) or creating a factory to generate them. Take it one step at a time—you’ve got this.

内容的提问来源于stack exchange，提问作者mansanto