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())
相关推荐
djk88884 分钟前
Layui Table 行号
前端·javascript·layui
007php0076 分钟前
GoZero 上传文件File到阿里云 OSS 报错及优化方案
服务器·开发语言·数据库·python·阿里云·架构·golang
数据小小爬虫7 分钟前
如何利用Java爬虫获得1688店铺详情
java·开发语言
Tech Synapse8 分钟前
Python网络爬虫实践案例：爬取猫眼电影Top100
开发语言·爬虫·python
biomooc19 分钟前
R语言/Rstudio 报错
开发语言·r语言
Theliars24 分钟前
C语言之字符串
c语言·开发语言
Root_Smile26 分钟前
【C++】类和对象
开发语言·c++
痴憨道人26 分钟前
openharmony sdk描述
javascript
Reese_Cool27 分钟前
【数据结构与算法】排序
java·c语言·开发语言·数据结构·c++·算法·排序算法
loey_ln30 分钟前
FIber + webWorker
javascript·react.js
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06RAG 实践- Ollama+RagFlow 部署本地知识库0704 - matlab m_map地学绘图工具基础函数 - 设置网格08Unity中PICO实现 隔空取物 和 接触抓取物体09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10【目标跟踪】相机运动补偿