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
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。