---
title: "Python Qt 界面样式设计经验"
author: "Perrin Yong"
author_profile: https://www.pystone.net/profile/
published_by: "Perrin Yong"
canonical: https://www.pystone.net/notes/python-qt-ui-styling/
type: note
content_role: unspecified
visibility: public
id_stability: rename-stable
source_path: "10-计算机、信息技术与工程/04-应用开发与云端工程/桌面应用开发/Python Qt 界面样式设计经验.md"
content_hash: c4366b545a537c1bc2618b3f6d3fd9f7b7e18483dc454e36b17c766554989628
knowledge_version: 224c990773de.5fa8af6e39fa
site_commit: 224c990773de166d23a886306577dd90379529ce
notes_commit: 5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a
---
# Python Qt 界面样式设计经验
从设计师的设计图到QT的按钮
![assets/image-20240313122424997.png](/media/5213748f18de771cc94e.png)

方法一：动态配置。通过StyleSheet配置，包括icon、text的大小和位置、背景色、边框，使配置的结果尽可能于目标一致
优点：很好的灵活性，你可以调整按钮的每个细节，并且能够很容易地通过修改StyleSheet来更改样式
问题：需要编写较多的CSS代码，并且可能在不同平台上表现略有不同
做法：
```css
QPushButton {
    color: white; /* 文本颜色 */
    font: bold 14px; /* 文本字体大小和粗细 */
    icon-size: 24px 24px; /* icon大小 */
    text-align: left; /* 文本左对齐 */
    padding-left: 32px; /* 图标和文本的间距 */
    border-radius: 5px; /* 边框圆角 */
    background-color: rgb(0, 160, 110); /* 背景颜色 */
}

```


方法二：接将按钮的设计图包括文字在内，制作成图片，QPushButton完全显示该图片的内容
优点：允许设计师提供完全定制的外观，并且保证了在所有平台上的一致性
问题：会损失文本的动态性，如果按钮文本需要动态更改或支持国际化
做法：
```css
QPushButton {
    border: none; /* 无边框 */
    background-image: url('path/to/your/image.png'); /* 设置背景图 */
    background-color: transparent; /* 透明背景色 */
    text-align: center; /* 文本居中 */
    /* 注意: 如果图片中已经包含了文本，这里就不需要设置text了 */
}

```