Roson讲Qt #11 QSlider(滑块)

浅浅的花香味﹌ 2022-09-07 12:08 253阅读 0赞

# 1.什么是QSlider #

QSlider小部件提供一个垂直或水平滑块。

滑块是控制有界值的经典小部件。它允许用户沿着水平或垂直槽移动滑块手柄，并将手柄的位置转换为合法范围内的整数值。  
    QSlider有很少的自己的功能;大部分功能都在QAbstractSlider中。最有用的函数是setValue()直接将滑块设置为某个值;triggerAction()来模拟点击的效果(对于快捷键很有用);setSingleStep()， setPageStep()设置步骤;和setMinimum()和setMaximum()来定义滚动条的范围。  
    QSlider提供了控制标记的方法。您可以使用setTickPosition()来指示您想要标记的位置，setTickInterval()来指示您想要多少个标记。当前设置的tick位置和时间间隔可以分别使用tickPosition()和tickInterval()函数查询。  
    QSlider继承了一套全面的信号:

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:bottom;width:88pt;">Signal</td> 
 <td style="vertical-align:bottom;">Description</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">valueChanged()</td> 
 <td style="vertical-align:bottom;">当滑块的值改变时触发。跟踪()确定是否在用户交互期间发出此信号。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">sliderPressed()</td> 
 <td style="vertical-align:bottom;">当用户开始拖动滑块时触发。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">sliderMoved()</td> 
 <td style="vertical-align:bottom;">当用户拖动滑块时触发。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">sliderReleased()</td> 
 <td style="vertical-align:bottom;">当用户释放滑块时触发。</td> 
 </tr> 
 </tbody> 
</table>

QSlider只提供整数范围。注意，虽然QSlider处理非常大的数字，但用户很难准确地使用滑块用于非常大的范围。  
    Tab键可以切换焦点到此控件上，并且鼠标和键盘都能控制滑块移动:

*      向左/向右键——移动水平滑块一步。
 *      向上/向下键——移动一个垂直滑块单步。
 *      PageUp键——向上移动一页。
 *      PageDown键——向下移动一页。
 *      Home键——移动到开始(最小)。
 *      End键——移动到末尾(最大值)。

# 2.QSlider使用 #

## 2.1 设置滑动条方向（水平或者垂直） ##

ui.horizontalSlider->setOrientation(Qt::Vertical);
        ui.horizontalSlider->setFixedSize(20,200);

![20210823113851850.png][]

## 2.2 设置刻度线位置 ##

<table style="width:461pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:bottom;width:128pt;">Constant</td> 
 <td style="vertical-align:bottom;width:65pt;">Value</td> 
 <td style="vertical-align:bottom;width:268pt;">Description</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">QSlider::NoTicks</td> 
 <td style="text-align:left;vertical-align:bottom;">0</td> 
 <td style="vertical-align:bottom;">不要画任何刻度线。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">QSlider::TicksBothSides</td> 
 <td style="text-align:left;vertical-align:bottom;">3</td> 
 <td style="vertical-align:bottom;">在槽的两边画上刻度线</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">QSlider::TicksAbove</td> 
 <td style="text-align:left;vertical-align:bottom;">1</td> 
 <td style="vertical-align:bottom;">在(水平)滑块上方画刻度线</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">QSlider::TicksBelow</td> 
 <td style="text-align:left;vertical-align:bottom;">2</td> 
 <td style="vertical-align:bottom;">在(水平)滑块下面画刻度线</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">QSlider::TicksLeft</td> 
 <td style="text-align:left;vertical-align:bottom;">TicksAbove</td> 
 <td style="vertical-align:bottom;">在(垂直的)滑块的左边画刻度线</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">QSlider::TicksRight</td> 
 <td style="text-align:left;vertical-align:bottom;">TicksBelow</td> 
 <td style="vertical-align:bottom;">在(垂直的)滑块的右边画刻度线</td> 
 </tr> 
 </tbody> 
</table>

在滑块下面画刻度线

ui.horizontalSlider->setTickPosition(QSlider::TicksBelow);

![2021082311404697.png][]

在滑块上面和下面同时画刻度线

ui.horizontalSlider->setTickPosition(QSlider::QSlider::TicksBothSides);

![20210823114156180.png][]

## 2.3 设置刻度线间隔 ##

默认总长度为100，设置刻度间隔为20之后，会分成5个区间，每个区间占20.

ui.horizontalSlider->setTickPosition(QSlider::TicksBelow);
        ui.horizontalSlider->setTickInterval(20);

![20210823114304200.png][]

## 2.4 设置滑块的位置 ##

ui.horizontalSlider->setTickPosition(QSlider::TicksBelow);
        ui.horizontalSlider->setTickInterval(20);
        ui.horizontalSlider->setValue(50);

![20210823114430861.png][]

## 2.5 获取滑块的位置 ##

ui.horizontalSlider->value();

[20210823113851850.png]: /images/20220829/05ab14771719465189b1a16c2f1c39af.png
[2021082311404697.png]: /images/20220829/e6ee009809694bff9a5e6538f350ae6d.png
[20210823114156180.png]: /images/20220829/ef76323da1194bb3b990aa3af5b2684f.png
[20210823114304200.png]: /images/20220829/411a8e27a24b476c911b2c52345fc39f.png
[20210823114430861.png]: /images/20220829/1809414afc6846e5bd524475863c147c.png