qt5系统教程（一）实现自定义用户样式

窗口自定义用户样式

介绍如何利用css类似的style sheet（样式表）来自定义一个个性化的窗口。

step1 找到输入Style Sheet的位置

• 方法一：在对象栏中，右键打开下来菜单，选择“改变样式表”。
  
• 方法二：
  
  通过上面两种方式均可打开下图所示的样式表编辑器。
  
• 将下面的代码输入到刚打开的样式编辑器，点击ok，发现整个窗体编程了黄色

border: 2px solid gray; //2像素的灰色边框
border-radius: 10px;//圆角
padding: 0 8px;
background: yellow;//背景颜色为黄色

这样设置之后，之后添加进来的所有控件都会默认继承这个样式，如下图所示，新建了三个按钮，三个按钮也是黄色，灰边圆角的了。

• 取消这种样式设置的方式也很简单，方法一可以直接将样式编辑器里的代码删掉然后确定后就全部取消了。方法二可以点击下图所示位置的小箭头，会自动清空回到默认状态。
  

添加三个按钮并尝试更改其样式

经过上一步我们已经学会如何更改背景样式，并恢复了默认设置，现在开始尝试添加控件。更改控件样式，如下图所示，从左侧的控件栏拖拽三个按钮控件到界面上，可以发现拖拽后，右侧的对象栏中出现了按钮的默认名字和类别。

-选中主界面，打开样式编辑器，将下列代码复制到里面确定后，会发向界面上所有的按钮都会编程黄色加灰边圆角。这是无论你向界面中拖拽几个按钮，都会是这个样式，因为如下面代码所示他是对整个“QPushButton”类更改。

QPushButton//PushButton类
{
 border: 2px solid gray;
 border-radius: 10px;
 padding: 0 8px;
 background: yellow;
}

• 那如果我只是想要但对对其中某一个按钮做这样的样式更改呢？其实也很简单。两种方法。一种方法就是选中想要进行更改的按钮，在他的样式编辑器中直接更改，另外一种方式就是在刚刚主界面的样式编辑器中用下面这段代码提花之前的代码。

QPushButton#pushButton_3//因为要准对第三个按钮进行更改。所以用#+按钮名的方式进行指定。
{
 border: 2px solid gray;
 border-radius: 10px;
 padding: 0 8px;
 background: yellow;
}

• 上面的一旦掌握熟练，我们可以进行一些稍微复杂的代码尝试，你可以试着将下面的代码复制到主界面的样式编辑器中。

QPushButton//这是对QPushButton类的整体更改
{
	color: red; //红色
    border: 0px;//无边框
    padding: 0 8px;
    background: white;//背景颜色为白色
}
QPushButton#pushButton_2 //针对第二个按钮的更改
{
    border: 1px solid red; //1像素的红色边框
	border-radius: 10px; //10像素的圆角处理
}
QPushButton#pushButton_3 //针对第三个按钮的设置
{
	border: 2px solid gray;  //2像素的灰色外框
	border-radius: 10px;//10像素的圆角
	padding: 0 8px;
	background: yellow;//背景颜色为黄色
}

通配符的使用

统配符可以忽略掉类型，让整个界面符合同一个样式。

*//此处添加通配符的样式，从而更改整个页面的风格。
{
 background: qradialgradient(cx: 0.3, cy: -0.4, fx: 0.3, 
 fy: -0.4, radius: 1.35, stop: 0 #fff, stop: 1 #888);
 color: rgb(255, 255, 255);
 border: 1px solid #ffffff;
}
QPushButton
{
 color: red;
 border: 0px;
 padding: 0 8px;
 background: white;
}
QPushButton#pushButton_2
{
 border: 1px solid red;
 border-radius: 10px;
}
QPushButton#pushButton_3
{
 border: 2px solid gray;
 border-radius: 10px;
 padding: 0 8px;
 background: yellow;
}