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; // 對話框的樣式
各種效果的實現
設置邊框的大小
不知道為什么設置為
width:xxx;
height:xxx; 起不了效果
采用
min-width:612px;
max-width: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{
width: 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
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。