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

Styling Desktop Applications

Svep för att visa menyn

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?

Vänligen välj det korrekta svaret

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 4

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Avsnitt 3. Kapitel 4
some-alt