QLabel中加入其他控件

今天有个需求，需要做一个类似QQ在线离线显示的图标，如下图

在线

本以为可以分分钟搞定，结果发现在UI设计界面无法将其他控件拖入到QLabel中。
特此记录一下解决方案，希望可以帮助到其他和我一样遇到此问题的同学。

方法一

在文本编辑器中修改*.ui文件

• 在UI设计器拖入两个QLabel
• 右键*.ui文件->用...打开->普通文本编辑器，直接修改ui文件
  
  将图中选中部分剪切到另一个label中

如下所示：

<widget class="QWidget" name="centralWidget">
   <widget class="QLabel" name="label">
    <property name="geometry">
     <rect>
      <x>50</x>
      <y>60</y>
      <width>50</width>
      <height>50</height>
     </rect>
    </property>
    <property name="text">
     <string>TextLabel</string>
    </property>
    <widget class="QLabel" name="label_2">
     <property name="geometry">
      <rect>
       <x>140</x>
       <y>90</y>
       <width>16</width>
       <height>16</height>
      </rect>
     </property>
     <property name="text">
      <string>TextLabel</string>
     </property>
    </widget>
   </widget>
  </widget>

• 在UI设计器中打开ui文件，你会发现其中一个label已经放入另一个label中了

  
  image.png
• 最后只需在UI设计器中根据自己的需求修改大小和位置即可

方法二

在代码中实现控件的布局

QLabel *pHead = new QLabel(this);
QLabel *pStatus = new QLabel();
QVBoxLayout *pVBLayout = new QVBoxLayout();
QHBoxLayout *pHBLayout = new QHBoxLayout();

pHBLayout->addStretch();                //添加可伸缩项
pHBLayout->addWidget(pStatus);
pHBLayout->setMargin(0);

pVBLayout->addStretch();
pVBLayout->addLayout(pHBLayout);
pVBLayout->setMargin(0);
pHead->setLayout(pVBLayout);

pHead->setFixedSize(50, 50);          //头像大小可根据实际需求修改
pStatus->setFixedSize(16, 16);        //状态大小可根据实际需求修改
pHead->setStyleSheet("background: red; border-radius: 8px;");    //圆角大小可根据实际需求修改
pStatus->setStyleSheet("background: blue; border-radius: 8px;"); //圆角大小可根据实际需求修改

效果图如下： 效果图