c++小學期大作業攻略（五）基於QSS的樣式美化

　　這回真的是最后一篇了。

　　前面說過，我們開發過程中暫時不搭理樣式問題，等最后再一起處理，那么現在就是最后處理時刻了！看到網上說QSS跟CSS差不多，我還覺得自己可以干回老本行了，結果用起來發現，QSS是要啥啥沒有吧？？？

　　不管怎么說還是跌跌撞撞地假裝完成了美化。最新，估計也是最后版本的exe也上傳到了雲盤（開啟可能有點慢因為是連線上數據庫）：https://cloud.tsinghua.edu.cn/d/059ef6b1f9a149ce879b/files/?p=/translation.rar

　　

　　

 

　　這部分還是得依賴大家自學，核心思想無非就是寫個控件名字之類的定位一下控件，然后把它的相關屬性丟上去。需要注意一下選擇器和盒子模型，其他細節有需要即查就行，畢竟我是不可能在博客里把所有知識點給你列一遍的，以下是一些主要參考教程：

　　選擇器：https://qtdebug.com/qtbook-qss-selector/

　　盒子模型：https://www.runoob.com/css/css-boxmodel.html

　　CSS：https://www.w3school.com.cn/css/index.asp

　　官方屬性表：https://doc.qt.io/qt-5/stylesheet-reference.html

　　官方樣例：https://doc.qt.io/qt-5/stylesheet-examples.html

 

　　如果你覺得，我可能不想（懶）或者沒時間把上面這些東西學起來，你可以選擇直接在網上借鑒(bushi)一份已有的QSS模板，然后把顏色、圖片、或者其他細節修改一下就行（我博客園的界面就是這么來的）。或者你可以選擇我的QSS（反正就當你看到之后了解了這個屬性是怎么工作的然后應用到了自己的程序上這種程度吧）：

/*設置主體內容*/
QWidget{
    font-size : 30px;
    font : large "Times New Roman";
    background: transparent;
    border : none;
    color : #D3D3D3;
    margin : 0px;
}

/*設置主窗口背景圖片*/
Translation{
    border-image : url("Images/background-2.jpg");
}



/*按鈕樣式*/
QPushButton{
    background : rgba(72, 61, 139, 0.7);
    color : #FFF5EE;
    border: 10px solid #483D8B;
    border-radius : 30px;
    max-width : 200px;
    min-width : 100px;
    max-height : 50px;
    min-height : 40px;
    margin-left : auto;
    margin-right : auto;
}

/*各類輸入框*/
QLineEdit, QTextEdit, QDateEdit, QComboBox{
    border: 10px solid #000000;
    border-radius : 20px;
    min-height : 40px;
    background : rgb(0,0,0,0.5);
    margin-top : 20px;
    selection-background-color : #36480e;
}

/*滾動區*/
QScrollArea{
    border-radius : 20px;
    background : rgb(0,0,0,0.5);
}
QScrollBar{
    width : 10px;
    color : gray;
}
QScrollBar::sub-line{
    background : gray;
}

/*標簽頁*/
QTabWidget::tab-bar {
    left:40px;
}
QTabBar::tab{
    background : rgb(0,0,0,0.8);
    margin-left: 5px;
    padding: 5px;
    border : 10px solid #000000;
    border-top-left-radius : 20px;
    border-top-right-radius : 20px;
}
QTabBar::tab:hover{
    background : rgb(100,100,100,0.8);
    color : black;
}
QTabBar::tab:!selected {
    margin-top : 5px;
}
QTabWidget{
    background : transparent;
}
QTabWidget::pane{
    border : 10px solid black;
    border-radius : 40px;
}
QStackedWidget{
    background : rgb(0,0,0,0.5);
}



/*菜單欄*/
QMenuBar{
    background : transparent;
}
QMenuBar::item{
    margin-top : 10px;
    margin-right : 30px;
    border: 10px solid #101010;
    background : #101010;
    border : 10px solid black;
    padding : 10px;
    border-radius : 20px;
}

/*菜單列表*/
QMenu::item{
    background : qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 #101010, stop:1 #000000);
    padding : 15px;
}
QMenu::item:selected{
    font-weight : bold;
    padding : 15px;
}
QLabelCenter{
    font-weight : bold;
}

/*彈出對話框*/
QInputDialog, QMessageBox{
    border-image : url("Images/background-4.jpg");
}


/*下拉選擇框，去除三角標記*/
QComboBox::drop-down{
    background : transparent;
}

/*個別單獨控件：主標題、主介紹、對話界面用戶名*/
Index > QLabelCenter, TaskList > QLabelCenter, Leaderboard > QLabelCenter, Login > QLabelCenter, Register > QLabelCenter{
    font-weight : 900;
    font-family : STCaiyun;
    font-size : 80px;
    color : white;
}
Index QTextEdit{
    font-size : 40px;
    text-align : center;
}
MessageView > QWidget > QLabelCenter{
    font-size : 50px;
    color : #4682B4;
}

　　結合上面放的exe食用效果更佳。

　　另外代碼上現在有一個無法解決的Bug，就是在聊天界面發送消息會一閃一閃的，大致原因是把滾動條拉到底部之前需要先把已有畫面繪制出來才能獲取滾動條的最大長度……暫時沒能解決回頭再說趴，如果有大佬會請務必教教我啊T_T

　　如果你發現我的程序樣式那里崩了請務必務必務必告訴我。

　　靜態編譯不想搞了（因為可能沒多少時間耗在上邊了），如果有大佬完成了靜態編譯我就坐等攻略了（可愛臉）。

　　8說了，我去寫注釋和項目報告了。