【Qt】如何实现小部件的样式控制

原创已于 2022-04-29 08:23:24 修改 · 978 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#qt #Qt #C++ #样式表 #界面换肤

于 2022-02-17 22:53:54 首次发布

小生聊【Qt】专栏收录该内容

58 篇文章

订阅专栏

文章目录

一、背景

QObject的setProperty ()函数功能比较好用。本文将总结三点在实际开发中常用的应用场景：

（1）定制单个控件样式。

（2）实现页面换肤。

（3）向部件传递动态参数（可以修改、删除）。

二、定制单个控件的样式

当在QtCreator下拖出多个相同类型的控件时，其名称是软件生成的（除非自己修改）。当把样式表放在一个单独的文件中进行加载时，这时就可以使用setProperty ()来增加控件的对象属性。然后，在样式表文件中，设置对应的属性，在对应属性条目下编写具体的样式代码，即可定制相同类型控件的特定样式了。

在这里插入图片描述

如上图所示，创建两个QWidget，三个QPushButton。在样式表文件中将使用如下代码分别定制这两个QWidget：

QWidget[name="left"]{
    border:1px solid #242424;
    border-radius:0px;
    background:#242424;
}

QWidget[name="top"]{
    border:1px solid #242424;
    border-radius:0px;
    background:#444444;
}

从上述CSS代码可见，属性参数为【left】的背景颜色是#242424，属性参数为【top】的背景颜色是#444444。从而实现定制的两个QWidget的背景颜色不同。
然后在代码中使用setProperty ()函数添加对象属性，如下代码片段：

ui->widget->setProperty("name","top");
ui->widget_2->setProperty("name","left");

在应用代码中使用qApp->setStyleSheet()设置样式表文件，即可。

运行效果图：
在这里插入图片描述

三、实现页面换肤。

页面换肤的实现方法不止一种，本文使用setProperty()函数来实现（注：可能比单独加载样式表文件要复杂些，可以当做一种思路，哈哈）

【核心思路】

在样式表中创建多个样式，然后当更换皮肤信号发起后（例如菜单按钮被点击时），则重新使用setProperty()设置对应样式表标记下的部件，然后再重新加载样式表文件。

这里以绿色小按钮为例：

void MyWidget::on_pushButton_clicked()
{
    //设置样式表标记下的对象属性
    ui->widget->setProperty("color","top_green");
	//加载样式表文件
    loadStyleSheet();
}

以上成员函数是【绿色小按钮】点击事件处理槽函数。在函数中执行了两个操作，第一个是：将设置绿色小按钮的【color】属性值是“top_green”。第二个是：加载样式表文件。

样式表文件中“top_green”的样式表描述如下代码所示：

QWidget[color="top_green"]{
    border:1px solid #242424;
    border-radius:5px;
    background:#019858;
}

【运行效果】
请添加图片描述
以上程序中，分别点击绿、黑、白三个按钮时，将切换顶部widget的背景颜色。

搜索关注【嵌入式小生】wx公众号获取更多精彩内容>>>>
请添加图片描述