記錄一下Qt常用的登錄界面的設計 方便以后使用！
1.QpushButton
改變一個按鈕的顏色，當鼠標放上去和移開時顯示不同的顏色。
QPushButton { background-color: rgb(137, 145, 255); border-radius: 3px; color: rgb(255, 255, 255); }
QPushButton:hover { background-color: rgb(58, 61, 255); }
2.常見界面關閉按鈕的設計
QPushButton{
border-image: url(:/CIO/Image/Logon/btn_close_normal.png);
}
QPushButton:hover{
border-image: url(:/CIO/Image/Logon/btn_close_highlight.png);
}
QPushButton:pressed{
border-image: url(:/CIO/Image/Logon/btn_close_down.png);
}
3.最小化按鈕的設計
QPushButton{
border-image: url(:/CIO/Image/Logon/btn_mini_normal.png);
}
QPushButton:hover{
border-image: url(:/CIO/Image/Logon/btn_mini_highlight.png);
}
QPushButton:pressed{
border-image: url(:/CIO/Image/Logon/btn_mini_down.png);
}
4.界面文字的設計
QPushButton{
border-image: url(:/CIO/Image/Logon/mima.png);
}
QPushButton::hover{
border-image: url(:/CIO/Image/Logon/mima_hover.png);
}
QPushButton::pressed{
border-image: url(:/CIO/Image/Logon/mima_press.png);
}
5.登錄按鈕的設計
QPushButton{
color: rgb(0,27,47);
font: 9pt "微軟雅黑";
border-image: url(:/CIO/Image/Logon/button_login_normal.png);
}
QPushButton:hover{
border-image: url(:/CIO/Image/Logon/button_login_hover.png);
}
QPushButton:pressed{
border-image: url(:/CIO/Image/Logon/button_login_down.png);
}
6.帳號行編輯框的設計（后帶有箭頭符號）
QComboBox {
border-width : 1px;
border-color : rgb(255,255,255);
border-style : solid;
color: rgb(0,27,47);
font: 9pt "微軟雅黑";
}
QComboBox:hover {
border-width : 1px;
border-color : #1ea4f2;
border-style : solid;
}
QComboBox::drop-down {
image: url(:/CIO/Image/Logon/btn_combobox_normal.png);
}
7.界面添加圖片
QWidget{
border-image: url(:/CIO/Image/Logon/DefaultFace.png);
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
//上面的這四行代碼可以用
//border-radius:10px;來替代
//但是如果遇到只有上面（或下面）兩個角圓角化的時候就可以很方便了，效果圖沒有實現，
//大家可以自己試試。
}
8.密碼LineEdit的設計
QWidget{
border : none;
color: rgb(0,27,47);
font: 9pt "微軟雅黑";
}
QWidget:hover{
border-width : 1px;
border-color : #1ea4f2;
border-style : solid;
border-width : 1px;
}
全部的效果圖如下：
---------------------
作者：生在90后的60后
來源：CSDN
原文：https://blog.csdn.net/tax10240809163com/article/details/50338297
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！