Qt qss

QSS (Qt Style Sheets) is a mechanism for setting the style of Qt interface, similar to CSS. By using QSS, you can change the appearance of the interface, including fonts, colors, backgrounds, borders, etc., without modifying the code.

The following is a sample code that demonstrates how to use QSS to style widgets:

#include <QtWidgets>

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

    // 创建一个窗口
    QMainWindow mainWindow;

    // 设置窗口标题
    mainWindow.setWindowTitle("QSS 示例");

    // 创建一个按钮
    QPushButton *button = new QPushButton("按钮", &mainWindow);

    // 设置按钮的样式
    QString qss = "QPushButton {"
                  "    background-color: green;"
                  "    color: white;"
                  "    font-size: 18px;"
                  "    padding: 10px;"
                  "}";

    button->setStyleSheet(qss);

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

In this example, we create a mainWindowQMainWindow object called and set the window's title. Then, we create a buttonQPushButton object called and set it as mainWindowa child of .

Next, we use QSS to style the button. In qssthe string, we define some style rules such as background color, text color, font size and padding. Using setStyleSheet()the function, we apply the QSS style to the button.

In this way, we can use QSS to customize the style of the component and realize the personalized appearance of the interface. You are free to modify the style rules in the QSS string as needed to suit your design needs.

Code style:

1. Set the background color:

QWidget { background-color: red; }

1. Set foreground color (text color):

QLabel { color: blue; }

1. Set font style and size:

QPushButton { font-family: Arial; font-size: 16px; font-weight: bold; }

1. Set text alignment:

QLineEdit { text-align: center; }

1. Set border style and color:

QFrame { border-style: solid; border-width: 2px; border-color: #FF0000; }

1. Set rounded borders:

QPushButton { border-radius: 10px; }

1. Set the box model padding:

QGroupBox { padding: 10px; }

1. Set the box model margins:

QLineEdit { margin: 20px; }

1. Set the size of the widget:

QLabel { width: 200px; height: 100px; }

1. Set a background image:

QWidget { background-image: url(path/to/image.png); background-repeat: no-repeat; background-position: center; }

1. Style the widget's hover, selected and disabled states:

QPushButton:hover { background-color: yellow; } QPushButton:pressed { background-color: green; } QPushButton:disabled { background-color: gray; }

1. Use pseudo-element selectors to style child elements of a specific widget:

QGroupBox::title { color: purple; }