Qt第六十六章：展示数据的标签

苍穹之跃2023-10-23 17:27

目录

一、效果图

二、qtDesigner

①拖出一个frame作为组容器并贴上背景样式

②拖出主要的三个控件：frame、line、frame、label*2

③固定大小并设置字体、布局一下

④拷贝三份并水平布局一下

⑤设置样式

⑥调整布局

三、ui文件

四、代码

一、效果图

二、qtDesigner

①拖出一个frame作为组容器并贴上背景样式
css 复制代码 
# 整体样式
QFrame#frame{
background-color: rgb(238, 242, 255);
border:2px solid rgb(255, 255, 255);
border-radius:15px;
}
②拖出主要的三个控件：frame、line、frame、label*2
③固定大小并设置字体、布局一下
css 复制代码 
# 标题字体
color: rgba(255, 255, 255,210);
padding-left:12px;
font: 700 italic 16pt "Segoe UI";

# 内容字体
color: rgb(255, 255, 255);
font: 17pt "Microsoft YaHei UI";
④拷贝三份并水平布局一下
⑤设置样式
css 复制代码 
# 标题一样式
QFrame#frame_2{
color: rgb(255, 255, 255);
border-radius: 15px;
background-color: qradialgradient(cx:0, cy:0, radius:1, fx:0.1, fy:0.1, stop:0 rgb(162, 129, 247),  stop:1 rgb(119, 111, 252));
border: 1px outset rgb(98, 91, 213);
}

# 标题二样式
QFrame#frame_5{
color: rgb(255, 255, 255);
border-radius: 15px;
background-color: qradialgradient(cx:0, cy:0, radius:1, fx:0.1, fy:0.1, stop:0 rgb(253, 139, 133),  stop:1 rgb(248, 194, 152));
border: 1px outset rgb(252, 194, 149)
}

# 标题三样式
QFrame#frame_16{
color: rgb(255, 255, 255);
border-radius: 15px;
background-color: qradialgradient(cx:0, cy:0, radius:1, fx:0.1, fy:0.1, stop:0 rgb(243, 175, 189),  stop:1 rgb(155, 118, 218));
border: 1px outset rgb(153, 117, 219)
}

# 标题四样式
QFrame#frame_19{
color: rgb(255, 255, 255);
border-radius: 15px;
background-color: qradialgradient(cx:0, cy:0, radius:1, fx:0.1, fy:0.1, stop:0 rgb(66, 226, 192),  stop:1 rgb(62, 154, 193));
border: 1px outset rgb(72, 158, 204)
}
⑥调整布局

三、ui文件

XML 复制代码 
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>750</width>
    <height>295</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <layout class="QHBoxLayout" name="horizontalLayout_2">
   <item>
    <widget class="QFrame" name="frame">
     <property name="styleSheet">
      <string notr="true">QFrame#frame{
background-color: rgb(238, 242, 255);
border:2px solid rgb(255, 255, 255);
border-radius:15px;
}</string>
     </property>
     <property name="frameShape">
      <enum>QFrame::StyledPanel</enum>
     </property>
     <property name="frameShadow">
      <enum>QFrame::Raised</enum>
     </property>
     <layout class="QHBoxLayout" name="horizontalLayout">
      <item>
       <widget class="QFrame" name="frame_2">
        <property name="minimumSize">
         <size>
          <width>160</width>
          <height>110</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
          <width>160</width>
          <height>110</height>
         </size>
        </property>
        <property name="styleSheet">
         <string notr="true">QFrame#frame_2{
color: rgb(255, 255, 255);
border-radius: 15px;
background-color: qradialgradient(cx:0, cy:0, radius:1, fx:0.1, fy:0.1, stop:0 rgb(162, 129, 247),  stop:1 rgb(119, 111, 252));
border: 1px outset rgb(98, 91, 213);
}</string>
        </property>
        <property name="frameShape">
         <enum>QFrame::StyledPanel</enum>
        </property>
        <property name="frameShadow">
         <enum>QFrame::Raised</enum>
        </property>
        <layout class="QVBoxLayout" name="verticalLayout">
         <item>
          <widget class="QFrame" name="frame_3">
           <property name="frameShape">
            <enum>QFrame::StyledPanel</enum>
           </property>
           <property name="frameShadow">
            <enum>QFrame::Raised</enum>
           </property>
           <layout class="QHBoxLayout" name="horizontalLayout_7">
            <item>
             <widget class="QLabel" name="label">
              <property name="styleSheet">
               <string notr="true">color: rgba(255, 255, 255,210);
padding-left:12px;
font: 700 italic 16pt &quot;Segoe UI&quot;;
</string>
              </property>
              <property name="text">
               <string>TextLabel</string>
              </property>
             </widget>
            </item>
           </layout>
          </widget>
         </item>
         <item>
          <widget class="Line" name="line">
           <property name="orientation">
            <enum>Qt::Horizontal</enum>
           </property>
          </widget>
         </item>
         <item>
          <widget class="QFrame" name="frame_4">
           <property name="frameShape">
            <enum>QFrame::StyledPanel</enum>
           </property>
           <property name="frameShadow">
            <enum>QFrame::Raised</enum>
           </property>
           <layout class="QHBoxLayout" name="horizontalLayout_8">
            <item>
             <widget class="QLabel" name="label_2">
              <property name="styleSheet">
               <string notr="true">color: rgb(255, 255, 255);
font: 17pt &quot;Microsoft YaHei UI&quot;;
</string>
              </property>
              <property name="text">
               <string>TextLabel</string>
              </property>
             </widget>
            </item>
           </layout>
          </widget>
         </item>
        </layout>
       </widget>
      </item>
      <item>
       <widget class="QFrame" name="frame_5">
        <property name="minimumSize">
         <size>
          <width>160</width>
          <height>110</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
          <width>160</width>
          <height>110</height>
         </size>
        </property>
        <property name="styleSheet">
         <string notr="true">QFrame#frame_5{
color: rgb(255, 255, 255);
border-radius: 15px;
background-color: qradialgradient(cx:0, cy:0, radius:1, fx:0.1, fy:0.1, stop:0 rgb(253, 139, 133),  stop:1 rgb(248, 194, 152));
border: 1px outset rgb(252, 194, 149)
}</string>
        </property>
        <property name="frameShape">
         <enum>QFrame::StyledPanel</enum>
        </property>
        <property name="frameShadow">
         <enum>QFrame::Raised</enum>
        </property>
        <layout class="QVBoxLayout" name="verticalLayout_6">
         <item>
          <widget class="QFrame" name="frame_10">
           <property name="frameShape">
            <enum>QFrame::StyledPanel</enum>
           </property>
           <property name="frameShadow">
            <enum>QFrame::Raised</enum>
           </property>
           <layout class="QHBoxLayout" name="horizontalLayout_9">
            <item>
             <widget class="QLabel" name="label_11">
              <property name="styleSheet">
               <string notr="true">color: rgba(255, 255, 255,210);
padding-left:12px;
font: 700 italic 16pt &quot;Segoe UI&quot;;
</string>
              </property>
              <property name="text">
               <string>TextLabel</string>
              </property>
             </widget>
            </item>
           </layout>
          </widget>
         </item>
         <item>
          <widget class="Line" name="line_6">
           <property name="orientation">
            <enum>Qt::Horizontal</enum>
           </property>
          </widget>
         </item>
         <item>
          <widget class="QFrame" name="frame_13">
           <property name="frameShape">
            <enum>QFrame::StyledPanel</enum>
           </property>
           <property name="frameShadow">
            <enum>QFrame::Raised</enum>
           </property>
           <layout class="QHBoxLayout" name="horizontalLayout_10">
            <item>
             <widget class="QLabel" name="label_12">
              <property name="styleSheet">
               <string notr="true">color: rgb(255, 255, 255);
font: 17pt &quot;Microsoft YaHei UI&quot;;
</string>
              </property>
              <property name="text">
               <string>TextLabel</string>
              </property>
             </widget>
            </item>
           </layout>
          </widget>
         </item>
        </layout>
       </widget>
      </item>
      <item>
       <widget class="QFrame" name="frame_16">
        <property name="minimumSize">
         <size>
          <width>160</width>
          <height>110</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
          <width>160</width>
          <height>110</height>
         </size>
        </property>
        <property name="styleSheet">
         <string notr="true">QFrame#frame_16{
color: rgb(255, 255, 255);
border-radius: 15px;
background-color: qradialgradient(cx:0, cy:0, radius:1, fx:0.1, fy:0.1, stop:0 rgb(243, 175, 189),  stop:1 rgb(155, 118, 218));
border: 1px outset rgb(153, 117, 219)
}</string>
        </property>
        <property name="frameShape">
         <enum>QFrame::StyledPanel</enum>
        </property>
        <property name="frameShadow">
         <enum>QFrame::Raised</enum>
        </property>
        <layout class="QVBoxLayout" name="verticalLayout_7">
         <item>
          <widget class="QFrame" name="frame_17">
           <property name="frameShape">
            <enum>QFrame::StyledPanel</enum>
           </property>
           <property name="frameShadow">
            <enum>QFrame::Raised</enum>
           </property>
           <layout class="QHBoxLayout" name="horizontalLayout_3">
            <item>
             <widget class="QLabel" name="label_13">
              <property name="styleSheet">
               <string notr="true">color: rgba(255, 255, 255,210);
padding-left:12px;
font: 700 italic 16pt &quot;Segoe UI&quot;;
</string>
              </property>
              <property name="text">
               <string>TextLabel</string>
              </property>
             </widget>
            </item>
           </layout>
          </widget>
         </item>
         <item>
          <widget class="Line" name="line_7">
           <property name="orientation">
            <enum>Qt::Horizontal</enum>
           </property>
          </widget>
         </item>
         <item>
          <widget class="QFrame" name="frame_18">
           <property name="frameShape">
            <enum>QFrame::StyledPanel</enum>
           </property>
           <property name="frameShadow">
            <enum>QFrame::Raised</enum>
           </property>
           <layout class="QHBoxLayout" name="horizontalLayout_4">
            <item>
             <widget class="QLabel" name="label_14">
              <property name="styleSheet">
               <string notr="true">color: rgb(255, 255, 255);
font: 17pt &quot;Microsoft YaHei UI&quot;;
</string>
              </property>
              <property name="text">
               <string>TextLabel</string>
              </property>
             </widget>
            </item>
           </layout>
          </widget>
         </item>
        </layout>
       </widget>
      </item>
      <item>
       <widget class="QFrame" name="frame_19">
        <property name="minimumSize">
         <size>
          <width>160</width>
          <height>110</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
          <width>160</width>
          <height>110</height>
         </size>
        </property>
        <property name="styleSheet">
         <string notr="true">QFrame#frame_19{
color: rgb(255, 255, 255);
border-radius: 15px;
background-color: qradialgradient(cx:0, cy:0, radius:1, fx:0.1, fy:0.1, stop:0 rgb(66, 226, 192),  stop:1 rgb(62, 154, 193));
border: 1px outset rgb(72, 158, 204)
}
</string>
        </property>
        <property name="frameShape">
         <enum>QFrame::StyledPanel</enum>
        </property>
        <property name="frameShadow">
         <enum>QFrame::Raised</enum>
        </property>
        <layout class="QVBoxLayout" name="verticalLayout_8">
         <item>
          <widget class="QFrame" name="frame_20">
           <property name="frameShape">
            <enum>QFrame::StyledPanel</enum>
           </property>
           <property name="frameShadow">
            <enum>QFrame::Raised</enum>
           </property>
           <layout class="QHBoxLayout" name="horizontalLayout_5">
            <item>
             <widget class="QLabel" name="label_15">
              <property name="styleSheet">
               <string notr="true">color: rgba(255, 255, 255,210);
padding-left:12px;
font: 700 italic 16pt &quot;Segoe UI&quot;;
</string>
              </property>
              <property name="text">
               <string>TextLabel</string>
              </property>
             </widget>
            </item>
           </layout>
          </widget>
         </item>
         <item>
          <widget class="Line" name="line_8">
           <property name="orientation">
            <enum>Qt::Horizontal</enum>
           </property>
          </widget>
         </item>
         <item>
          <widget class="QFrame" name="frame_21">
           <property name="frameShape">
            <enum>QFrame::StyledPanel</enum>
           </property>
           <property name="frameShadow">
            <enum>QFrame::Raised</enum>
           </property>
           <layout class="QHBoxLayout" name="horizontalLayout_6">
            <item>
             <widget class="QLabel" name="label_16">
              <property name="styleSheet">
               <string notr="true">color: rgb(255, 255, 255);
font: 17pt &quot;Microsoft YaHei UI&quot;;
</string>
              </property>
              <property name="text">
               <string>TextLabel</string>
              </property>
             </widget>
            </item>
           </layout>
          </widget>
         </item>
        </layout>
       </widget>
      </item>
     </layout>
    </widget>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

四、代码

使用uic工具将ui文件转成py文件

python 复制代码 
import sys

from PySide6.QtGui import QColor
from PySide6.QtWidgets import *

from zzz.ui_home_3 import Ui_Form


# 继承UI类
class MainWindow(QWidget, Ui_Form):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)
        self.shadow_style(self.frame_2, QColor(162, 129, 247))
        self.shadow_style(self.frame_5, QColor(251, 157, 139))
        self.shadow_style(self.frame_16, QColor(170, 128, 213))
        self.shadow_style(self.frame_19, QColor(64, 186, 193))

    # 添加阴影
    def shadow_style(self, widget, Color):
        shadow = QGraphicsDropShadowEffect(self)
        shadow.setOffset(8, 8)  # offset
        shadow.setBlurRadius(38)  # shadow radius
        shadow.setColor(Color)  # shadow color
        widget.setGraphicsEffect(shadow)


if __name__ == '__main__':
    app = QApplication(sys.argv)

    window = MainWindow()
    window.show()

    sys.exit(app.exec())
相关推荐
用余生去守护1 小时前
python报错系列(16)--pyinstaller ????????
开发语言·python
数据小爬虫@1 小时前
利用Python爬虫快速获取商品历史价格信息
开发语言·爬虫·python
向宇it1 小时前
【从零开始入门unity游戏开发之——C#篇25】C#面向对象动态多态——virtual、override 和 base 关键字、抽象类和抽象方法
java·开发语言·unity·c#·游戏引擎
2401_857600951 小时前
SSM 与 Vue 共筑电脑测评系统：精准洞察电脑世界
前端·javascript·vue.js
2401_857600951 小时前
数字时代的医疗挂号变革：SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL1 小时前
vue入门教程：组件透传 Attributes
前端·javascript·vue.js
小白学大数据1 小时前
如何使用Selenium处理JavaScript动态加载的内容？
大数据·javascript·爬虫·selenium·测试工具
莫名其妙小饼干1 小时前
网上球鞋竞拍系统｜Java｜SSM｜VUE｜ 前后端分离
java·开发语言·maven·mssql
2402_857583491 小时前
基于 SSM 框架的 Vue 电脑测评系统：照亮电脑品质之路
前端·javascript·vue.js
十年一梦实验室1 小时前
【C++】sophus : sim_details.hpp 实现了矩阵函数 W、其导数，以及其逆 (十七)
开发语言·c++·线性代数·矩阵
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）