## 参考项目
https://blog.csdn.net/liang19890820/article/details/50557240
https://www.cnblogs.com/feiyangqingyun/p/3915657.html

QSS模板网站：https://qss-stock.devsecstudio.com/

## 技巧
Qt内置图标封装在QStyle中，大概七十多个图标，可以直接拿来用。

- SP_TitleBarMenuButton,
- SP_TitleBarMinButton,
- SP_TitleBarMaxButton,
- SP_TitleBarCloseButton,
- SP_MessageBoxInformation,
- SP_MessageBoxWarning,
- SP_MessageBoxCritical,
- SP_MessageBoxQuestion,

## 配色
ElementUI配色：https://element.eleme.cn/#/zh-CN/component/color

Brand Color `#409EFF`

**辅助色**：
- Success#67C23A
- Warning#E6A23C
- Danger#F56C6C
- Info#909399

**基础色**：
- 主要文字#303133
- 常规文字#606266
- 次要文字#909399
- 占位文字#C0C4CC
- 一级边框#DCDFE6
- 二级边框#E4E7ED
- 三级边框#EBEEF5
- 四级边框#F2F6FC

## 边框
- 实线	1px	
- 虚线	2px	

### 圆角
- 无圆角border-radius: 0px
- 小圆角border-radius: 2px
- 大圆角border-radius: 4px
- 圆形圆角border-radius: 30px

### 投影
- 基础投影 box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
- 浅色投影 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)

## QSS设置函数
feiyangqingyun-QWidgetDemo-master/FlatUI<br>
使用函数的方式来生成QSS代码与设置对应的控件。
```
QString BRUI::setPushButtonQss(QPushButton *btn, int radius, int padding,const QString &normalColor,const QString &normalTextColor,const QString &hoverColor,const QString &hoverTextColor,const QString &pressedColor,const QString &pressedTextColor)
{
    QStringList list;
    list.append(QString("QPushButton{border-style:none;padding:%1px;border-radius:%2px;color:%3;background:%4;}").arg(padding).arg(radius).arg(normalTextColor).arg(normalColor));
    list.append(QString("QPushButton:hover{color:%1;background:%2;}").arg(hoverTextColor).arg(hoverColor));
    list.append(QString("QPushButton:pressed{color:%1;background:%2;}").arg(pressedTextColor).arg(pressedColor));

    QString qss = list.join("");
    if(btn)
        btn->setStyleSheet(qss);
    return qss;
}
```
## 可以参考的UI工程
QSS生成工具：StyleDemo。

给QWidget添加属性来控制样式：
```
ui->widgetLeft->setProperty("nav", "left");
ui->widgetBottom->setProperty("form", "bottom");
ui->widgetTop->setProperty("nav", "top");
ui->widgetVideo->setProperty("video", true);
```
Qss：
```
QWidget[nav="left"] QAbstractButton:checked,QWidget[nav="left"] QAbstractButton:pressed{
color:#386487;
border-style:solid;
border-width:0px 0px 0px 2px;
padding:4px 4px 4px 2px;
border-color:#00BB9E;
background-color:#EAF7FF;
}
```
### 切换器
ImageSwitch
### 日历
lunarcalendarwidget
### 导航按钮
NavButton

## StyleDemo中的CSS
flatwhite.css
lightblue.css
psblack.css