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

最新推荐文章于 2024-07-29 11:22:13 发布

每木昔月

最新推荐文章于 2024-07-29 11:22:13 发布

阅读量913

点赞数 1

分类专栏： Qt

本文链接：https://blog.csdn.net/qq_40754866/article/details/106262042

版权

Qt 专栏收录该内容

24 篇文章 10 订阅

订阅专栏

参考：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("点击开始");         //鼠标悬停时显示按钮文字