需求：

顶部导航栏有若干选项，可能很多，顶部区域不能完全展示，比如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_OBJECT

public:
    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 < buttonText.size(); ++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");

}