Qt 界面美化——利用样式表操作

参考:https://blog.csdn.net/sinan1995/article/details/80080148

1.按钮样式表设置:

 QString qss = (
                     //正常状态样式
                     "QPushButton{"
                     "background-color:rgba(60, 179, 113);"  //背景色(也可以设置图片)
                     "border-style:outset;"                  //边框样式(inset/outset)
                     "border-width:4px;"                     //边框宽度像素
                     "border-radius:10px;"                   //边框圆角半径像素
                     "border-color:rgba(255,255,255,30);"    //边框颜色
                     "font:bold 14px;"                       //字体,字体大小
                     "color:rgba(255,255,255);"              //字体颜色
                     "padding:6px;"                          //填衬
                     "}"
                     //鼠标按下样式
                     "QPushButton:pressed{"
                     "background-color:rgba(100,255,100,200);"
                     "border-color:rgba(255,255,255,30);"
                     "border-style:inset;"
                     "color:rgba(0,0,0,100);"
                     "}"
                     //鼠标悬停样式
                     "QPushButton:hover{"
                     "background-color:rgba(0,139,0);"
                     "border-color:rgba(255,255,255,200);"
                     "color:rgba(255,255,255);"
                     "}");
按钮调用样式表:
 ui->pushButton->setStyleSheet(qss);                 //设置按钮样式

2.设置tabWidget样式表

    QString tabBarStyle = "QTabBar::tab {min-width:100px;background-color:rgba(156,156,156);color: white;"
                          "border-top-left-radius: 10px;border-top-right-radius: 10px;padding:5px;} \
                          QTabBar::tab:selected {color:rgba(0,139,0);background-color:rgba(207,207,207)}"
                          "QTabBar::tab:hover{""background-color:rgba(207,207,207);""border-color:rgba(255,255,255,200);""color:rgba(0,139,0);""}";
然后调用样式表:
ui->tabWidget->setStyleSheet(tabBarStyle);

3.按钮添加图片(多种状态)

ps:使用之前要先添加图片资源
添加图片资源的方法:1.右键项目,add new,选择Qt 资源文件
在这里插入图片描述
2.添加前缀 add Prefix
在这里插入图片描述
3.添加图片文件 add Files(可以先把图片复制到项目所在目录下),然后就可以使用图片了。
ps:图片路径,可以在资源文件下,右键图片名称,可以copy path 和copy URL路径,选一个使用

//设置按钮样式(利用样式表添加图片)
    QString qss = (//正常状态样式
                   "QPushButton{border-image:url(:/begin.png);padding:0px;border:none}"
                   //鼠标悬停样式
                   "QPushButton:hover{border-image:url(:/1.png)}"
                   //按钮不可用时
                   "QPushButton:disabled{border-image:url(:2.png)}");
    ui->DynamicBegainBtn->setStyleSheet(qss);
    ui->DynamicBegainBtn->setToolTip("点击开始");         //鼠标悬停时显示按钮文字
相关推荐
©️2020 CSDN 皮肤主题: 岁月 设计师:pinMode 返回首页