常用界面设计组件 —— 数字输入和显示组件

- 2.3 数字输入和显示组件
- - 2.3.1 QSpinBox 与 QDoubleSpinBox
  - 2.3.2其它数值输入和显示组件

2.3 数字输入和显示组件

2.3.1 QSpinBox 与 QDoubleSpinBox

QSpinBox用于整数的显示和输入，一般显示十进制数，也可以显示二进制、十六进制数，而且可以在显示框中增加前缀或后缀。QDoubleSpinBox用于浮点数的显示和输入，可以设置显示小数的位数，也可以设置显示前缀和后缀。

设计如下窗口：

在这里插入图片描述

设计按钮对应的槽函数

// 槽函数，响应btnCalc按钮的点击事件
void Widget::on_btnCalc_clicked()
{// 获取输入的数量和单价int num = ui->sb_num->value();double price = ui->dsb_price->value();// 计算总价并设置到dsb_sum上double sum = num * price;ui->dsb_sum->setValue(sum);
}

可以在Designer中直接设置以下属性

在这里插入图片描述

对应的成员函数可以查阅QT官方手册。

在这里插入图片描述

2.3.2其它数值输入和显示组件

QSlider

QSlider和QDial 2个组件都从QAbstractSlider继承而来，有一些共有的属性。QSlider是滑动的标尺型组件，滑动标尺上的一个滑块可以改变值。 QAbstractSlider的主要属性包括以下几种：

在这里插入图片描述

属于QSlider的专有属性有两个：

在这里插入图片描述

QDial

QDial是仪表盘式的组件，通过旋转表盘获得输入值。特有的属性包括：
QProgressBar

它的父类是QWidget，一般用于显示进度

在这里插入图片描述

QLCDNumber

QLCDNumber是模拟LCD显示数字的组件，可以显示整数或小数。小数点也算一个数位。

在这里插入图片描述

创建基于QMainWindow的工程，如下图所示：

在这里插入图片描述

增加的代码如下：

#include "mainwindow.h"
#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);// 连接滑动条数值改变信号到槽函数on_slider_valueChangedconnect(ui->slider_red, SIGNAL(valueChanged(int)),this, SLOT(on_slider_valueChanged(int)));connect(ui->slider_green, SIGNAL(valueChanged(int)),this, SLOT(on_slider_valueChanged(int)));connect(ui->slider_bule, SIGNAL(valueChanged(int)),this, SLOT(on_slider_valueChanged(int)));connect(ui->verticalSlider_ALPHA, SIGNAL(valueChanged(int)),this, SLOT(on_slider_valueChanged(int)));
}MainWindow::~MainWindow()
{delete ui;
}void MainWindow::on_slider_valueChanged(int value)
{// 获取红、绿、蓝、透明度的值int red = ui->slider_red->value();int green = ui->slider_green->value();int blue = ui->slider_bule->value();int alpha = ui->verticalSlider_ALPHA->value();// 创建颜色对象QColor color;color.setRgb(red, green, blue, alpha);// 设置文本框背景颜色QPalette pal = ui->textEdit->palette();pal.setColor(QPalette::Base, color);ui->textEdit->setPalette(pal);// 计算颜色值总和并显示在lcdNumber_2上int sum_color = red + green + blue + alpha;ui->lcdNumber_2->display(sum_color);// 设置lcdNumber_2的样式ui->lcdNumber_2->setStyleSheet("background:transparent;color:#00ccff;");
}void MainWindow::on_dial_sliderMoved(int position)
{// 获取滚轮的值，设置到进度条和lcdNumber上int value = ui->dial->value();ui->progressBar->setValue(value);ui->lcdNumber->display(value);
}