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

    目录

    一、效果图

    二、qtDesigner

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

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

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

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

    ⑤设置样式

    ⑥调整布局

    三、ui文件

    四、代码

     

    一、效果图

    二、qtDesigner

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

    1. # 整体样式
    2. QFrame#frame{
    3. background-color: rgb(238, 242, 255);
    4. border:2px solid rgb(255, 255, 255);
    5. border-radius:15px;
    6. }
    ②拖出主要的三个控件：frame、line、frame、label*2

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

    1. # 标题字体
    2. color: rgba(255, 255, 255,210);
    3. padding-left:12px;
    4. font: 700 italic 16pt "Segoe UI";
    5.  
    6. # 内容字体
    7. color: rgb(255, 255, 255);
    8. font: 17pt "Microsoft YaHei UI";
     ④拷贝三份并水平布局一下

    ⑤设置样式

     

    1. # 标题一样式
    2. QFrame#frame_2{
    3. color: rgb(255, 255, 255);
    4. border-radius: 15px;
    5. 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));
    6. border: 1px outset rgb(98, 91, 213);
    7. }
    8.  
    9. # 标题二样式
    10. QFrame#frame_5{
    11. color: rgb(255, 255, 255);
    12. border-radius: 15px;
    13. 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));
    14. border: 1px outset rgb(252, 194, 149)
    15. }
    16.  
    17. # 标题三样式
    18. QFrame#frame_16{
    19. color: rgb(255, 255, 255);
    20. border-radius: 15px;
    21. 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));
    22. border: 1px outset rgb(153, 117, 219)
    23. }
    24.  
    25. # 标题四样式
    26. QFrame#frame_19{
    27. color: rgb(255, 255, 255);
    28. border-radius: 15px;
    29. 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));
    30. border: 1px outset rgb(72, 158, 204)
    31. }

     

    ⑥调整布局

     

    三、ui文件

    1. "1.0" encoding="UTF-8"?>
    2. <ui version="4.0">
    3.  <class>Formclass>
    4.  <widget class="QWidget" name="Form">
    5.   <property name="geometry">
    6.    <rect>
    7.     <x>0x>
    8.     <y>0y>
    9.     <width>750width>
    10.     <height>295height>
    11.    rect>
    12.   property>
    13.   <property name="windowTitle">
    14.    <string>Formstring>
    15.   property>
    16.   <layout class="QHBoxLayout" name="horizontalLayout_2">
    17.    <item>
    18.     <widget class="QFrame" name="frame">
    19.      <property name="styleSheet">
    20.       <string notr="true">QFrame#frame{
    21. background-color: rgb(238, 242, 255);
    22. border:2px solid rgb(255, 255, 255);
    23. border-radius:15px;
    24. }string>
    25.      property>
    26.      <property name="frameShape">
    27.       <enum>QFrame::StyledPanelenum>
    28.      property>
    29.      <property name="frameShadow">
    30.       <enum>QFrame::Raisedenum>
    31.      property>
    32.      <layout class="QHBoxLayout" name="horizontalLayout">
    33.       <item>
    34.        <widget class="QFrame" name="frame_2">
    35.         <property name="minimumSize">
    36.          <size>
    37.           <width>160width>
    38.           <height>110height>
    39.          size>
    40.         property>
    41.         <property name="maximumSize">
    42.          <size>
    43.           <width>160width>
    44.           <height>110height>
    45.          size>
    46.         property>
    47.         <property name="styleSheet">
    48.          <string notr="true">QFrame#frame_2{
    49. color: rgb(255, 255, 255);
    50. border-radius: 15px;
    51. 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));
    52. border: 1px outset rgb(98, 91, 213);
    53. }string>
    54.         property>
    55.         <property name="frameShape">
    56.          <enum>QFrame::StyledPanelenum>
    57.         property>
    58.         <property name="frameShadow">
    59.          <enum>QFrame::Raisedenum>
    60.         property>
    61.         <layout class="QVBoxLayout" name="verticalLayout">
    62.          <item>
    63.           <widget class="QFrame" name="frame_3">
    64.            <property name="frameShape">
    65.             <enum>QFrame::StyledPanelenum>
    66.            property>
    67.            <property name="frameShadow">
    68.             <enum>QFrame::Raisedenum>
    69.            property>
    70.            <layout class="QHBoxLayout" name="horizontalLayout_7">
    71.             <item>
    72.              <widget class="QLabel" name="label">
    73.               <property name="styleSheet">
    74.                <string notr="true">color: rgba(255, 255, 255,210);
    75. padding-left:12px;
    76. font: 700 italic 16pt "Segoe UI";
    77. string>
    78.               property>
    79.               <property name="text">
    80.                <string>TextLabelstring>
    81.               property>
    82.              widget>
    83.             item>
    84.            layout>
    85.           widget>
    86.          item>
    87.          <item>
    88.           <widget class="Line" name="line">
    89.            <property name="orientation">
    90.             <enum>Qt::Horizontalenum>
    91.            property>
    92.           widget>
    93.          item>
    94.          <item>
    95.           <widget class="QFrame" name="frame_4">
    96.            <property name="frameShape">
    97.             <enum>QFrame::StyledPanelenum>
    98.            property>
    99.            <property name="frameShadow">
    100.             <enum>QFrame::Raisedenum>
    101.            property>
    102.            <layout class="QHBoxLayout" name="horizontalLayout_8">
    103.             <item>
    104.              <widget class="QLabel" name="label_2">
    105.               <property name="styleSheet">
    106.                <string notr="true">color: rgb(255, 255, 255);
    107. font: 17pt "Microsoft YaHei UI";
    108. string>
    109.               property>
    110.               <property name="text">
    111.                <string>TextLabelstring>
    112.               property>
    113.              widget>
    114.             item>
    115.            layout>
    116.           widget>
    117.          item>
    118.         layout>
    119.        widget>
    120.       item>
    121.       <item>
    122.        <widget class="QFrame" name="frame_5">
    123.         <property name="minimumSize">
    124.          <size>
    125.           <width>160width>
    126.           <height>110height>
    127.          size>
    128.         property>
    129.         <property name="maximumSize">
    130.          <size>
    131.           <width>160width>
    132.           <height>110height>
    133.          size>
    134.         property>
    135.         <property name="styleSheet">
    136.          <string notr="true">QFrame#frame_5{
    137. color: rgb(255, 255, 255);
    138. border-radius: 15px;
    139. 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));
    140. border: 1px outset rgb(252, 194, 149)
    141. }string>
    142.         property>
    143.         <property name="frameShape">
    144.          <enum>QFrame::StyledPanelenum>
    145.         property>
    146.         <property name="frameShadow">
    147.          <enum>QFrame::Raisedenum>
    148.         property>
    149.         <layout class="QVBoxLayout" name="verticalLayout_6">
    150.          <item>
    151.           <widget class="QFrame" name="frame_10">
    152.            <property name="frameShape">
    153.             <enum>QFrame::StyledPanelenum>
    154.            property>
    155.            <property name="frameShadow">
    156.             <enum>QFrame::Raisedenum>
    157.            property>
    158.            <layout class="QHBoxLayout" name="horizontalLayout_9">
    159.             <item>
    160.              <widget class="QLabel" name="label_11">
    161.               <property name="styleSheet">
    162.                <string notr="true">color: rgba(255, 255, 255,210);
    163. padding-left:12px;
    164. font: 700 italic 16pt "Segoe UI";
    165. string>
    166.               property>
    167.               <property name="text">
    168.                <string>TextLabelstring>
    169.               property>
    170.              widget>
    171.             item>
    172.            layout>
    173.           widget>
    174.          item>
    175.          <item>
    176.           <widget class="Line" name="line_6">
    177.            <property name="orientation">
    178.             <enum>Qt::Horizontalenum>
    179.            property>
    180.           widget>
    181.          item>
    182.          <item>
    183.           <widget class="QFrame" name="frame_13">
    184.            <property name="frameShape">
    185.             <enum>QFrame::StyledPanelenum>
    186.            property>
    187.            <property name="frameShadow">
    188.             <enum>QFrame::Raisedenum>
    189.            property>
    190.            <layout class="QHBoxLayout" name="horizontalLayout_10">
    191.             <item>
    192.              <widget class="QLabel" name="label_12">
    193.               <property name="styleSheet">
    194.                <string notr="true">color: rgb(255, 255, 255);
    195. font: 17pt "Microsoft YaHei UI";
    196. string>
    197.               property>
    198.               <property name="text">
    199.                <string>TextLabelstring>
    200.               property>
    201.              widget>
    202.             item>
    203.            layout>
    204.           widget>
    205.          item>
    206.         layout>
    207.        widget>
    208.       item>
    209.       <item>
    210.        <widget class="QFrame" name="frame_16">
    211.         <property name="minimumSize">
    212.          <size>
    213.           <width>160width>
    214.           <height>110height>
    215.          size>
    216.         property>
    217.         <property name="maximumSize">
    218.          <size>
    219.           <width>160width>
    220.           <height>110height>
    221.          size>
    222.         property>
    223.         <property name="styleSheet">
    224.          <string notr="true">QFrame#frame_16{
    225. color: rgb(255, 255, 255);
    226. border-radius: 15px;
    227. 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));
    228. border: 1px outset rgb(153, 117, 219)
    229. }string>
    230.         property>
    231.         <property name="frameShape">
    232.          <enum>QFrame::StyledPanelenum>
    233.         property>
    234.         <property name="frameShadow">
    235.          <enum>QFrame::Raisedenum>
    236.         property>
    237.         <layout class="QVBoxLayout" name="verticalLayout_7">
    238.          <item>
    239.           <widget class="QFrame" name="frame_17">
    240.            <property name="frameShape">
    241.             <enum>QFrame::StyledPanelenum>
    242.            property>
    243.            <property name="frameShadow">
    244.             <enum>QFrame::Raisedenum>
    245.            property>
    246.            <layout class="QHBoxLayout" name="horizontalLayout_3">
    247.             <item>
    248.              <widget class="QLabel" name="label_13">
    249.               <property name="styleSheet">
    250.                <string notr="true">color: rgba(255, 255, 255,210);
    251. padding-left:12px;
    252. font: 700 italic 16pt "Segoe UI";
    253. string>
    254.               property>
    255.               <property name="text">
    256.                <string>TextLabelstring>
    257.               property>
    258.              widget>
    259.             item>
    260.            layout>
    261.           widget>
    262.          item>
    263.          <item>
    264.           <widget class="Line" name="line_7">
    265.            <property name="orientation">
    266.             <enum>Qt::Horizontalenum>
    267.            property>
    268.           widget>
    269.          item>
    270.          <item>
    271.           <widget class="QFrame" name="frame_18">
    272.            <property name="frameShape">
    273.             <enum>QFrame::StyledPanelenum>
    274.            property>
    275.            <property name="frameShadow">
    276.             <enum>QFrame::Raisedenum>
    277.            property>
    278.            <layout class="QHBoxLayout" name="horizontalLayout_4">
    279.             <item>
    280.              <widget class="QLabel" name="label_14">
    281.               <property name="styleSheet">
    282.                <string notr="true">color: rgb(255, 255, 255);
    283. font: 17pt "Microsoft YaHei UI";
    284. string>
    285.               property>
    286.               <property name="text">
    287.                <string>TextLabelstring>
    288.               property>
    289.              widget>
    290.             item>
    291.            layout>
    292.           widget>
    293.          item>
    294.         layout>
    295.        widget>
    296.       item>
    297.       <item>
    298.        <widget class="QFrame" name="frame_19">
    299.         <property name="minimumSize">
    300.          <size>
    301.           <width>160width>
    302.           <height>110height>
    303.          size>
    304.         property>
    305.         <property name="maximumSize">
    306.          <size>
    307.           <width>160width>
    308.           <height>110height>
    309.          size>
    310.         property>
    311.         <property name="styleSheet">
    312.          <string notr="true">QFrame#frame_19{
    313. color: rgb(255, 255, 255);
    314. border-radius: 15px;
    315. 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));
    316. border: 1px outset rgb(72, 158, 204)
    317. }
    318. string>
    319.         property>
    320.         <property name="frameShape">
    321.          <enum>QFrame::StyledPanelenum>
    322.         property>
    323.         <property name="frameShadow">
    324.          <enum>QFrame::Raisedenum>
    325.         property>
    326.         <layout class="QVBoxLayout" name="verticalLayout_8">
    327.          <item>
    328.           <widget class="QFrame" name="frame_20">
    329.            <property name="frameShape">
    330.             <enum>QFrame::StyledPanelenum>
    331.            property>
    332.            <property name="frameShadow">
    333.             <enum>QFrame::Raisedenum>
    334.            property>
    335.            <layout class="QHBoxLayout" name="horizontalLayout_5">
    336.             <item>
    337.              <widget class="QLabel" name="label_15">
    338.               <property name="styleSheet">
    339.                <string notr="true">color: rgba(255, 255, 255,210);
    340. padding-left:12px;
    341. font: 700 italic 16pt "Segoe UI";
    342. string>
    343.               property>
    344.               <property name="text">
    345.                <string>TextLabelstring>
    346.               property>
    347.              widget>
    348.             item>
    349.            layout>
    350.           widget>
    351.          item>
    352.          <item>
    353.           <widget class="Line" name="line_8">
    354.            <property name="orientation">
    355.             <enum>Qt::Horizontalenum>
    356.            property>
    357.           widget>
    358.          item>
    359.          <item>
    360.           <widget class="QFrame" name="frame_21">
    361.            <property name="frameShape">
    362.             <enum>QFrame::StyledPanelenum>
    363.            property>
    364.            <property name="frameShadow">
    365.             <enum>QFrame::Raisedenum>
    366.            property>
    367.            <layout class="QHBoxLayout" name="horizontalLayout_6">
    368.             <item>
    369.              <widget class="QLabel" name="label_16">
    370.               <property name="styleSheet">
    371.                <string notr="true">color: rgb(255, 255, 255);
    372. font: 17pt "Microsoft YaHei UI";
    373. string>
    374.               property>
    375.               <property name="text">
    376.                <string>TextLabelstring>
    377.               property>
    378.              widget>
    379.             item>
    380.            layout>
    381.           widget>
    382.          item>
    383.         layout>
    384.        widget>
    385.       item>
    386.      layout>
    387.     widget>
    388.    item>
    389.   layout>
    390.  widget>
    391.  <resources/>
    392.  <connections/>
    393. ui>

    四、代码

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

    1. import sys
    2.  
    3. from PySide6.QtGui import QColor
    4. from PySide6.QtWidgets import *
    5.  
    6. from zzz.ui_home_3 import Ui_Form
    7.  
    8.  
    9. # 继承UI类
    10. class MainWindow(QWidget, Ui_Form):
    11.     def __init__(self, parent=None):
    12.         super(MainWindow, self).__init__(parent)
    13.         self.setupUi(self)
    14.         self.shadow_style(self.frame_2, QColor(162, 129, 247))
    15.         self.shadow_style(self.frame_5, QColor(251, 157, 139))
    16.         self.shadow_style(self.frame_16, QColor(170, 128, 213))
    17.         self.shadow_style(self.frame_19, QColor(64, 186, 193))
    18.  
    19.     # 添加阴影
    20.     def shadow_style(self, widget, Color):
    21.         shadow = QGraphicsDropShadowEffect(self)
    22.         shadow.setOffset(8, 8)  # offset
    23.         shadow.setBlurRadius(38)  # shadow radius
    24.         shadow.setColor(Color)  # shadow color
    25.         widget.setGraphicsEffect(shadow)
    26.  
    27.  
    28. if __name__ == '__main__':
    29.     app = QApplication(sys.argv)
    30.  
    31.     window = MainWindow()
    32.     window.show()
    33.  
    34.     sys.exit(app.exec())

  • 相关阅读:
    充分统计量，因子分解定理与Rao-Blackwewll定理
    Android 10.0 Launcher3定制化之folder文件夹去掉背景功能实现
    《信息学奥赛一本通》 , ZJOI2007 tarjan 最大半联通子图
    Blazor前后端框架Known-V1.2.2
    Springboot中国古代史在线学习网站 毕业设计-附源码260839
    解决XshellL/SecureCRT使用rz指令上传文件乱码且文件无法删除的问题
    图像处理：单通道转为3通道
    C++：C++编程语言学习之数学运算&运算符及其优先级的简介、案例应用之详细攻略
    VUE3 ref，props，生命周期
    浏览器插件FeHelper的学习：gulp基础、使用gulp构建项目
  • 原文地址：https://blog.csdn.net/wenxingchen/article/details/133961296