文章目錄

  • 1 QDial
  • 1.1 核心屬性
  • 1.2 核心信號
  • 1.3 代碼示例 - 創建 QDial 控制 Widget 透明度
  • 2 QSlider
  • 2.1 核心屬性
  • 2.2 核心信號
  • 2.3 示例代碼 - 創建 QSilder 控制 Widget 長寬
  • 2.3.1 為程序設置快捷鍵 - 通過快捷鍵控制 Slider 設置長寬

1 QDial

QDial控件是Qt中提供的一種旋鈕控件, 通過旋鈕來控制某些數值的增減;

qt的基本控件——輸入控件_快捷鍵

通常通過鼠標來控制旋鈕的旋轉以此控制數值的變化;

1.1 核心屬性

屬性

説明

value

持有的數值

minimum

最小值

maximum

最大值

singleStep

按下方向鍵的時候改變的步長

pageStep

按下pageUp/pageDown的時候改變的步長

sliderPosition

界面上的旋鈕初始位置

tracking

外觀是否跟蹤數值變化

默認為true. 一般不需要修改

wrapping

是否允許循環調整

即數值如果超過最大值, 是否允許回到最小值

(調整過程能否循環)

notchesVisible

是否顯示刻度線

notchTarget

刻度線之間的相對位置

數字越大, 刻度線越稀疏

1.2 核心信號

信號

説明

valueChanged(int)

數值改變時觸發

rangeChanged(int, int)

範圍改變時觸發(通常用户無法通過手動操作來修改QDial的範圍

因此當代碼觸發範圍變化(如minimum或maximum發生變化則為範圍發生變化))

1.3 代碼示例 - 創建 QDial 控制 Widget 透明度

創建一個QDial, 通過QDial來實現對Widget的控制, 並將當前值顯示在Label中;

  • 所需控件
  • QDial
  • Label

qt的基本控件——輸入控件_控件_02

  1. 初始化控件
    在實際設計之前需要對控件進行初始化, 如QLabel的初始化顯示與QDial的最小值, 最大值, 刻度線等內容;
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
ui->dial->setMaximum(50);
ui->dial->setMinimum(0);
ui->dial->setNotchesVisible(true);
ui->label->setText("當前透明度為: "+QString::number(ui->dial->value()));
}
  1. 設計槽函數
    QLabel為用於顯示的控件, 因此不對其信號進行處理, 重點處理QDial控件的ValueChanged(int)信號;
    對應的槽重點修改windowOpacity透明度的內容, 其中ValueChanged(int)中所給的int為當前控件的所在位置的值;
void Widget::on_dial_valueChanged(int value)
{
this->setWindowOpacity(((double)100-value)/100);
ui->label->setText("當前透明度為: "+QString::number(ui->dial->value()));
}

我們重點設置的是透明度, 而不是不透明度, 為了避免透明度過高而找不到窗口, 這裏我們選擇使用50為最終值;

  1. 運行結果

2 QSlider

QSlider控件是Qt提供的一種滑動條控件;

旨在能夠設計一個滑動條來改變某些控件的參數或是其他控制;

qt的基本控件——輸入控件_ide_03

可以看到, 實際上在側邊欄中QSlider存在兩種, 分別為橫向與縱向;

實際上其可以通過對應的屬性來修改橫向或是縱向;

qt的基本控件——輸入控件_控件_04

其中Horizontal為橫向, Vertical為縱向;

其使用方法與QDial類似;

2.1 核心屬性

屬性

説明

value

持有的數值

minimum

最小的數值

maximum

最大的數值

singleStep

按下方向鍵時改變的步長

pageStep

按下pageUp/pageDown時的步長

sliderPosition

滑動條顯示的初始位置

tracking

外觀是否會跟蹤數值變化

默認值為true, 一般不需要修改

orientation

滑動條的方向是水平還是垂直

Horizontal為橫向, Vertical為縱向

invertedAppearance

是否要反轉滾動條的方向

tickPosition

刻度的位置

tickInterval

刻度的密集程度

2.2 核心信號

信號

説明

valueChanged(int)

數值改變時觸發

rangeChanged(int, int)

範圍變化時觸發

該控件的核心信號與QDial控件類似;

2.3 示例代碼 - 創建 QSilder 控制 Widget 長寬

創建一個程序, 通過橫向, 縱向QSilder分別控制Widget的長寬

  • 所需控件

兩個QSilder控件, 分別為橫向與縱向;

qt的基本控件——輸入控件_控件_05

  1. 初始化控件
對所需控件進行初始化, 本質上是對兩個Slider的最大值/最小值以及當前值進行初始化;
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
ui->horizontalSlider->setMaximum(1500);
ui->horizontalSlider->setMinimum(500);
ui->horizontalSlider->setValue(this->geometry().width());
ui->horizontalSlider->setSingleStep(10);
ui->verticalSlider->setInvertedAppearance(true); // 反轉方向
ui->verticalSlider->setMaximum(800);
ui->verticalSlider->setMinimum(500);
ui->verticalSlider->setValue(this->geometry().height());
ui->verticalSlider->setSingleStep(10);
}
1. 設置槽函數
對兩個Silder的valueChanged()信號進行處理;
通過信號所給的值來設置Widget的geometry的寬與高;
void Widget::on_horizontalSlider_valueChanged(int value)
{
this->setGeometry(geometry().x(), geometry().y(), value, geometry().height());
}
void Widget::on_verticalSlider_valueChanged(int value)
{
this->setGeometry(geometry().x(), geometry().y(), geometry().width(), value);
}
  1. 運行結果
2.3.1 為程序設置快捷鍵 - 通過快捷鍵控制 Slider 設置長寬

實際上針對Slider控件而言, 其可以通過方向鍵(up/down/left/right)來控制數值的增長, 但有兩個問題:

  1. 在通過方向鍵來控制時焦點必須在該控件上
  2. up與right永遠為增, down與left永遠為降

而在Qt中可以通過ShortCut類設置快捷鍵來綁定對應的控件;

此處我們將快捷鍵設置為h/j/k/l, 其中k為縱向Slider的縮小, j為縱向Slider的增大, h則為橫向的縮小, l為橫向的增大;

此次每次步長設置為15, 且再添加一個QLabel來顯示對應的按鍵;

qt的基本控件——輸入控件_ide_06

1. 設置快捷鍵對象並綁定快捷鍵
快捷鍵對象通常在使用QShortcut類來定製;
QShortcut *shortcutH = new QShortcut(this);
QShortcut *shortcutJ = new QShortcut(this);
QShortcut *shortcutK = new QShortcut(this);
QShortcut *shortcutL = new QShortcut(this);
shortcutH->setKey(QKeySequence("h"));
shortcutJ->setKey(QKeySequence("j"));
shortcutK->setKey(QKeySequence("k"));
shortcutL->setKey(QKeySequence("l"));
通過setKey方法並傳入QKeySequence對象來綁定對應的快捷鍵;
1. 設置槽函數
當對應快捷鍵被按下時, 將會發出一個QShortcut::activated()信號;
需要對應的槽函數來處理對應的信號, 而槽內則是直接對Slider控件的value進行修改;
當Slider控件的value發生改變時又會觸發其ValueChanged()信號, 從而修改Widget的大小;
void Widget::horizontalAdd(){
int value = ui->horizontalSlider->value();
ui->horizontalSlider->setValue(value+15);
ui->label->setText("Key - L");
}
void Widget::horizontalSub(){
int value = ui->horizontalSlider->value();
ui->horizontalSlider->setValue(value-15);
ui->label->setText("Key - H");
}
void Widget::verticalAdd(){
int value = ui->verticalSlider->value();
ui->verticalSlider->setValue(value+15);
ui->label->setText("Key - J");
}
void Widget::verticalSub(){
int value = ui->verticalSlider->value();
ui->verticalSlider->setValue(value-15);
ui->label->setText("Key - K");
}
同時需要注意的是, 我們設置了一個QLabel控件來事實打印所按下的快捷鍵;
1. connect綁定信號和槽並初始化QLabel
通過connect來綁定對應的信號和槽, 並初始化QLabel初始化顯示為空;
connect(shortcutH, &QShortcut::activated, this, &Widget::horizontalSub);
connect(shortcutJ, &QShortcut::activated, this, &Widget::verticalAdd);
connect(shortcutK, &QShortcut::activated, this, &Widget::verticalSub);
connect(shortcutL, &QShortcut::activated, this, &Widget::horizontalAdd);
ui->label->setText("");


運行結果

qt的基本控件——輸入控件_控件_07