简述
在网上也看到大佬们实现过这样的效果,然后自己也想想封装了一套。下划线带动画效果。
封装类包括:
1.设置按钮位置,分东南西北方向
void setButtonPosition(int position);
2.下划线颜色
void setButtonColor(QColor color);
3.下划线的高度
void setLineHeight(int lineHeight);
效果图
代码篇
CusButtonGroup::CusButtonGroup(QWidget *parent)
: QWidget(parent)
, m_btnPosition(0)
, m_curIndex(0)
, m_preIndex(0)
, m_offset(0)
, m_lineHeight(2)
, m_lineColor(QColor(21, 156, 119))
{
ui.setupUi(this);
setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
m_btnGroup = new QButtonGroup(this);
connect(m_btnGroup, SIGNAL(buttonClicked(int)), SLOT(onbuttonClicked(int)));
m_animation = new QPropertyAnimation(this, "");
m_animation->setDuration(200);
connect(m_animation, SIGNAL(valueChanged(QVariant)), SLOT(onvalueChanged(QVariant)));
//默认在上边
setButtonPosition(CusButtonGroup::North);
}
CusButtonGroup::~CusButtonGroup()
{
}
void CusButtonGroup::onvalueChanged(QVariant variant)
{
m_offset = variant.toInt();
update();
}
void CusButtonGroup::setLineHeight(int lineHeight)
{
m_lineHeight = lineHeight;
}
void CusButtonGroup::paintEvent(QPaintEvent *event)
{
QWidget::paintEvent(event);
QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing);
painter.setPen(Qt::NoPen);
painter.setBrush(m_lineColor);
if (m_btnPosition == CusButtonGroup::North)
{
painter.drawRect(m_offset, 0, m_btnSize.width(), m_lineHeight);
}
else if (m_btnPosition == CusButtonGroup::South)
{
painter.drawRect(m_offset, this->height() - m_lineHeight, m_btnSize.width(), m_lineHeight);
}
else if (m_btnPosition == CusButtonGroup::West)
{
painter.drawRect(0, m_offset, m_lineHeight, m_btnSize.height());
}
else if (m_btnPosition == CusButtonGroup::East)
{
painter.drawRect(this->width() - m_lineHeight, m_offset, m_lineHeight, m_btnSize.height());
}
}
void CusButtonGroup::setButtonPosition(int position)
{
deleteLayout();
m_btnPosition = position;
if (position == CusButtonGroup::North)
{
QHBoxLayout* layout = new QHBoxLayout(this);
layout->setContentsMargins(0, m_lineHeight, 0, 0);
layout->setSpacing(0);
setLayout(layout);
}
else if (position == CusButtonGroup::South)
{
QHBoxLayout* layout = new QHBoxLayout(this);
layout->setContentsMargins(0, 0, 0, m_lineHeight);
layout->setSpacing(0);
setLayout(layout);
}
else if (position == CusButtonGroup::West)
{
QVBoxLayout* layout = new QVBoxLayout(this);
layout->setContentsMargins(m_lineHeight, 0, 0, 0);
layout->setSpacing(0);
setLayout(layout);
}
else if (position == CusButtonGroup::East)
{
QVBoxLayout* layout = new QVBoxLayout(this);
layout->setContentsMargins(0, 0, m_lineHeight, 0);
layout->setSpacing(0);
setLayout(layout);
}
else
{
Q_ASSERT(false && "no match position!");
}
}
void CusButtonGroup::addButton(QPushButton* btn, int id)
{
m_btnGroup->addButton(btn, id);
m_buttonLst.append(btn);
layout()->addWidget(btn);
m_btnSize = btn->size();
QString style = QString("QPushButton{background-color:#ffffff;border:none;}"
"QPushButton:hover{background-color:rgba(%1, %2, %3, 40);}"
"QPushButton:pressed, QPushButton:checked{background-color:rgba(%1, %2, %3, 80);}").arg(m_lineColor.red()).arg(m_lineColor.green()).arg(m_lineColor.blue());
btn->setStyleSheet(style);
}
void CusButtonGroup::setButtonColor(QColor color)
{
m_lineColor = color;
}
void CusButtonGroup::onbuttonClicked(int index)
{
m_btnGroup->button(index)->setChecked(true);
m_preIndex = m_curIndex;
m_curIndex = index;
if (m_btnPosition == CusButtonGroup::North || m_btnPosition == CusButtonGroup::South)
{
m_animation->setStartValue(m_preIndex * m_btnSize.width());
m_animation->setEndValue(index * m_btnSize.width());
}
else if (m_btnPosition == CusButtonGroup::West || m_btnPosition == CusButtonGroup::East)
{
m_animation->setStartValue(m_preIndex * m_btnSize.height());
m_animation->setEndValue(index * m_btnSize.height());
}
m_animation->start();
}
void CusButtonGroup::deleteLayout()
{
//清除布局,包括布局内控件
if (this->layout() != nullptr)
{
QLayoutItem *child;
while ((child = this->layout()->takeAt(0)) != 0) {
delete child->widget();
delete child;
child = nullptr;
}
m_buttonLst.clear();
delete this->layout();
this->setLayout(nullptr);
}
}
封装类的用法例子
//下划线高度默认2像素,颜色也是默认,位置默认在北方
CusButtonGroup w4;
//设置下划线颜色
w4.setButtonColor(QColor(255, 163, 69));
//设置下划线高度
w4.setLineHeight(4);
//设置下划线高度
w4.setButtonPosition(CusButtonGroup::East);
for (int index = 0; index < 6; ++index)
{
QPushButton *btn = new QPushButton;
btn->setCheckable(true);
btn->setText(QString("Button_%1").arg(index));
btn->setFixedSize(80,32);
w4.addButton(btn, index);
}
工程文件
Qt交流大会 853086607 免费群中
结尾
不定期上传新作品,解答群中作品相关问题。相关外,能解答则解答。欢迎大家一起探索Qt世界!
网友评论