Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Styling Desktop Applications | GUI Development With C++
C++ Cross-Platform Applications

Styling Desktop Applications

Glissez pour afficher le menu

When you want to give your desktop application a polished, professional appearance, you need to control its visual style. In Qt, you have several options for customizing the look and feel of your GUI. The most common and flexible approach is to use Qt stylesheets, which are similar to CSS in web development. Stylesheets let you change colors, fonts, borders, spacing, and more, either globally or for specific widgets. You can also create custom widgets if you need more advanced or unique visual components, but for most cases, stylesheets are a fast and powerful way to dramatically change your application's appearance without modifying your C++ code logic.

main.cpp

main.cpp


              
123456789101112131415161718192021222324252627282930313233343536373839404142434445

            
#include <QApplication>
#include <QPushButton>
#include <QWidget>
#include <QVBoxLayout>

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

    QWidget window;
    window.setWindowTitle("Styled Qt Application");

    QVBoxLayout *layout = new QVBoxLayout(&window);

    QPushButton *button1 = new QPushButton("Primary Action");
    QPushButton *button2 = new QPushButton("Secondary Action");

    layout->addWidget(button1);
    layout->addWidget(button2);

    // Apply a stylesheet to the window and its child widgets
    window.setStyleSheet(
        "QWidget {"
        "    background-color: #f0f0f0;"
        "    font-family: 'Segoe UI', Arial, sans-serif;"
        "    font-size: 16px;"
        "}"
        "QPushButton {"
        "    background-color: #2196f3;"
        "    color: white;"
        "    border-radius: 6px;"
        "    padding: 8px 16px;"
        "    margin: 5px;"
        "}"
        "QPushButton:hover {"
        "    background-color: #1976d2;"
        "}"
        "QPushButton:pressed {"
        "    background-color: #1565c0;"
        "}"
    );

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

This example shows how to use a Qt stylesheet to instantly change the look of your application. The stylesheet sets a light background for the main window, uses a modern font, and defines custom colors and rounded corners for the buttons. It also adds hover and pressed effects, making interactions feel more dynamic. By placing the stylesheet on the window, all child widgets (like the buttons) inherit the style unless you override it for a specific widget. This approach lets you quickly create a consistent, attractive appearance across your entire application without having to subclass or manually paint widgets.

question mark

Which statement about styling Qt applications with stylesheets is correct?

Sélectionnez la réponse correcte

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Section 3. Chapitre 4
some-alt