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

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