学ぶ Managing Layouts and User Interaction

メニューを表示するにはスワイプしてください

When building cross-platform GUI applications with Qt in C++, managing layouts is essential for creating interfaces that adapt to different window sizes and device types. Qt provides several built-in layout managers to help you organize widgets within a window. The most common are horizontal layouts, vertical layouts, and grid layouts. A horizontal layout (QHBoxLayout) arranges child widgets from left to right, while a vertical layout (QVBoxLayout) stacks them from top to bottom. The grid layout (QGridLayout) gives you a table-like structure where you can specify the row and column for each widget. By combining these layout managers, you can create flexible and responsive interfaces that automatically adjust as the window is resized. Layout managers handle spacing and resizing for you, so you do not need to position every widget manually. This approach makes your application look consistent across different platforms and resolutions.

main.cpp


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
            
#include <QApplication>
#include <QWidget>
#include <QPushButton>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QGridLayout>
#include <QMessageBox>

class MainWindow : public QWidget {
    Q_OBJECT
public:
    MainWindow() {
        // Create buttons
        QPushButton* btn1 = new QPushButton("Button 1");
        QPushButton* btn2 = new QPushButton("Button 2");
        QPushButton* btn3 = new QPushButton("Button 3");

        // Vertical layout example
        QVBoxLayout* vLayout = new QVBoxLayout;
        vLayout->addWidget(btn1);
        vLayout->addWidget(btn2);

        // Horizontal layout example
        QHBoxLayout* hLayout = new QHBoxLayout;
        hLayout->addWidget(btn3);

        // Grid layout example
        QGridLayout* gridLayout = new QGridLayout;
        gridLayout->addLayout(vLayout, 0, 0);
        gridLayout->addLayout(hLayout, 1, 0);

        setLayout(gridLayout);

        // Connect button clicks to slots
        connect(btn1, &QPushButton::clicked, this, &MainWindow::onButton1Clicked);
        connect(btn2, &QPushButton::clicked, this, &MainWindow::onButton2Clicked);
        connect(btn3, &QPushButton::clicked, this, &MainWindow::onButton3Clicked);
    }

private slots:
    void onButton1Clicked() {
        QMessageBox::information(this, "Event", "Button 1 clicked");
    }
    void onButton2Clicked() {
        QMessageBox::information(this, "Event", "Button 2 clicked");
    }
    void onButton3Clicked() {
        QMessageBox::information(this, "Event", "Button 3 clicked");
    }
};

#include "main.moc"

In the example above, you see how different layout managers are used to arrange buttons within a window. The QVBoxLayout stacks two buttons vertically, while the QHBoxLayout places another button horizontally below them. Both layouts are then combined in a QGridLayout, making the interface responsive to window resizing. To handle user interaction, Qt uses a signal and slot mechanism. Each button emits a clicked signal when pressed, and this signal is connected to a corresponding slot (event handler) in the MainWindow class. When a button is clicked, the associated slot is executed, showing a message box. This event-driven approach decouples the UI from application logic, making your code easier to maintain and extend. By using layout managers and connecting signals to slots, you can design interfaces that respond smoothly to user actions and adapt to different platforms.

すべて明確でしたか？

フィードバックありがとうございます！

セクション 3. 章 3

AIに質問する

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 3. 章 3