这里先直接放出最终效果图,单位是嵌在编辑框里的
原理
直接在QLineEdit中加入布局,这个布局会覆盖在输入界面的上边,这样的话我们就可以加入一个按钮,标签等,然后按钮文字调整距离,即可达到带前,后单位的效果
这里直接放出代码:
直接添加类
.h
#pragma once
#include <QLineEdit>
#include <QPushButton>
class UnitQLineEdit : public QLineEdit
{
Q_OBJECT
public:
UnitQLineEdit(QWidget* parent = Q_NULLPTR);
~UnitQLineEdit();
//获取编辑框单位
QString UnitText()const;
//设置编辑框单位
void SetUnitText(const QString& unitText);
private:
QPushButton* m_unitButton = nullptr;//单位文本按钮
};
.cpp
#include "UnitQLineEdit.h"
#include <QLayout>
#include <QStyle>
UnitQLineEdit::UnitQLineEdit(QWidget* parent): QLineEdit(parent)
{
m_unitButton = new QPushButton;
//单位按钮扁平无边框
m_unitButton->setStyleSheet("border-style:solid;color: rgba(77, 155, 213, 1);");
m_unitButton->setFlat(true);
//单位加入布局
QBoxLayout* layout = new QBoxLayout(QBoxLayout::LeftToRight);
layout->addStretch();
layout->setSpacing(0);
//单位按钮的Margins
layout->setContentsMargins(0, 0, 13, 0);
layout->addWidget(m_unitButton);
this->setLayout(layout);
}
UnitQLineEdit::~UnitQLineEdit()
{
}
QString UnitQLineEdit::UnitText() const
{
return this->m_unitButton->text();
}
void UnitQLineEdit::SetUnitText(const QString& unitText)
{
if (unitText.isEmpty() || this->m_unitButton->text() == unitText)
{
return;
}
m_unitButton->setFont(this->font());
this->m_unitButton->setText(unitText);
// this->m_unitButton->setVisible(true);
int width = this->fontMetrics().width(m_unitButton->text());
m_unitButton->setFixedWidth(width);
//到单位开头了就往下显示,防止往后输入的内容有一部分在按钮下面
QBoxLayout* layout = (QBoxLayout*)this->layout();
QMargins margins = layout->contentsMargins();
setTextMargins(margins.left(), margins.top(), width + margins.right(), margins.bottom());
}
代码中只需注意文字末尾要设置成单位文字宽度+右侧间隔即可,这样文字过长也不会跑到单位下面重叠显示
然后界拖入一个编辑框,直接提升成这个类即可
我们只需要在界面里设置样式,即可美化成上面的最终效果
然后每个需要用单位的编辑框,直接提升成该类即可