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 |