QPushButton 按下 悬停 简约的qss样式表
时间: 2023-12-14 18:40:21 浏览: 38
以下是一个简单的 QPushButton 的 QSS 样式表,包括按下和悬停状态:
```css
QPushButton {
border: none;
background-color: #F5F5F5;
color: #333333;
padding: 8px 16px;
font-size: 14px;
font-weight: bold;
border-radius: 4px;
outline: none;
}
QPushButton:hover {
background-color: #E0E0E0;
}
QPushButton:pressed {
background-color: #CCCCCC;
}
```
解释一下:
- `border: none;`:去掉边框;
- `background-color: #F5F5F5;`:设置背景色;
- `color: #333333;`:设置文本颜色;
- `padding: 8px 16px;`:设置内边距;
- `font-size: 14px;`:设置字体大小;
- `font-weight: bold;`:设置字体加粗;
- `border-radius: 4px;`:设置圆角;
- `outline: none;`:去掉聚焦时的虚线框。
`QPushButton:hover` 表示鼠标悬停状态下的样式,`QPushButton:pressed` 表示按钮按下状态下的样式。可以根据实际需要进行调整。
相关问题
超详细的qss样式表入门demo
QSS是Qt样式表,可以用来设置Qt应用程序的外观和感觉,并且使得Qt应用程序可以根据不同的操作系统自动适应。在这篇教程中,我们将通过详细的入门示例了解如何使用QSS。
首先,在Qt Creator中创建一个新的Qt Widgets应用程序项目。这将为您提供一个简单的窗口,您可以在其中编辑代码。
示例1:基础样式
首先,让我们尝试应用简单的样式表:
```css
QWidget {
background-color: blue;
color: white;
}
```
这将在应用程序中的所有QWidget中应用蓝色背景和白色前景色。不同于原生样式下的灰色背景色。
示例2:更改按钮样式
我们可以用上述方法来更改按钮的颜色:
```css
QPushButton {
background-color: red;
border: 2px solid darkred;
border-radius: 10px;
color: white;
}
```
这将为所有按钮设置红色背景色,深红色的2像素宽边框,以及10像素圆角。我们还将设置文字颜色为白色。
示例3:更改鼠标悬停样式
我们可以在原有样式的基础上增加鼠标滑过时的效果:
```css
QPushButton:hover {
background-color: darkred;
}
```
这将使鼠标滑过按钮时的背景色从红色变为深红色。
示例4:更改被选中的样式
我们还可以改变按下按钮后的效果:
```css
QPushButton:pressed {
background-color: darkblue;
border: 2px solid blue;
}
```
这将在按下按钮时更改按钮的背景颜色以及边框颜色。
示例5:更改组件的尺寸和位置
我们可以通过设置width,height,position和top,left等属性来控制组件的尺寸和位置:
```css
QPushButton {
width: 100px;
height: 50px;
position: absolute;
top: 100px;
left: 100px;
}
```
这将在应用程序中的所有QPushButton中设置宽为100像素,高为50像素,并将其位置设置为100像素顶部和左侧。
示例6:更改QLineEdit中的文本输入
我们还可以改变QLineEdit中的字体和背景颜色。默认情况下,QLineEdit使用应用程序的原声窗口背景色(白色),但可以使用QPalette使其与其他颜色匹配。
```css
QLineEdit {
background-color: darkgray;
border: 2px solid lightgray;
border-radius: 10px;
color: white;
font-size: 16px;
}
```
这将为所有QLineEdit设置深灰色背景和浅灰色的2像素宽边框,并将其边角设置为10像素圆角。我们还将设为文本颜色为白色和字体大小为16像素。
总结:
以上是一个简单又不失详细的QSS样式表入门demo。当然,还可以做得更丰富和复杂,完全可以通过自行探索进一步地优化自己的应用程序样式!
QSS QPushButton 样式美化
QPushButton 是 Qt 中的一个常用控件,可以用于实现按钮的功能。对于 QPushButton 的样式美化,可以通过设置样式表来实现。
下面是一个简单的 QPushButton 样式表示例:
```css
QPushButton {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
QPushButton:hover {
background-color: #3e8e41;
}
QPushButton:pressed {
background-color: #2e6b2e;
}
```
这个样式表设置了 QPushButton 的背景色、边框、文字颜色、内边距、对齐方式、字体大小等属性,同时对鼠标悬停和按下状态也进行了样式设置。
使用方法:
```python
button = QPushButton("Click me")
button.setStyleSheet("QPushButton { background-color: #4CAF50; color: white; }")
```
上述代码将设置 QPushButton 的背景色为绿色,文字颜色为白色。
更多 QPushButton 样式美化的方法和技巧,可以参考 Qt 的官方文档:https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qpushbutton
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)