Update button

- add alignment API
- fix generate color function
- fix no alpha in style qss
- add fetch layout API
- bugfix
- adjust default color scheme
This commit is contained in:
Linloir 2022-12-14 15:21:09 +08:00
parent 02f6ec97e6
commit f3b6f1759e
No known key found for this signature in database
GPG Key ID: 58EEB209A0F2C366
2 changed files with 72 additions and 28 deletions

View File

@ -16,18 +16,22 @@ PushButton::~PushButton()
} }
void PushButton::initializeUI() { void PushButton::initializeUI() {
generateColor(_defaultColorScheme);
// Add margin for the child widget // Add margin for the child widget
_stretchLayout = new QHBoxLayout(this); _stretchLayout = new QHBoxLayout(this);
_stretchLayout->setContentsMargins(_contentMargin); _stretchLayout->setContentsMargins(_contentMargin);
_stretchLayout->setSpacing(0); _stretchLayout->setSpacing(0);
_stretchLayout->setAlignment(Qt::AlignCenter);
_stretchLayout->addWidget(_childWidget); _stretchLayout->addWidget(_childWidget);
setLayout(_stretchLayout); setLayout(_stretchLayout);
_childWidget->show();
// Initialize background widget // Initialize background widget
_backgroundWidget = new QWidget(this); _backgroundWidget = new QWidget(this);
_backgroundWidget->resize(size()); _backgroundWidget->resize(size());
_backgroundWidget->setObjectName("backgroundWidget"); _backgroundWidget->setObjectName("backgroundWidget");
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _backgroundColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _backgroundColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
_backgroundWidget->lower(); _backgroundWidget->lower();
_backgroundWidget->show(); _backgroundWidget->show();
@ -52,7 +56,7 @@ void PushButton::initializeUI() {
break; break;
} }
_indicator->setObjectName("indicator"); _indicator->setObjectName("indicator");
_indicator->setStyleSheet("QWidget#indicator{background-color:" + _indicatorColor.name() + ";" _indicator->setStyleSheet("QWidget#indicator{background-color:" + _indicatorColor.name(QColor::HexArgb) + ";"
"border-radius:" + QString::number((float)_indicatorWidth / 2) + "px;}"); "border-radius:" + QString::number((float)_indicatorWidth / 2) + "px;}");
_indicatorEffect = new QGraphicsOpacityEffect(_indicator); _indicatorEffect = new QGraphicsOpacityEffect(_indicator);
_indicatorEffect->setOpacity(0); _indicatorEffect->setOpacity(0);
@ -63,17 +67,21 @@ void PushButton::initializeUI() {
} }
void PushButton::generateColor(QColor colorScheme) { void PushButton::generateColor(QColor colorScheme) {
_backgroundColor = colorScheme.lighter(120);
_backgroundColor.setAlpha(10);
_hoverColor = colorScheme.lighter(120); _hoverColor = colorScheme.lighter(120);
_hoverColor.setAlpha(50); _hoverColor.setAlpha(30);
_pressedColor = colorScheme; _pressedColor = colorScheme.lighter(120);
_pressedColor.setAlpha(100); _pressedColor.setAlpha(35);
_selectedColor = colorScheme.lighter(120); _selectedColor = colorScheme.lighter(120);
_selectedColor.setAlpha(20); _selectedColor.setAlpha(20);
_indicatorColor = colorScheme; _indicatorColor = colorScheme;
} }
void PushButton::enterEvent(QEnterEvent* event) { void PushButton::enterEvent(QEnterEvent* event) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _hoverColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); setCursor(Qt::PointingHandCursor);
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _hoverColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
QParallelAnimationGroup* indicatorEnterAnimation = new QParallelAnimationGroup(this); QParallelAnimationGroup* indicatorEnterAnimation = new QParallelAnimationGroup(this);
QPropertyAnimation* indicatorGrowLength = new QPropertyAnimation(_indicator, "geometry", this); QPropertyAnimation* indicatorGrowLength = new QPropertyAnimation(_indicator, "geometry", this);
@ -124,10 +132,18 @@ void PushButton::enterEvent(QEnterEvent* event) {
indicatorEnterAnimation->start(QAbstractAnimation::DeleteWhenStopped); indicatorEnterAnimation->start(QAbstractAnimation::DeleteWhenStopped);
_hovered = true; _hovered = true;
emit onHover();
} }
void PushButton::leaveEvent(QEvent* event) { void PushButton::leaveEvent(QEvent* event) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _backgroundColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); setCursor(Qt::ArrowCursor);
if (_selected) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _selectedColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
}
else {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _backgroundColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
}
QParallelAnimationGroup* indicatorLeaveAnimation = new QParallelAnimationGroup(this); QParallelAnimationGroup* indicatorLeaveAnimation = new QParallelAnimationGroup(this);
QPropertyAnimation* indicatorShrinkLength = new QPropertyAnimation(_indicator, "geometry", this); QPropertyAnimation* indicatorShrinkLength = new QPropertyAnimation(_indicator, "geometry", this);
@ -182,7 +198,7 @@ void PushButton::leaveEvent(QEvent* event) {
} }
void PushButton::mousePressEvent(QMouseEvent* event) { void PushButton::mousePressEvent(QMouseEvent* event) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _pressedColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _pressedColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
QPropertyAnimation* indicatorShrinkLength = new QPropertyAnimation(_indicator, "geometry", this); QPropertyAnimation* indicatorShrinkLength = new QPropertyAnimation(_indicator, "geometry", this);
indicatorShrinkLength->setDuration(100); indicatorShrinkLength->setDuration(100);
@ -225,6 +241,7 @@ void PushButton::mousePressEvent(QMouseEvent* event) {
indicatorShrinkLength->start(QAbstractAnimation::DeleteWhenStopped); indicatorShrinkLength->start(QAbstractAnimation::DeleteWhenStopped);
_pressed = true; _pressed = true;
emit onPressed();
} }
void PushButton::mouseReleaseEvent(QMouseEvent* event) { void PushButton::mouseReleaseEvent(QMouseEvent* event) {
@ -232,7 +249,7 @@ void PushButton::mouseReleaseEvent(QMouseEvent* event) {
return; return;
} }
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _hoverColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _hoverColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
QPropertyAnimation* indicatorGrowLength = new QPropertyAnimation(_indicator, "geometry", this); QPropertyAnimation* indicatorGrowLength = new QPropertyAnimation(_indicator, "geometry", this);
indicatorGrowLength->setDuration(100); indicatorGrowLength->setDuration(100);
@ -390,7 +407,15 @@ void PushButton::resizeEvent(QResizeEvent* event) {
} }
void PushButton::select() { void PushButton::select() {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _selectedColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); if (_pressed) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _pressedColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
}
else if (_hovered) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _hoverColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
}
else {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _selectedColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
}
// First shrink then length the indicator, also fade in // First shrink then length the indicator, also fade in
QSequentialAnimationGroup* indicatorSelectAnimation = new QSequentialAnimationGroup(this); QSequentialAnimationGroup* indicatorSelectAnimation = new QSequentialAnimationGroup(this);
@ -505,13 +530,13 @@ void PushButton::deselect() {
} }
if (_pressed) { if (_pressed) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _pressedColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _pressedColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
} }
else if (_hovered) { else if (_hovered) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _hoverColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _hoverColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
} }
else { else {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _backgroundColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _backgroundColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
// Cursor is currently not in the button, shrink and fade out the indicator // Cursor is currently not in the button, shrink and fade out the indicator
QParallelAnimationGroup* indicatorDeselectAnimation = new QParallelAnimationGroup(this); QParallelAnimationGroup* indicatorDeselectAnimation = new QParallelAnimationGroup(this);
@ -581,55 +606,63 @@ void PushButton::setRadius(int radius) {
void PushButton::setBackgroundColor(QColor color) { void PushButton::setBackgroundColor(QColor color) {
_backgroundColor = color; _backgroundColor = color;
if (!_selected && !_hovered && !_pressed) { if (!_selected && !_hovered && !_pressed) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _backgroundColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _backgroundColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
} }
} }
void PushButton::setHoverColor(QColor color) { void PushButton::setHoverColor(QColor color) {
_hoverColor = color; _hoverColor = color;
if (_hovered && !_pressed) { if (_hovered && !_pressed) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _hoverColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _hoverColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
} }
} }
void PushButton::setPressedColor(QColor color) { void PushButton::setPressedColor(QColor color) {
_pressedColor = color; _pressedColor = color;
if (_pressed) { if (_pressed) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _pressedColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _pressedColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
} }
} }
void PushButton::setSelectedColor(QColor color) { void PushButton::setSelectedColor(QColor color) {
_selectedColor = color; _selectedColor = color;
if (_selected && !_pressed && !_hovered) { if (_selected && !_pressed && !_hovered) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _selectedColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _selectedColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
} }
} }
void PushButton::setIndicatorColor(QColor color) { void PushButton::setIndicatorColor(QColor color) {
_indicatorColor = color; _indicatorColor = color;
_indicator->setStyleSheet("QWidget#indicator{background-color:" + _indicatorColor.name() + ";" _indicator->setStyleSheet("QWidget#indicator{background-color:" + _indicatorColor.name(QColor::HexArgb) + ";"
"border-radius:" + QString::number((float)_indicatorWidth / 2) + "px;}"); "border-radius:" + QString::number((float)_indicatorWidth / 2) + "px;}");
} }
void PushButton::setColorScheme(QColor color) { void PushButton::setColorScheme(QColor color) {
generateColor(color); generateColor(color);
if (_pressed) { if (_pressed) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _pressedColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _pressedColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
} }
else if (_hovered) { else if (_hovered) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _hoverColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _hoverColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
} }
else if (_selected) { else if (_selected) {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _selectedColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _selectedColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
} }
else { else {
_backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _backgroundColor.name() + ";border-radius:" + QString::number(_radius) + "px;}"); _backgroundWidget->setStyleSheet("QWidget#backgroundWidget{background-color:" + _backgroundColor.name(QColor::HexArgb) + ";border-radius:" + QString::number(_radius) + "px;}");
} }
_indicator->setStyleSheet("QWidget#indicator{background-color:" + _indicatorColor.name() + ";" _indicator->setStyleSheet("QWidget#indicator{background-color:" + _indicatorColor.name(QColor::HexArgb) + ";"
"border-radius:" + QString::number((float)_indicatorWidth / 2) + "px;}"); "border-radius:" + QString::number((float)_indicatorWidth / 2) + "px;}");
} }
QHBoxLayout* PushButton::mainLayout() const {
return _stretchLayout;
}
void PushButton::setAlignment(Qt::Alignment alignment) {
_stretchLayout->setAlignment(alignment);
}
void PushButton::setMargin(QMargins margin) { void PushButton::setMargin(QMargins margin) {
_stretchLayout->setContentsMargins(margin); _stretchLayout->setContentsMargins(margin);
} }
@ -758,4 +791,9 @@ void PushButton::setChildWidget(QWidget* widget) {
_stretchLayout->removeItem(_stretchLayout->itemAt(i)); _stretchLayout->removeItem(_stretchLayout->itemAt(i));
} }
_stretchLayout->addWidget(_childWidget); _stretchLayout->addWidget(_childWidget);
_childWidget->show();
}
bool PushButton::isSelected() const {
return _selected;
} }

View File

@ -26,14 +26,14 @@ private:
// Button Layout // Button Layout
QWidget* _childWidget; QWidget* _childWidget;
QHBoxLayout* _stretchLayout; QHBoxLayout* _stretchLayout;
QMargins _contentMargin = QMargins(10, 10, 10, 10); QMargins _contentMargin = QMargins(12, 12, 12, 12);
// Button ui // Button ui
int _radius = 5; int _radius = 8;
QWidget* _backgroundWidget; QWidget* _backgroundWidget;
const QColor _defaultColorScheme = QColor(255, 255, 255); const QColor _defaultColorScheme = QColor(58, 143, 183);
QColor _backgroundColor = QColor(255, 255, 255, 0); QColor _backgroundColor;
QColor _hoverColor; QColor _hoverColor;
QColor _pressedColor; QColor _pressedColor;
QColor _selectedColor; QColor _selectedColor;
@ -45,7 +45,7 @@ private:
const float _activatedLengthRatio = 0.4; const float _activatedLengthRatio = 0.4;
const float _hoveredLengthRatio = 0.5; const float _hoveredLengthRatio = 0.5;
const float _pressedLengthRatio = 0.2; const float _pressedLengthRatio = 0.2;
QColor _indicatorColor = QColor(0, 0, 0, 0); QColor _indicatorColor;
QGraphicsOpacityEffect* _indicatorEffect; QGraphicsOpacityEffect* _indicatorEffect;
// Button state // Button state
@ -81,6 +81,8 @@ public:
void setIndicatorColor(QColor color); void setIndicatorColor(QColor color);
void setColorScheme(QColor primaryColor); void setColorScheme(QColor primaryColor);
QHBoxLayout* mainLayout() const;
void setAlignment(Qt::Alignment alignment);
void setMargin(QMargins margin); void setMargin(QMargins margin);
void setMargin(int left, int top, int right, int bottom); void setMargin(int left, int top, int right, int bottom);
@ -89,6 +91,10 @@ public:
QWidget* childWidget(); QWidget* childWidget();
void setChildWidget(QWidget* widget); void setChildWidget(QWidget* widget);
bool isSelected() const;
signals: signals:
void onClick(); void onClick();
void onHover();
void onPressed();
}; };