BlueRoseNote/QtUI方案.md at master

BlueRose/BlueRoseNote

Fork 0

BlueRose 36e95249b1 Init

2023-06-29 11:55:02 +08:00

2.7 KiB

Raw Permalink Blame History

参考项目

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
使用函数的方式来生成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

2.7 KiB Raw Permalink Blame History Unescape Escape