尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

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

Qt Designer的父子部件样式表设置学习 在Qt Designer中新建图像界面放置两个QWidget命名为widget_1和widget_2两个QPushButtonpushButton_1和pushButton_2。它们的父子从属关系如下设置widget_1的样式表QWidget{background-color: rgb(221, 221, 221);border: 2px solid rgb(160,100, 100);}这个样式表的含义为widget_1中所有的QWidget都按照指定的样式表显示。由于QPushButton是QWidget的子类所以pushButton_1和pushButton_2被隐含修改了样式表。有些时候这并不是我们期望的结果我不希望QPushButton与QWidget是同样的显示效果。解决办法1、按部件类别名称改变子类的样式表将widget_1的样式表设置为/*类型为QWidget的部件重新定义*/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);}这里将隶属于widget_1的类型为QPushButton的所有部件全部定义了新的显示特性。2、 按oObjectName单独改变某一个小部件的样式表将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);}“#pushButton_1”的含义是将pushButton_1单独设置样式表。需要注意的是采用这种单独设置的办法如果被改变的对象还有子部件子部件并不跟随父部件的改变而改变。比如将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并没有改变。利用这个原理就有了下面的方法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;}由于将两级父容器部件单独设置了样式表所以隶属于它们的子部件不再继承父部件的样式表。4、使用.class{}的方法.class{}的方法只修改指定的类其派生的子类不改变。将widget_1的样式表设置为/*QWidget类型单独定义*/.QWidget{background-color: rgb(221, 221, 221);border: 2px solid rgb(160,100, 100);}/*所有的QPushButton类定义*/QPushButton{background-color: lightgreen;}5、使用后代选择器创建下图的父子结构将widget_1的样式表设置为/*QWidget类型单独定义*/.QWidget{background-color: rgb(221, 221, 221);border: 2px solid rgb(160,100, 100);}/*使用后代选择器定义widget_3的子部件QPushButton类*/#widget_3 QPushButton{background-color: lightgreen;border: 2px solid black;border-radius: 5px;}
返回列表