Qt 是目前最先進、最完整的跨平臺C++開發工具。它不僅完全實現了一次編寫，所有平臺無差別運行，更提供了幾乎所有開發過程中需要用到的工具。如今，Qt已被運用于超過70個行業、數千家企業，支持數百萬設備及應用。

滑動條示例展示了如何使用Qt中可用的不同類型的滑動條：, 和 。

 Qt提供了三種類似滑動條的小部件：QSlider、QScrollBar和QDial，它們都繼承了QAbstractSlider的大部分功能，并且理論上可以在應用程序中相互替換，因為差異只涉及它們的外觀和樣式。這個例子展示了它們是什么樣子的，它們是如何工作的，以及如何通過它們的屬性來操縱它們的操作和外觀。

Qt技術交流群：166830288      歡迎一起進群討論

本示例還演示了如何使用信號和槽來同步兩個或多個小部件的操作，以及如何覆蓋resizeEvent()來實現響應式布局。

Sliders（滑動條）示例包含兩個類：

• SlidersGroup是一個自定義小部件，它結合了一個、一個和一個。
• Window是組合了 和SlidersGroup的主要小部件，QGroupBox包含幾個控件，它們控制類似滑動條控件的操作。

首先我們將回顧 Window 類，然后再看看SlidersGroup類。

Window類定義

class Window : public QWidget
{
Q_OBJECT

public:
Window(QWidget *parent = nullptr);

private:
void createControls(const QString &title);
void resizeEvent(QResizeEvent *e);

SlidersGroup *slidersGroup;

QGroupBox *controlsGroup;
QLabel *minimumLabel;
QLabel *maximumLabel;
QLabel *valueLabel;
QCheckBox *invertedAppearance;
QCheckBox *invertedKeyBindings;
QSpinBox *minimumSpinBox;
QSpinBox *maximumSpinBox;
QSpinBox *valueSpinBox;
QBoxLayout *layout;
};

Window類繼承自，它顯示滑塊小部件，并允許用戶設置它們的最小值、最大值和當前值，并自定義它們的外觀、鍵綁定和方向。我們使用一個私有的createcontrol()函數來創建提供這些控制機制的小部件，并將它們連接到滑塊小部件。

Window類實現

Window::Window(QWidget *parent)
: QWidget(parent)
{
slidersGroup = new SlidersGroup(tr("Sliders"));

createControls(tr("Controls"));

在構造函數中，我們首先創建顯示滑塊小部件的SlidersGroup小部件。使用createcontrol()創建控件小部件，并將它們連接到滑塊。

layout = new QBoxLayout(QBoxLayout::LeftToRight);
layout->addWidget(controlsGroup);
layout->addWidget(slidersGroup);
setLayout(layout);

minimumSpinBox->setValue(0);
maximumSpinBox->setValue(20);
valueSpinBox->setValue(5);

setWindowTitle(tr("Sliders"));
}

在初始化最小值、最大值和當前值之前，我們將控制小部件組和滑塊放在水平布局中。當前值的初始化將通過我們在valueSpinBox和SlidersGroup小部件之間建立的連接傳播到滑塊小部件，最小值和最大值通過用createcontrol()創建的連接傳播。

void Window::createControls(const QString &title)
{
controlsGroup = new QGroupBox(title);

minimumLabel = new QLabel(tr("Minimum value:"));
maximumLabel = new QLabel(tr("Maximum value:"));
valueLabel = new QLabel(tr("Current value:"));

invertedAppearance = new QCheckBox(tr("Inverted appearance"));
invertedKeyBindings = new QCheckBox(tr("Inverted key bindings"));

在私有的createcontrol()函數中，我們讓 (controlsGroup)顯示控制小部件，組合框可以提供框架、標題和鍵盤快捷方式，并在其內部顯示各種其他小部件，控制小部件組由兩個復選框和三個帶標簽的旋轉框組成。

在創建標簽之后，我們創建兩個復選框，復選框通常用于表示應用程序中可以啟用或禁用的特性。當invertedAppearance被啟用時，滑塊值被反轉，下表顯示了不同的類似滑塊小部件的外觀：

反轉垂直的外觀是很常見的，例如控制音量的垂直滑塊通常會從下到上(非倒置的外觀)，而控制屏幕上對象位置的垂直滑塊可能會從上到下，因為屏幕坐標是從上到下的。

當invertedKeyBindings選項被啟用時(對應于 屬性)，滑塊的滾輪和鍵事件被反轉。正常的鍵綁定意味著向上滾動鼠標滾輪或使用像page up這樣的鍵會將滑塊的當前值增加到最大值，反過來，相同的滾輪和鍵事件將把值移動到滑塊的最小值。如果滑塊的外觀是顛倒的，這可能很有用：一些用戶可能希望鍵在值上仍然以相同的方式工作，而另一些用戶可能希望PageUp在屏幕上表示“向上”。

注意，對于水平和垂直滾動條，默認情況下鍵綁定是反向的：PageDown增加當前值，而PageUp減少當前值。

minimumSpinBox = new QSpinBox;
minimumSpinBox->setRange(-100, 100);
minimumSpinBox->setSingleStep(1);

maximumSpinBox = new QSpinBox;
maximumSpinBox->setRange(-100, 100);
maximumSpinBox->setSingleStep(1);

valueSpinBox = new QSpinBox;
valueSpinBox->setRange(-100, 100);
valueSpinBox->setSingleStep(1);

然后我們創建旋轉箱， 允許用戶通過單擊向上和向下按鈕或按鍵盤上的向上和向下鍵來選擇一個值，以修改當前顯示的值，用戶也可以手動輸入該值。旋轉框控制、和小部件的最小值、最大值和當前值。

connect(slidersGroup, &SlidersGroup::valueChanged,
valueSpinBox, &QSpinBox::setValue);
connect(valueSpinBox, &QSpinBox::valueChanged,
slidersGroup, &SlidersGroup::setValue);
connect(minimumSpinBox, &QSpinBox::valueChanged,
slidersGroup, &SlidersGroup::setMinimum);
connect(maximumSpinBox, &QSpinBox::valueChanged,
slidersGroup, &SlidersGroup::setMaximum);
connect(invertedAppearance, &QCheckBox::toggled,
slidersGroup, &SlidersGroup::invertAppearance);
connect(invertedKeyBindings, &QCheckBox::toggled,
slidersGroup, &SlidersGroup::invertKeyBindings);

QGridLayout *controlsLayout = new QGridLayout;
controlsLayout->addWidget(minimumLabel, 0, 0);
controlsLayout->addWidget(maximumLabel, 1, 0);
controlsLayout->addWidget(valueLabel, 2, 0);
controlsLayout->addWidget(minimumSpinBox, 0, 1);
controlsLayout->addWidget(maximumSpinBox, 1, 1);
controlsLayout->addWidget(valueSpinBox, 2, 1);
controlsLayout->addWidget(invertedAppearance, 0, 2);
controlsLayout->addWidget(invertedKeyBindings, 1, 2);
controlsGroup->setLayout(controlsLayout);

}

然后我們將slidersGroup和valueSpinBox相互連接，這樣當其中一個的當前值發生變化時，滑塊小部件和控制小部件的操作將同步。valueChanged()信號以新值作為參數發出，setValue()槽將小部件的當前值設置為新值，如果新值與舊值不同，則發出valueChanged()。

我們通過控制部件和滑塊部件的信號和槽來同步它們的操作，將每個控件小部件連接到滑塊小部件的水平和垂直組，同時將orientationCombo連接到，以便顯示正確的“頁面”。最后，我們在controlsGroup組框中的中布局控制小部件。

void Window::resizeEvent(QResizeEvent *)
{
if (width() == 0 || height() == 0)
return;

const double aspectRatio = double(width()) / double(height());

if (aspectRatio < 1.0) {
layout->setDirection(QBoxLayout::TopToBottom);
slidersGroup->setOrientation(Qt::Horizontal);
} else if (aspectRatio > 1.0) {
layout->setDirection(QBoxLayout::LeftToRight);
slidersGroup->setOrientation(Qt::Vertical);
}
}

最后我們從QWidget重寫resizeEvent()，避免除以零，否則計算小部件的寬高比。如果窗口具有縱向格式，那么我們設置布局以垂直地組織控制小部件和滑塊組，并將滑塊設置為水平方向。如果窗口是橫向格式，那么我們改變布局，讓滑塊和控制并排顯示，并給滑塊一個垂直方向。

篇幅有限未完待續，更多內容敬請期待.......

Qt Widget組件推薦

• QtitanRibbon - Ribbon UI組件：是一款遵循Microsoft Ribbon UI Paradigm for Qt技術的Ribbon UI組件，QtitanRibbon致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart - Qt類圖表組件：是一個C ++庫，代表一組控件，這些控件使您可以快速地為應用程序提供漂亮而豐富的圖表。
• QtitanDataGrid - Qt網格組件：提供了一套完整的標準 QTableView 函數和傳統組件無法實現的獨特功能。使您能夠將不同來源的各類數據加載到一個快速、靈活且功能強大的可編輯網格中，支持排序、分組、報告、創建帶狀列、拖放按鈕和許多其他方便的功能。
• QtitanDocking：允許您像 Visual Studio 一樣為您的偉大應用程序配備可停靠面板和可停靠工具欄。黑色、白色、藍色調色板完全支持 Visual Studio 2019 主題！