跳转到内容

NScrollBar 滚动条

介绍

滚动条用于在有限的显示区域内浏览大量内容。NScrollBar 基于 Qt 的 QScrollBar,提供了现代化的外观、平滑的动画和丰富的自定义选项。

基本用法

cpp
// 创建滚动条
NScrollBar* scrollBar = new NScrollBar(Qt::Horizontal);

// 设置范围
scrollBar->setRange(0, 100);

// 设置当前值
scrollBar->setValue(50);

// 监听值变化
connect(scrollBar, &QScrollBar::valueChanged, [](int value) {
    qDebug() << "滚动条值:" << value;
});

水平滚动条

cpp
// 创建水平滚动条
NScrollBar* hScrollBar = new NScrollBar(Qt::Horizontal);
hScrollBar->setRange(0, 1000);
hScrollBar->setPageStep(100);

// 监听值变化
connect(hScrollBar, &QScrollBar::valueChanged, [](int value) {
    qDebug() << "水平滚动:" << value;
});

竖直滚动条

cpp
// 创建竖直滚动条
NScrollBar* vScrollBar = new NScrollBar(Qt::Vertical);
vScrollBar->setRange(0, 1000);
vScrollBar->setPageStep(100);

// 监听值变化
connect(vScrollBar, &QScrollBar::valueChanged, [](int value) {
    qDebug() << "竖直滚动:" << value;
});

替换现有滚动条

cpp
// 创建文本编辑器
NTextEdit* textEdit = new NTextEdit();

// 获取原始滚动条
QScrollBar* originalScrollBar = textEdit->verticalScrollBar();

// 创建新的 NScrollBar 替换
NScrollBar* nativeScrollBar = new NScrollBar(originalScrollBar, textEdit);

// 新的滚动条会自动替换原始滚动条

自定义样式

cpp
// 创建滚动条
NScrollBar* scrollBar = new NScrollBar(Qt::Vertical);

// 设置滑块厚度
scrollBar->setThumbThickness(12);
scrollBar->setThumbNormalThickness(8);

// 设置轨道厚度
scrollBar->setTrackThickness(12);

// 设置圆角
scrollBar->setThumbCornerRadius(6);
scrollBar->setTrackCornerRadius(6);

// 自定义颜色
scrollBar->setLightTrackColor(QColor(240, 240, 240));
scrollBar->setLightThumbColor(QColor(200, 200, 200));
scrollBar->setLightThumbHoverColor(QColor(150, 150, 150));
scrollBar->setLightThumbPressColor(QColor(100, 100, 100));

scrollBar->setDarkTrackColor(QColor(50, 50, 50));
scrollBar->setDarkThumbColor(QColor(100, 100, 100));
scrollBar->setDarkThumbHoverColor(QColor(150, 150, 150));
scrollBar->setDarkThumbPressColor(QColor(200, 200, 200));

// 设置范围
scrollBar->setRange(0, 1000);

在滚动区域中使用

cpp
// 创建滚动区域
NScrollArea* scrollArea = new NScrollArea();

// 创建内容
QWidget* content = new QWidget();
QVBoxLayout* layout = new QVBoxLayout(content);

// 添加大量内容
for (int i = 0; i < 100; ++i) {
    layout->addWidget(new QLabel(QString("项目 %1").arg(i + 1)));
}

layout->addStretch();
scrollArea->setWidget(content);

// 获取滚动条
NScrollBar* vScrollBar = qobject_cast<NScrollBar*>(scrollArea->verticalScrollBar());
if (vScrollBar) {
    // 自定义滚动条样式
    vScrollBar->setThumbThickness(12);
}

滚动条事件

cpp
// 创建滚动条
NScrollBar* scrollBar = new NScrollBar(Qt::Vertical);
scrollBar->setRange(0, 1000);

// 监听值变化
connect(scrollBar, &QScrollBar::valueChanged, [](int value) {
    qDebug() << "值已改变:" << value;
});

// 监听滑块按下
connect(scrollBar, &QScrollBar::sliderPressed, [](int value) {
    qDebug() << "滑块已按下";
});

// 监听滑块释放
connect(scrollBar, &QScrollBar::sliderReleased, [](int value) {
    qDebug() << "滑块已释放";
});

// 监听范围变化
connect(scrollBar, &QScrollBar::rangeChanged, [](int min, int max) {
    qDebug() << "范围已改变:" << min << "-" << max;
});

平滑滚动

cpp
// 创建滚动条
NScrollBar* scrollBar = new NScrollBar(Qt::Vertical);
scrollBar->setRange(0, 1000);

// 平滑滚动到指定位置
void smoothScroll(NScrollBar* scrollBar, int targetValue) {
    QPropertyAnimation* animation = new QPropertyAnimation(scrollBar, "value");
    animation->setDuration(300);
    animation->setEndValue(targetValue);
    animation->setEasingCurve(QEasingCurve::InOutQuad);
    animation->start(QAbstractAnimation::DeleteWhenDone);
}

// 使用平滑滚动
smoothScroll(scrollBar, 500);

禁用状态

cpp
// 创建滚动条
NScrollBar* scrollBar = new NScrollBar(Qt::Vertical);
scrollBar->setRange(0, 1000);

// 禁用滚动条
scrollBar->setEnabled(false);

// 自定义禁用状态颜色
scrollBar->setLightDisabledTrackColor(QColor(245, 245, 245));
scrollBar->setLightDisabledThumbColor(QColor(220, 220, 220));
scrollBar->setDarkDisabledTrackColor(QColor(40, 40, 40));
scrollBar->setDarkDisabledThumbColor(QColor(60, 60, 60));

箭头按钮颜色

cpp
// 创建滚动条
NScrollBar* scrollBar = new NScrollBar(Qt::Vertical);

// 自定义箭头颜色
scrollBar->setLightArrowColor(QColor(100, 100, 100));
scrollBar->setLightArrowHoverColor(QColor(50, 50, 50));
scrollBar->setLightArrowPressColor(QColor(0, 0, 0));

scrollBar->setDarkArrowColor(QColor(150, 150, 150));
scrollBar->setDarkArrowHoverColor(QColor(200, 200, 200));
scrollBar->setDarkArrowPressColor(QColor(255, 255, 255));

scrollBar->setRange(0, 1000);

范围动画完成

cpp
// 创建滚动条
NScrollBar* scrollBar = new NScrollBar(Qt::Vertical);
scrollBar->setRange(0, 1000);

// 监听范围动画完成
connect(scrollBar, &NScrollBar::rangeAnimationFinished, [](int value) {
    qDebug() << "范围动画已完成";
});

API

构造函数

构造函数说明
NScrollBar(QWidget* parent = nullptr)创建水平滚动条
NScrollBar(Qt::Orientation orientation, QWidget* parent = nullptr)创建指定方向的滚动条
NScrollBar(QScrollBar* originScrollBar, QAbstractScrollArea* parent = nullptr)替换现有滚动条

样式属性

属性说明类型
thumbThickness滑块厚度(悬停时)int
thumbNormalThickness滑块正常厚度int
trackThickness轨道厚度int
thumbCornerRadius滑块圆角半径int
trackCornerRadius轨道圆角半径int

颜色属性

属性说明类型
lightTrackColor明亮主题轨道色QColor
darkTrackColor暗黑主题轨道色QColor
lightThumbColor明亮主题滑块色QColor
darkThumbColor暗黑主题滑块色QColor
lightThumbHoverColor明亮主题滑块悬停色QColor
darkThumbHoverColor暗黑主题滑块悬停色QColor
lightThumbPressColor明亮主题滑块按下色QColor
darkThumbPressColor暗黑主题滑块按下色QColor
lightArrowColor明亮主题箭头色QColor
darkArrowColor暗黑主题箭头色QColor
lightArrowHoverColor明亮主题箭头悬停色QColor
darkArrowHoverColor暗黑主题箭头悬停色QColor
lightArrowPressColor明亮主题箭头按下色QColor
darkArrowPressColor暗黑主题箭头按下色QColor

继承的 API

NScrollBar 继承自 QScrollBar,支持所有标准 QScrollBar 的方法:

  • setRange() / range() - 设置/获取范围
  • setValue() / value() - 设置/获取当前值
  • setPageStep() / pageStep() - 设置/获取页面步长
  • setSingleStep() / singleStep() - 设置/获取单步长
  • valueChanged() - 值改变信号
  • sliderPressed() / sliderReleased() - 滑块按下/释放信号

信号

信号说明参数
rangeAnimationFinished()范围动画已完成-

主题定制

滚动条会自动响应应用主题变化,支持明亮和暗黑主题的自动切换。

基于 LGPL-3.0 许可发布