花开富贵 的个人博客

1 QDial

QDial控件是Qt中提供的一种旋钮控件, 通过旋钮来控制某些数值的增减;

通常通过鼠标来控制旋钮的旋转以此控制数值的变化;

1.1 核心属性

1.2 核心信号

1.3 代码示例 - 创建 QDial 控制 Widget 透明度

创建一个QDial, 通过QDial来实现对Widget的控制, 并将当前值显示在Label中;

• 所需控件

  • QDial
  • Label

  

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()));
   }
   

2. 设计槽函数

   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为最终值;

3. 运行结果

   

2 QSlider

QSlider控件是Qt提供的一种滑动条控件;

旨在能够设计一个滑动条来改变某些控件的参数或是其他控制;

可以看到, 实际上在侧边栏中QSlider存在两种, 分别为横向与纵向;

实际上其可以通过对应的属性来修改横向或是纵向;

其中Horizontal为横向, Vertical为纵向;

其使用方法与QDial类似;

2.1 核心属性

2.2 核心信号

该控件的核心信号与QDial控件类似;

2.3 示例代码 - 创建 QSilder 控制 Widget 长宽

创建一个程序, 通过横向, 纵向QSilder分别控制Widget的长宽

• 所需控件

  两个QSilder控件, 分别为横向与纵向;

  

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);
   }
   

2. 设置槽函数

   对两个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);
   }
   

3. 运行结果

   

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来显示对应的按键;

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对象来绑定对应的快捷键;

2. 设置槽函数

   当对应快捷键被按下时, 将会发出一个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控件来事实打印所按下的快捷键;

3. 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("");
   

4. 运行结果