当前位置：首页 > news >正文

【Qt】实现顶部导航栏自适应滑动效果

news 来源：原创 2024/9/20 18:32:55

需求：

顶部导航栏有若干选项，可能很多，顶部区域不能完全展示，比如10个选项，界面一次只能展示五个，那么要求把后面的选项隐藏起来，并且，当点击第四个第五个按钮的时候，自动滑动到中间位置，后面的也滑动出来。
看下效果图
在这里插入图片描述

分析

这里面有几个点：

顶部导航栏的按钮会很多，要求能够正常隐藏那些显示不了的按钮
顶部导航栏的按钮宽度要自适应，也就是根据按钮中的文字宽度来调整按钮宽度
点击按钮实现滑动效果，注意，靠两边的按钮不滑动（比如第一个、第二个本身就应该靠边，无法滑动）
滑动效果要流畅

实现方式

#pragma once#include <QtWidgets/QWidget>
#include "ui_topnavbar.h"
#include <QHBoxLayout>
#include <QPushButton>
#include <QScrollArea>
#include <QScrollBar>
#include <QLabel>
#include <QScroller>
#include <QDebug>
#include <QList>
#include <QFontMetrics>
#include <QFont>
#include <QFile>
#include <QPropertyAnimation>class TopNavBar : public QWidget
{Q_OBJECTpublic:TopNavBar(QWidget *parent = nullptr);~TopNavBar();private:void scrollToButton(QPushButton* button);// 导航栏滑动void slotTopButtonSmoothScroll(QPushButton* button); // 导航栏平滑滑动void slotButtonClicked(bool clicked);void createText(QList<QString>& buttonText);void slotTestButtonClicked(bool clicked);void loadStyleSheet();QList<QString> buttonText;QScrollArea* _scrollArea;QList<QPushButton*> _topButtons;// QPushButton* testButton = nullptr;QLabel* iconLabel;QLabel* textLabel;
};

#include "topnavbar.h"
#include <QStyle>TopNavBar::TopNavBar(QWidget *parent): QWidget(parent)
{this->setMinimumHeight(500);this->setMinimumWidth(800);loadStyleSheet();createText(buttonText);// 创建一个滚动区域_scrollArea = new QScrollArea(this);_scrollArea->setWidgetResizable(true);// 内部控件自动填充滚动区域_scrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);// 关闭垂直滚动条显示_scrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);// 关闭水平滚动条显示_scrollArea->setFixedHeight(40);// 固定高度_scrollArea->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Minimum);// 扩展策略QHBoxLayout* layoutButton = new QHBoxLayout;layoutButton->setSpacing(0);layoutButton->setContentsMargins(0, 0, 0, 0);// 创建一个容器用于放置按钮QWidget* buttonContainer = new QWidget(_scrollArea);buttonContainer->setLayout(layoutButton);// 循环创建按钮并添加到布局中for (int i = 0; i < 30; ++i) {QPushButton* pbutton = new QPushButton(buttonText[i], buttonContainer);// 通过样式文件 控制button中文字与边界的边距pbutton->setStyleSheet("background:rgb(225,225,225);margin: 0px;padding: 10px 24px;");// 宽度自适应  按钮宽度最小为128 要求内部文字上下边距为10px  左右边距为24px// 如果内部文字过长 则根据内部文字宽度 自适应调整按钮宽度// 获取按钮的字体QFont font = pbutton->font();// 创建 QFontMetrics 对象QFontMetrics metrics(font);// 测量文本的宽度int textWidth = metrics.horizontalAdvance(pbutton->text());// 打印文本宽度qDebug() << "Text width in pixels:" << textWidth;int buttonWidth = textWidth + 48 > 128 ? textWidth + 48 : 128;pbutton->setMinimumWidth(buttonWidth);QSizePolicy sizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);sizePolicy.setHorizontalStretch(0);sizePolicy.setVerticalStretch(0);pbutton->setSizePolicy(sizePolicy);// 高度扩展pbutton->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);// 添加布局layoutButton->addWidget(pbutton);// 加入按钮列表_topButtons.push_back(pbutton);// 连接信号槽，当按钮被点击时，滚动到该按钮的位置connect(pbutton, &QPushButton::clicked, [this, pbutton]() {slotTopButtonSmoothScroll(pbutton);});// 当按钮被点击后 切换其样式 并设置其他未被选择的按钮的样式connect(pbutton, &QPushButton::clicked, this, &TopNavBar::slotButtonClicked);}// 将容器设置为滚动区域的子窗口_scrollArea->setWidget(buttonContainer);QLabel* testLabel = new QLabel;testLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);// 垂直布局QVBoxLayout* layout = new QVBoxLayout;layout->addWidget(_scrollArea);layout->addWidget(testLabel);this->setLayout(layout);
}
TopNavBar::~TopNavBar()
{}
// 没加动画  直接移动
void TopNavBar::scrollToButton(QPushButton* button) {// 计算滚动条应该滚动到的位置int scrollPosition = button->pos().x() - (_scrollArea->width() - button->width()) / 2;// qDebug() << "scrollPosition:" << scrollPosition;if (scrollPosition < 0){scrollPosition = 0;}QScrollBar* scrollBar = _scrollArea->horizontalScrollBar();scrollBar->setValue(scrollPosition);
}
// 加了动画 平滑滑动
void TopNavBar::slotTopButtonSmoothScroll(QPushButton* button) {int scrollPosition = button->pos().x() - (_scrollArea->width() - button->width()) / 2;QScrollBar* scrollBarH = _scrollArea->horizontalScrollBar();qDebug() << "----------------------------------" ;qDebug() << "button->pos().x():" << button->pos().x();qDebug() << "scrollArea->width():" << _scrollArea->width();qDebug() << "button->width():" << button->width();qDebug() << "scrollBarH->minimum():" << scrollBarH->minimum();qDebug() << "scrollBarH->maximum():" << scrollBarH->maximum();scrollPosition = qBound(scrollBarH->minimum(), scrollPosition, scrollBarH->maximum());QPropertyAnimation* smoothAnimation = new QPropertyAnimation(scrollBarH, "value");smoothAnimation->setDuration(300); // 设置动画持续时间smoothAnimation->setStartValue(scrollBarH->value());smoothAnimation->setEndValue(scrollPosition);smoothAnimation->start();// 启动动画
}
void TopNavBar::slotButtonClicked(bool clicked)
{QPushButton* pButton = dynamic_cast<QPushButton*>(sender());if (!pButton){return;}for (auto button : _topButtons){if (button == pButton){button->setStyleSheet("background:gray;margin: 0px;padding: 10px 24px;");}else{button->setStyleSheet("background:rgb(225,225,225);margin: 0px;padding: 10px 24px;");}}
}
void TopNavBar::createText(QList<QString>& buttonText)
{buttonText.push_back("Factory Reset Factory Reset");buttonText.push_back("Update");buttonText.push_back("Projects");buttonText.push_back("L");buttonText.push_back("AC Back");buttonText.push_back("Fan Mode");}