{
  "schemaVersion": "0.11.0",
  "canonical": "https://www.pystone.net/notes/python-qt-ui-styling/",
  "atlas": "https://www.pystone.net/?node=python-qt-ui-styling#knowledge-atlas",
  "markdown": "https://www.pystone.net/notes/python-qt-ui-styling.md",
  "context": "https://www.pystone.net/notes/python-qt-ui-styling.context.json",
  "knowledgeVersion": "224c990773de.5fa8af6e39fa",
  "build": {
    "siteCommit": "224c990773de166d23a886306577dd90379529ce",
    "notesCommit": "5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a",
    "builtAt": "1970-01-01T00:00:00.000Z",
    "version": "224c990773de.5fa8af6e39fa"
  },
  "id": "note:python-qt-ui-styling",
  "slug": "python-qt-ui-styling",
  "title": "Python Qt 界面样式设计经验",
  "type": "note",
  "visibility": "public",
  "idStability": "rename-stable",
  "author": {
    "name": "Perrin Yong",
    "profile": "https://www.pystone.net/profile/"
  },
  "publisher": {
    "name": "Perrin Yong",
    "profile": "https://www.pystone.net/profile/"
  },
  "aliases": [],
  "summary": "Python Qt 界面样式设计经验 从设计师的设计图到QT的按钮 ![](assets/image 20240313122424997.png)",
  "contentRole": "unspecified",
  "isMoc": false,
  "mocRecognition": "none",
  "generated": false,
  "attribution": "unspecified",
  "domain": "10-计算机、信息技术与工程",
  "tags": [],
  "mocs": [],
  "contentHash": "c4366b545a537c1bc2618b3f6d3fd9f7b7e18483dc454e36b17c766554989628",
  "assets": [
    {
      "reference": "assets/image-20240313122424997.png",
      "url": "/media/5213748f18de771cc94e.png",
      "mediaType": "image/png",
      "contentHash": "5213748f18de771cc94e3b554f8a2f7ecfe0505504ca7044c464cca875b64d4f",
      "byteLength": 4279,
      "width": 291,
      "height": 72
    }
  ],
  "headings": [
    {
      "depth": 1,
      "text": "Python Qt 界面样式设计经验",
      "anchor": "python-qt-界面样式设计经验",
      "citation": "https://www.pystone.net/notes/python-qt-ui-styling/#python-qt-%E7%95%8C%E9%9D%A2%E6%A0%B7%E5%BC%8F%E8%AE%BE%E8%AE%A1%E7%BB%8F%E9%AA%8C"
    }
  ],
  "claims": [],
  "outgoing": [],
  "incoming": [
    {
      "id": "note:application-and-cloud-engineering",
      "title": "应用开发与云端工程",
      "url": "https://www.pystone.net/notes/application-and-cloud-engineering/",
      "atlas": "https://www.pystone.net/?node=application-and-cloud-engineering#knowledge-atlas",
      "label": "应用开发与云端工程",
      "origin": "explicit",
      "humanReviewed": true,
      "context": "桌面应用开发中的“Python Qt 界面样式设计经验”导航项",
      "citation": "https://www.pystone.net/notes/application-and-cloud-engineering/#%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91"
    }
  ],
  "contentMarkdown": "# Python Qt 界面样式设计经验\n从设计师的设计图到QT的按钮\n![](assets/image-20240313122424997.png)\n\n方法一：动态配置。通过StyleSheet配置，包括icon、text的大小和位置、背景色、边框，使配置的结果尽可能于目标一致\n优点：很好的灵活性，你可以调整按钮的每个细节，并且能够很容易地通过修改StyleSheet来更改样式\n问题：需要编写较多的CSS代码，并且可能在不同平台上表现略有不同\n做法：\n```css\nQPushButton {\n    color: white; /* 文本颜色 */\n    font: bold 14px; /* 文本字体大小和粗细 */\n    icon-size: 24px 24px; /* icon大小 */\n    text-align: left; /* 文本左对齐 */\n    padding-left: 32px; /* 图标和文本的间距 */\n    border-radius: 5px; /* 边框圆角 */\n    background-color: rgb(0, 160, 110); /* 背景颜色 */\n}\n\n```\n\n\n方法二：接将按钮的设计图包括文字在内，制作成图片，QPushButton完全显示该图片的内容\n优点：允许设计师提供完全定制的外观，并且保证了在所有平台上的一致性\n问题：会损失文本的动态性，如果按钮文本需要动态更改或支持国际化\n做法：\n```css\nQPushButton {\n    border: none; /* 无边框 */\n    background-image: url('path/to/your/image.png'); /* 设置背景图 */\n    background-color: transparent; /* 透明背景色 */\n    text-align: center; /* 文本居中 */\n    /* 注意: 如果图片中已经包含了文本，这里就不需要设置text了 */\n}\n\n```\n"
}