Qss美化界面1:主界面美化(基础)
先看效果图:
思路:导入qss文件,在qss文件中改变控件属性。另外:头部导航栏的按钮icon分为两种颜色,是模仿liudianwu大神的图标工具类的思路,根据fontawesome字体库选出字体动态绘制多种不同颜色的图标(根据自己定义的正常颜色和按下,悬浮的颜色而定),在点击按钮是切换icon而达成的效果。
再来看看界面原型:
关键cpp代码:
void Widget::initPage(){
ui->widget_left->setProperty("nav","left");
ui->widget_top->setProperty("nav","top");
ui->widget_head->setProperty("nav","head");
ui->widget_window->setProperty("nav","window");
ui->widget_body->setProperty("nav","body");
IconUtil::getInstance()->setBtnIcon(ui->toolButton_menu,QChar(0xf0c9),15);
IconUtil::getInstance()->setBtnIcon(ui->toolButton_zoomout,QChar(0xf068),15);
IconUtil::getInstance()->setBtnIcon(ui->toolButton_zoom,QChar(0xf067),15);
IconUtil::getInstance()->setBtnIcon(ui->toolButton_close,QChar(0xf00d),15);
}
void Widget::initQss(){
QFile file(":/qss/stylesheet.css");
if(file.open(QIODevice::ReadOnly)){
QString qss = QLatin1String(file.readAll());
qApp->setStyleSheet(qss);
file.close();
}else{
qDebug()<<"qss is not open";
}
}
void Widget::initHeadBtn(){
QList<int> charList;
btnListHead<<ui->toolButton_2<<ui->toolButton_5<<ui->toolButton_6<<ui->toolButton_7<<ui->toolButton_8<<ui->toolButton;
charList<<0xf26e<<0xf7a9<<0xf5d0<<0xf7b0<<0xf7b1<<0xf270;
IconUtil::getInstance()->setStyle(btnListHead,charList);
for(QToolButton *btn:btnListHead){
connect(btn,QToolButton::clicked,this,Widget::toolBtnHeadClicked);
}
}
void Widget::initLeftBtn(){
btnListLeft<<ui->toolButton_add<<ui->toolButton2<<ui->toolButton_3<<ui->toolButton_4;
for(QToolButton *btn:btnListLeft){
connect(btn,QToolButton::clicked,this,Widget::toolBtnLeftClicked);
}
}
void Widget::toolBtnHeadClicked(){
QToolButton* curMacHeadBtn = (QToolButton*)sender();
for(QToolButton *toolBtn : btnListHead){
if(toolBtn == curMacHeadBtn){
toolBtn->setChecked(true);
toolBtn->setIcon(QIcon(IconUtil::getInstance()->getPixmap(toolBtn,false)));
}else{
toolBtn->setChecked(false);
toolBtn->setIcon(QIcon(IconUtil::getInstance()->getPixmap(toolBtn,true)));
}
}
}
void Widget::toolBtnLeftClicked(){
QToolButton* curMacLeftBtn = (QToolButton*)sender();
for(QToolButton *toolBtn : btnListLeft){
if(toolBtn == curMacLeftBtn){
toolBtn->setChecked(true);
}else{
toolBtn->setChecked(false);
}
}
}
void Widget::on_toolButton_close_clicked()
{
close();
}
void Widget::mousePressEvent(QMouseEvent * event)
{
if (event->button() == Qt::LeftButton)
{
pressed = true;
m_point = event->globalPos() - this->frameGeometry().topLeft();
}
}
void Widget::mouseMoveEvent(QMouseEvent * event)
{
if (event->buttons() & Qt::LeftButton)
{
if(!pressed){
return;
}
move(event->globalPos() - m_point);
}
}
void Widget::mouseReleaseEvent(QMouseEvent *event){
pressed = false;
}
qss代码:
QWidget[nav="top"]{
background:#555B6B/*qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #555B6B,stop:1 #2E313A);*/
}
#label_title{
color:#FFFFFF;
}
QWidget[nav="window"]{
margin-top:0px;
}
QWidget[nav="window"] QAbstractButton{
background-color:#555B6B;
border-style:none;
border-width:0px;
}
#toolButton_menu:pressed,#toolButton_zoom:pressed,#toolButton_zoomout:pressed,#toolButton_menu:hover,#toolButton_zoom:hover,#toolButton_zoomout:hover{
background-color:#2E313A;
border-style:none;
border-width:0px;
}
#toolButton_close:pressed,#toolButton_close:hover{
background-color:#E81123;
border-style:none;
border-width:0px;
}
QWidget[nav="head"] QAbstractButton{
color:#FFFFFF;
border-style:none;
border-width:0px;
padding:5px;
background-color:#555B6B;
}
QWidget[nav="head"] QAbstractButton:pressed,QWidget[nav="head"] QAbstractButton:hover,QWidget[nav="head"] QAbstractButton:checked{
color:#E84753;
border-style:solid;
border-color:#41CD52;
border-width:0px 0px 3px 0px;
padding:4px 4px 1px 4px;
background-color:#31333A;
}
QWidget[nav="body"]{
background:#F5F5F5;
}
QWidget[nav="left"]{
background:#FFFFFF;
}
QWidget[nav="left"] QAbstractButton{
padding-left:20px;
border-style:none;
background:#FFFFFF;
}
QWidget[nav="left"] QAbstractButton:pressed,QWidget[nav="left"] QAbstractButton:hover,QWidget[nav="left"] QAbstractButton:checked{
border-style:solid;
border-color:#F39828;
border-width:0px 3px 0px 0px;
padding:4px 1px 4px 4px;
background:#F5F5F5;
}
QWidget[nav="left"] QLabel{
color:gray;
}
#widget,#widget_2{
background-color:#FFFFFF;
border-radius:5px;
margin-bottom:10px;
}
完整代码:
网盘地址:https://pan.baidu.com/s/1ZOjHAIAy0rNfiBfGcF0wpA&shfl=sharepset