QT QSS，QML 样式学习
简介
通过QT的QSS和QML定制QT的样式
参考链接
https://www.jianshu.com/p/2c7db2f6c458
https://www.cnblogs.com/bclshuai/p/9809679.html 有很多方法
使用方法
- 在Qt Designer中设置stylesheet
- 在代码中调用控制的stylesheet()接口来设置样式
- 将QSS内容保存到文件中，通过代码读取该文件内容。
void MainWindow::load_style_sheet(const QString &fileName)
{
QFile file(fileName);
if(file.open(QFile::ReadOnly)) {
qApp->setStyleSheet(file.readAll());
file.close();
}
}
- 使用命令行参数"-stylesheet"来指定要加载的QSS文件
./QtDemo -stylesheet test.qss
简单预览
在qtCreater里面使用Ctrl+R来预览
关键css
border-image:url(); // 设置背景图片
QMenu{}; // 作为父类设置
QMenu::item; // 对每一个元素进行设置
QMenu::item:selected; // 元素选中的样式设置
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 rgb(45,133,207),
stop: 1.0 rgb(125,195,250));// x 坐标不变y坐标变化，颜色从0的颜色渐变到1的颜色
QMenu::item:disabled; // 元素设定为不能使用的颜色
QScrollBar; // 滑动条
QScrollBar:horizontal; // 水平滑动条
QScrollBar::handle:horizontal;// 设定滑块
QScrollBar::add-line:horizontal; // 下箭头的设定
subcontrol-position: right; // css没有的控制规范 可以对空间中的元素进行控制
subcontrol-origin: margin;
QScrollBar::sub-line:horizontal; // 上箭头的设定 奇怪
QScrollBar::right-arrow:horizontal, QScrollBar::left-arrow:horizontal;// 箭头
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal; // 滑块未划过的区域 和 滑块划过的区域
QScrollBar:vertical; // 垂直滑动条
QScrollBar::handle:vertical;
QScrollBar::add-line:vertical;QScrollBar::sub-line:vertical;
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical;
QTabBar::tab;// 书签分页器
QTabWidget::pane;// 玻璃片应该就是每个分页的设置
QTabBar::tab:last; // 最有一个tab的设置
border-top-right-radius: 3px;// 就设置上和右的边框宽度
QTabBar::tab:first:!selected; // 未选中的标签
QTabBar::tab:!selected;// 未选中的标签
QTabBar::tab:selected; // 选中的标签
QTabBar::tab:!selected:hover; // 没选中的标签然后鼠标浮现在其上方的样式
QListWidget::Item; // 列表中的每个元素
QListWidget::Item:hover; // 列表中的元素鼠标浮在上方
QListWidget::Item:selected; // 元素选中的样式
QLineEdit; // 行编辑器
QLineEdit:focus; // 获得焦点
QPushButton; // 按钮的样式
QPushButton:hover; // --
QPushButton:pressed; // --
QTextEdit;
QTextEdit:hover;
QTextEdit:focus;
QComboBox; // 组合框
QComboBox::drop-down; // 组合框右边的按钮
QComboBox QAbstractItemView; // QAbstractItemView; 对类似下拉框的操作
QDialog; // 对话框的样式
各种效果的实现
设置边框的大小
不知道为什么设置为
xxx;
height:xxx; 起不了效果
采用
min-612px;
max-612px;
min-height:680px;
max-height:680px;
设置边框边角的弧度
border-radius: 12px;
当然你可以分别设置其他方向的弧度例如
border-top-left-radius:2em;
设置背景图片
可以设置为资源文件夹qrc里面的东西
background:url(':/clothTexture/Resources/83.png');
只设置下边框
border: none;
border-bottom: 2px solid #999999;
设置label显示密码形式
lineedit-password-character: 1000;
其中代码设置
ui->password->setEchoMode(QLineEdit::Password);
设置checkbox的勾选框颜色
QCheckBox::indicator{
24px;
height: 24px;
border: 1px solid #AC9472;
}
设置checkbox勾选后展示的背景图片
QCheckBox::indicator:checked {
image: url(:/clothTexture/Resources/68.png);
border: 1px solid #AC9472;
}
menubar的定制没有实现
设置字体
因为 PingFang-SC 字体要自己下载，没有在QSS里面找到函数接口，写代码实现
ui->setupUi(this);
QFontDatabase fontDatabase;
int result = fontDatabase.addApplicationFont("D:/code/clothTexture/clothTexture/Resources/PingFang-SC-Regular.ttf");
QString stringFont = QFontDatabase::applicationFontFamilies(result).at(0);
QFont font(stringFont);
//QGuiApplication::setFont(font);
ui->XXX->setFont(font);
设置没有app标头的效果
setWindowFlags(Qt::FramelessWindowHint | Qt::Tool);
setAttribute(Qt::WA_TranslucentBackground);
ui->setupUi(this);
展现出dialog的边角弧度
将视觉组件用Frame包裹，然后设定Frame的显示效果。
TIPS
- 对象的objectName就是QSS中的id
menubar
menubar 的效果一直做不出来打算尝试更新QT到最新版本 5.15 尝试学习qml
qml
link：
https://wiki.qt.io/QtDesignStudio
https://doc.qt.io/qt-5/qmlapplications.html
https://doc.qt.io/qt-5/qtdoc-tutorials-alarms-example.html
Qt Quick & qml
https://blog.csdn.net/qq_22122811/article/details/78163754 （CSDN博客讲的很详细）
使用QML 和C++ 混合编程 https://blog.csdn.net/foruok/article/details/32698603
简单总结
QTCSS 不是特别难，但是，不想前端那样所见即所得，如果在virtual studio中进行样式更改，每次更改需要重新编译运行才能改到新的样式。在QT Designer里面可以简单看到预览样式。
后续的修改，可能qt widget不能能够设定为很完美的效果。最新的qt开发者协会推荐使用qml来实现定制化。也简单查看了网易云音乐和迅雷的产品架构。
网易云音乐PC版本采用的是
云音乐和钉钉可以确定是CEF3框架+html UI，说的通俗一点就是包装了一个浏览器，里面显示的还是html元素，网易很多应用这方面做的比较成熟了，把CEF3框架(开源的)拿来定制的比较深，一般用户几乎看不出他们用的PC端实际上还是类Web应用；微信新版不知道，之前的应该还是传统的Direct UI应用。(利益相关，chromium内核浏览器开发。)
作者：balloon
链接：https://www.zhihu.com/question/50128701/answer/139653191
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
迅雷采用的是
之前扒过飞书的源码，从代码设计架构层面里里外外学习一把，飞书还是挺“大方”的，源码在客户端和网页端都一览无余，不过好像新版本已经看不到了。相关的文章由于在内网技术论坛发过了不便于再发出来（泄露内部资料会被查水表的），因此这次周末抽时间换一个鸟窝来掏一掏。一不小心发现迅雷的客户端竟然也是基于 Electron 开发的，那代码就好扒拉了。（先吐槽一下这新版本的某lei为什么要抄钉钉的界面，这些年某lei都不知道自己要干什么了，每个版本都招人嫌）。
作者：终端研发部
链接：https://zhuanlan.zhihu.com/p/337048581
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。