QT中Qpushbutton所有QSS样式模板

最新推荐文章于 2025-05-10 14:22:13 发布

留思难

最新推荐文章于 2025-05-10 14:22:13 发布

阅读量1.4k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： QT 文章标签： qt 前端开发语言

本文链接：https://blog.csdn.net/qq_41707090/article/details/136366307

QT 专栏收录该内容

6 篇文章

订阅专栏

本文详细解释了如何在Qt中使用CSS样本来定制QPushButton的外观，包括文字颜色、背景色、边框、鼠标悬停和按下效果，以及禁用状态和设置图标的方法，以及一个复合样式的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础样式

QPushButton {
    color: white; /* 文字颜色 */
    background-color: #5c93fe; /* 背景色 */
    border-style: solid; /* 边框样式 */
    border-width: 2px; /* 边框宽度 */
    border-radius: 10px; /* 边框圆角 */
    border-color: #1c7cd6; /* 边框颜色 */
    padding: 5px; /* 内边距 */
}

解释：这段代码定义了一个具有白色文字、蓝色背景、实心边框、圆角边框和内边距的按钮样式。

鼠标悬停样式

QPushButton:hover {
    background-color: #1c7cd6; /* 鼠标悬停时的背景色 */
    border-color: #5c93fe; /* 鼠标悬停时的边框颜色 */
}

解释：当鼠标悬停在按钮上时，背景色和边框颜色会变化，增强用户的交互体验。

鼠标按下样式

QPushButton:pressed {
    background-color: #555555; /* 鼠标按下时的背景色 */
    border-color: #333333; /* 鼠标按下时的边框颜色 */
}

解释：定义了按钮在被按下时的背景色和边框颜色，通常会比正常状态更暗，以给用户视觉反馈。

禁用状态样式

QPushButton:disabled {
    background-color: #cccccc; /* 禁用状态的背景色 */
    border-color: #aaaaaa; /* 禁用状态的边框颜色 */
    color: #666666; /* 禁用状态的文字颜色 */
}

解释：当按钮被禁用时（不可点击），改变其样式，使其看起来不那么显眼，通常是通过灰化颜色实现的。

设置图标

QPushButton {
    qproperty-icon: url(:/path/to/icon.png); /* 设置按钮图标 */
    qproperty-iconSize: 20px 20px; /* 设置图标大小 */
}

解释：为按钮设置图标和图标大小。qproperty-icon设置图标的路径，qproperty-iconSize定义图标的宽度和高度。

背景图样式

QPushButton {
    background-image: url(:/path/to/background.png); /* 设置背景图 */
    background-repeat: no-repeat; /* 背景图不重复 */
    background-position: center; /* 背景图居中显示 */
}

解释：设置按钮的背景图，不重复并居中显示。这对于创建具有特定图案或标志的按钮很有用。

复合样式示例

QPushButton#myButton {
    color: white;
    background-color: #5c93fe;
    border: 2px solid #1c7cd6;
    border-radius: 10px;
    padding: 5px;
}

QPushButton#myButton:hover {
    background-color: #1c7cd6;
}

QPushButton#myButton:pressed {
    background-color: #555555;
}