QSS技术（三）—— Qt样式表（QSS）控件样式大全

Qt样式表（QSS）控件样式大全

1. QPushButton

QPushButton 是一个常用的按钮控件，常见的样式设置包括背景颜色、边框、字体、悬停和按下状态等。

样式设置示例：

QPushButton {
   
   
    background-color: #3498db; /* 背景颜色 */
    color: white;             /* 文字颜色 */
    border: 2px solid #2980b9; /* 边框颜色 */
    border-radius: 5px;       /* 圆角 */
    padding: 10px;            /* 内边距 */
    font-size: 16px;          /* 字体大小 */
}

QPushButton:hover {
   
   
    background-color: #2980b9; /* 悬停时背景颜色 */
}

QPushButton:pressed {
   
   
    background-color: #1f77b4; /* 按下时背景颜色 */
    border-color: #0f5b8e;     /* 按下时边框颜色 */
}

QPushButton:disabled {
   
   
    background-color: #bdc3c7; /* 禁用时背景颜色 */
    color: #7f8c8d;            /* 禁用时文字颜色 */
    border: 2px solid #95a5a6; /* 禁用时边框颜色 */
}

---

2. QLineEdit

QLineEdit 是一个单行文本输入控件，样式设置包括边框、背景颜色、文字颜色和光标样式等。

样式设置示例：

QLineEdit {
   
   
    background-color: #fff;         /* 背景颜色 */
    border: 2px solid #ccc;         /* 边框颜色 */
    border-radius: 5px;             /* 圆角 */
    padding: 5px;                   /* 内边距 */
    color: #333;                    /* 文字颜色 */
    font-size: 14px;                /* 字体大小 */
}

QLineEdit:focus {
   
   
    border: 2px solid #3498db;      /* 获取焦点时边框颜色 */
    background-color: #f0f8ff;     /* 获取焦点时背景颜色 */
}

---

3. QCheckBox

QCheckBox 是一个复选框控件，样式设置包括复选框指示器的样式、背景颜色和字体等。

样式设置示例：

QCheckBox {
   
   
    spacing: 5px;                  /* 文字与指示器之间的间距 */
    color: #333;                   /* 文字颜色 */
}

QCheckBox::indicator {
   
   
    width: 13px;                  /* 指示器宽度 */
    height: 13px;                 /* 指示器高度 */
}

QCheckBox::indicator:checked {
   
   
    image: url(:/icons/checked.png); /* 选中时图标 */
}

QCheckBox::indicator:unchecked {
   
   
    image: url(:/icons/unchecked.png); /* 未选中时图标 */
}

---

4. QRadioButton

QRadioButton 是一个单选框控件，样式设置包括单选框指示器的样式、背景颜色和字体等。

样式设置示例：

QRadioButton {
   
   
    spacing: 5px;                  /* 文字与指示器之间的间距 */
    color: #333;                   /* 文字颜色 */
}

QRadioButton::indicator {
   
   
    width: 13px;                  /* 指示器宽度 */
    height: 13px;                 /* 指示器高度 */
}

QRadioButton::indicator:checked {
   
   
    image: url(:/icons/radio_checked.png); /* 选中时图标 */
}

Q