Init

2023-06-29 11:55:02 +08:00
commit 36e95249b1
1236 changed files with 464197 additions and 0 deletions
--- a/07-Other/Qt/QtGUI/IconFont.md
+++ b/07-Other/Qt/QtGUI/IconFont.md
@@ -0,0 +1,53 @@
+## 字体文件下载
+fontawesome-webfont.ttf，另一个是：pe-icon-set-weather.ttf
+fontawesome-webfont.ttf   下载地址：http://fontawesome.dashgame.com/
+pe-icon-set-weather.ttf   下载地址：https://www.pixeden.com/icon-fonts/the-icons-font-set-weather
+在pixeden中还有许多其它的图标字体库下载：https://www.pixeden.com/icon-fonts
+
+## Code
+```
+#include "mainwindow.h"
+#include "ui_mainwindow.h"
+#include <QFontDatabase>
+ 
+MainWindow::MainWindow(QWidget *parent) :
+    QMainWindow(parent),
+    ui(new Ui::MainWindow)
+{
+    ui->setupUi(this);
+ 
+    //引入图形字体
+    int fontId = QFontDatabase::addApplicationFont(":/image/pe-icon-set-weather.ttf");  //加入字体，并获取字体ID
+    QString fontName = QFontDatabase::applicationFontFamilies(fontId).at(0);    //获取字体名称
+    QFont iconFont = QFont(fontName);
+    iconFont.setPixelSize(128);     //设置字体大小
+ 
+    ui->lab_e901->setFont(iconFont);        //设置Label的字体
+    ui->lab_e901->setText(QChar(0xe901));   //设置Label的文体
+    ui->lab_e901->setStyleSheet("color:red;");
+ 
+    QPalette blue_pe;
+    blue_pe.setColor(QPalette::WindowText,Qt::blue);
+    ui->lab_e903->setFont(iconFont);
+    ui->lab_e903->setText(QChar(0xe903));
+    ui->lab_e903->setPalette(blue_pe);
+ 
+    ui->lab_e905->setFont(iconFont);
+    ui->lab_e905->setText(QChar(0xe905));
+ 
+    ui->lab_e907->setFont(iconFont);
+    ui->lab_e907->setText(QChar(0xe907));
+}
+ 
+MainWindow::~MainWindow()
+{
+    delete ui;
+}
+```
+
+## QFontDatabase
+QStringList QFontDatabase::families(QFontDatabase::WritingSystem writingSystem = Any) const
+返回可用的字体列表。
+
+QFont QFontDatabase::font(const QString &family, const QString &style, int pointSize) const
+返回一个可用的字体对象。
--- a/07-Other/Qt/QtGUI/QSS笔记.md
+++ b/07-Other/Qt/QtGUI/QSS笔记.md
@@ -0,0 +1,104 @@
+## 通用选择器
+* 作为选择器，作用于所有的 widget。
+
+类型选择器
+类名 作为选择器，作用于它自己和它的所有子类。
+```
+QFrame {
+   background: gray;
+}
+```
+
+## 类选择器
+. + 类名 或者 . + class 的属性值 作为选择器（使用 setProperty(“class”, “QSSClassName”) 设置），只会作用于它自己，它的子类不受影响，注意和类型选择器的区别。
+```
+app.setStyleSheet(".QWidget { background: gray; }"
+                  ".RedButton { background: magenta; }");
+
+// .RedButton 将作为类选择器
+openButton->setProperty("class",  "RedButton");
+closeButton->setProperty("class", "RedButton");
+```
+
+## ID 选择器
+'#' + objectName 作为选择器，只作用于用此 objectName 的对象
+```
+// #openButton 和 #closeButton 作为 ID 选择器
+app.setStyleSheet(".QWidget { background: gray; }"
+                  "#openButton, #closeButton { background: magenta; }");
+    
+openButton->setObjectName("openButton");
+closeButton->setObjectName("closeButton");
+```
+## 属性选择器
+选择器[属性="值"] 作为选择器，这个属性可用通过 object->property(propertyName) 访问的，Qt 里称为 Dynamic Properties。
+
+如上面的程序， openButton 和 closeButton 的背景是洋红色的，但是 saveButton 不受影响，也可以使用属性选择器来实现：
+```
+app.setStyleSheet(".QWidget { background: gray; }"
+                  "QPushButton[level='dangerous'] { background: magenta; }");
+
+openButton->setProperty("level",  "dangerous");
+```
+
+属性选择器可以包含多个属性，只需要：
+```
+QPushButton[level='aaa'],QPushButton[level='bbb'] { background: magenta; }
+```
+如果有多个属性，则会优先选择匹配数多的样式。
+
+## 包含选择器
+英语叫做 Descendant Selector，descendant 的表达比较到位。
+
+选择器之间用空格隔开，作用于 Widget 的 子Widget，子Widget 的 子Widget，……，子子孙孙，无穷尽也。
+```
+QFrame {
+	background: gray;
+}
+
+/* 设置 QFrame 中的 QPushButton 的 QSS */
+QFrame QPushButton {
+    border: 2px solid magenta;
+    border-radius: 10px;
+    background: white;
+    padding: 2px 15px;
+}
+```
+
+## 子元素选择器
+选择器之间用 > 隔开，作用于 Widget 的直接 子Widget，注意和包含选择器的区别。
+```
+QFrame {
+	background: gray;
+}
+    
+QFrame > QPushButton {
+    border: 2px solid magenta;
+    border-radius: 10px;
+    background: white;
+    padding: 2px 15px;
+}
+```
+
+## 伪类选择器
+选择器:状态 作为选择器，支持 ! 操作符，表示 非。
+```
+QPushButton:hover { color: white }
+QCheckBox:checked { color: white }
+QCheckBox:!checked { color: red }
+```
+
+## Subcontrol 选择器
+选择器::subcontrol 作为选择 Subcontrol 的选择器。
+
+有些 widget 是由多个部分组合成的，例如 QCheckBox 由 icon(indicator) 和 text 组成，可以使用 选择器::subcontrol 来设置 subcontrol 的样式：
+```
+QCheckBox::indicator {
+    width: 20px;
+    height: 20px;
+}
+
+QCheckBox {
+    spacing: 8px;
+}
+```
--- a/07-Other/Qt/QtGUI/QtUI方案.md
+++ b/07-Other/Qt/QtGUI/QtUI方案.md
@@ -0,0 +1,102 @@
+## 参考项目
+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