102 lines
2.7 KiB
Markdown
102 lines
2.7 KiB
Markdown
|
## 参考项目
|
|||
|
|
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
|