在Qt Designer中新建图像界面,放置两个QWidget,命名为widget_1和widget_2;两个QPushButton,pushButton_1和pushButton_2。

 

Qt Designer的父子部件样式表设置学习-LMLPHP

 它们的父子从属关系如下:

Qt Designer的父子部件样式表设置学习-LMLPHP

设置widget_1的样式表:

QWidget{

background-color: rgb(221, 221, 221);

border: 2px solid rgb(160,100, 100);

}

这个样式表的含义为:widget_1中,所有的QWidget都按照指定的样式表显示。

Qt Designer的父子部件样式表设置学习-LMLPHP

 由于QPushButton是QWidget的子类,所以pushButton_1和pushButton_2被隐含修改了样式表。

 有些时候,这并不是我们期望的结果,我不希望QPushButton与QWidget是同样的显示效果。

解决办法:

1、单独改变子类的样式表:将widget_1的样式表设置为:

QWidget{

background-color: rgb(221, 221, 221);

border: 2px solid rgb(160,100, 100);

}

/*类型为QPushButton的部件重新定义*/

QPushButton{ 

background-color: rgb(150, 150, 150);

border: 2px solid rgb(100,160, 100);

}

Qt Designer的父子部件样式表设置学习-LMLPHP

 这里,将隶属于widget_1的类型为QPushButton的所有部件全部定义了新的显示特性。

2、 单独改变某一个小部件的样式表:将widget_1的样式表设置为:

QWidget{

background-color: rgb(221, 221, 221);

border: 2px solid rgb(160,100, 100);

}

/*pushButton_1重新定义*/ 

#pushButton_1{

background-color: rgb(150, 150, 150);

border: 2px solid rgb(100,160, 100);

}

 

Qt Designer的父子部件样式表设置学习-LMLPHP

 需要注意的是,采用这种办法,如果被改变的小部件还有它的子部件,子部件并不跟随被改变的小部件的改变而改变。

比如,将widget_1的样式表设置为:

QWidget{

background-color: rgb(221, 221, 221);

border: 2px solid rgb(160,100, 100);

}

/*widget_2重新定义*/

#widget_2{

background-color: rgb(150, 150, 150);

border: 2px solid rgb(100,160, 100);

}

单独改变了widget_2,但是隶属于widget_2的pushButton_1和pushButton_2并没有改变。

Qt Designer的父子部件样式表设置学习-LMLPHP

利用这个原理,就有了下面的方法:

3、将父部件单独设置样式表

将widget_1的样式表设置为:

/*widget_1单独定义*/

#widget_1{

background-color: rgb(221, 221, 221);

border: 2px solid rgb(160,100, 100);

}

/*widget_2单独定义*/

#widget_2{

background-color: rgb(150, 150, 150);

border: 2px solid rgb(100,100, 160);

}

/*所有的QPushButton重新定义*/

QPushButton{

background-color: lightgreen;

}

Qt Designer的父子部件样式表设置学习-LMLPHP

 由于将两级子部件单独设置了样式表,所以隶属于它们的QPushButton拥有独有的样式表。

07-27 07:44