Qt-常用控件（3）-输入类

1. QLineEdit

QLineEdit 用来表示单行输入框.可以输入一段文本,但是不能换行

核心属性

核心信号

代码示例:录入个人信息

1. 在界面上创建三个输入框和两个单选按钮,一个普通按钮
   三个输入框的 objectName 为lineEdit_name,lineEdit_passwordlineEdit_phone
   两个单选按钮的 objectName 为 radioButton_male,radioButton_female
   按钮的 objectName 为 pushButton
   
2. 编写 widget.cpp,在构造函数中编写初始化代码

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 让用户输入个人信息
    ui->lineEdit_name->setPlaceholderText("请输入你的名字");
    ui->lineEdit_name->setClearButtonEnabled(true);

    // 输入密码
    ui->lineEdit_password->setPlaceholderText("请输入你的密码");
    ui->lineEdit_password->setClearButtonEnabled(true);
    // 显示密码的模式
    ui->lineEdit_password->setEchoMode(QLineEdit::Password);


    // 输入电话
    ui->lineEdit_phone->setPlaceholderText("请输入你的电话");
    ui->lineEdit_phone->setClearButtonEnabled(true);
    // 显示电话号码的格式
    ui->lineEdit_phone->setInputMask("000-0000-0000");

}

3. 继续修改 widget.cpp,给按钮添加 slot 函数

void Widget::on_pushButton_submit_clicked()
{
    QString ate=ui->radioButton_man->isChecked() ? "男" : "女";

    qDebug()<<"姓名："<< ui->lineEdit_name->text();
    qDebug()<<"密码："<< ui->lineEdit_password->text();
    qDebug()<<"性别："<< ate;
    qDebug()<<"电话："<< ui->lineEdit_phone->text();
}

4. 执行程序,可以看到,随着用户输入内容之后,点击按钮,就能打印到输入的信息
   

inputMask 只能进行简单的输入格式校验,实际开发中,基于正则表达式的方式是更核心的方法

正则表达式,本质上就是一个带有特殊字符的字符串,特殊字符用来表示另一个字符串的特征此时就可以借助正则表达式来描述出一些具有一定特点的字符串.

代码示例:使用正则表达式验证输入框的数据此处要求在输入框中输入一个合法的电话号码(1 开头,11 位,全都是数字).如果验证不通过,则确定按钮无法点击.

1. 在界面上创建输入框和一个按钮
   
2. 编写 widget.cpp,把按钮初始 enabled 设为 false.给输入框添加验证器,
   使用 QRegExp 创建一个正则表达式对象。“^1\d{10}$”表示"以1开头,后面跟上任意的10个十进制数字”.
   使用 QRegExpValidator 创建一个验证器对象.Qt 中内置了四个主要的验证器对象
   

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 验证正则表达式
    // 需要给单行输入框设置验证器，基于正则表达式完成验证
    QRegExp regexp("^1\\d{10}$");
    // 设置验证器
    ui->lineEdit->setValidator(new QRegExpValidator(regexp));

}

3. 编写 widget.cpp,给 lineEdit 添加 textEdited 信号的 slot 函数
   on_lineEdit_textEdited 的参数是当前输入框的内容
   通过 lineEdit->validator()获取到内置的验证器
   通过 validate 方法验证文本是否符合要求,
   第一个参数填写的是要验证的字符串,由于参数要求是 QString&而不是 const。QString&,需要把这个变量复制一下,
   第二个参数是一个int&,是输出型参数,当验证的字符串不匹配时,返回这个字符串的长度.(没有。啥实质作用).
   返回值是一个枚举，QValidator::Acceptable 表示验证通过QValidator::Invalid 表示验证不通过

void Widget::on_lineEdit_textEdited(const QString &text)
{
    QString context=text;
    int pos=0;
    if (ui->lineEdit->validator()->validate(context,pos)==QValidator::Acceptable)
    {
        // 验证通过
        ui->pushButton->setEnabled(true);
    }
    else {
        // 验证不通过
        ui->pushButton->setEnabled(false);
    }

}

4. 执行程序,观察效果,可以看到此时尝试输入字母是无法输入的,并且只有当输入的内容符合要求,确
   定按钮才能被使用.
   

代码示例:验证两次输入的密码一致

1. 在界面上创建两个输入框和一个label
   
2. 编写代码,设置两个输入框的 echoMode 为 Password

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 验证两次输入的密码一致
    // 设置密码格式
    ui->lineEdit->setEchoMode(QLineEdit::Password);
    ui->lineEdit_2->setEchoMode(QLineEdit::Password);
}

3. 给两个输入框设置 textEdited slot函数

void Widget::Compare()
{
    // 获取输入的密码
    QString s1 = ui->lineEdit->text();
    QString s2 = ui->lineEdit_2->text();

    if(s1.isEmpty() && s2.isEmpty())
    {
        ui->label->setText("密码为空");
    }
    else if(s1==s2)
    {
        ui->label->setText("输入的密码一致");
    }
    else
    {
        ui->label->setText("输入的密码不一致");
    }
}


void Widget::on_lineEdit_textEdited(const QString &arg1)
{
    Compare();
}

void Widget::on_lineEdit_2_textEdited(const QString &arg1)
{
    Compare();
}

4. 执行程序,观察效果,可以看到当两个输入框内的密码相同时,就会提示密码相同
   

代码示例:切换显示密码

1. 创建一个输入框和一个复选按钮
   
2. 修改 widget.cpp,设置输入框的 echoMode为 Password

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 用复选框点击改变密码的显示模式
    // 默认情况下
    ui->lineEdit->setEchoMode(QLineEdit::Password);

}

3. 修改widget.cpp,给 checkBox 添加 slot 函数

void Widget::on_checkBox_toggled(bool checked)
{
    if(checked)
    {
        ui->lineEdit->setEchoMode(QLineEdit::Normal);
    }
    else
    {
        ui->lineEdit->setEchoMode(QLineEdit::Password);
    }
}

4. 执行程序,可以看到切换复选框的状态,就可以控制输入框显示密码
   

2. QTextEdit

QTextEdit 表示多行输入框,也是一个富文本&markdown 编辑器并且能在内容超出编辑框范围时自动提供滚动条

核心属性

核心信号

代码示例: 获取多行输入框的内容

1. 创建一个多行输入框和一个label
   
2. 给多行输入框添加 slot函数.处理 textChanged 信号
   通过 toPlainText 方法获取到内部的文本.
   类似的，QTextEdit 还提供了 toMarkdown 和 toHtml.根据需要我们调整不同的获取方式

void Widget::on_textEdit_textChanged()
{
	const QString& content = ui->textEdit->toPlainText();
	qDebug() << content;
	ui->label->setText(content);
}

3. 执行程序,可以看到当输入框中的内容发生变化时,label 中的内容同步发生改变
   

3. QComboBox

表示下拉框QComboBox

核心属性

核心方法

核心信号

代码示例:使用下拉框模拟麦当劳点餐

1. 在界面上创建三个下拉框,和一个按钮,
   
2. 编写 widget.cpp,初始化三个下拉框的内容

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 模拟麦当劳点餐
    // 给ComboBox添加
    ui->comboBox->addItem("鸡腿堡");
    ui->comboBox->addItem("巨无霸");
    ui->comboBox->addItem("培根书崔双层牛堡");

    ui->comboBox_2->addItem("中薯条");
    ui->comboBox_2->addItem("麦乐鸡块");
    ui->comboBox_2->addItem("麦辣鸡翅");

    ui->comboBox_3->addItem("可乐");
    ui->comboBox_3->addItem("雪碧");
    ui->comboBox_3->addItem("芬达");
}

3. 编写 widget.cpp,给按钮添加 slot 函数

void Widget::on_pushButton_clicked()
{
    qDebug()<<ui->comboBox->currentText() <<", "<<ui->comboBox_2->currentText() <<", "<<ui->comboBox_3->currentText();
}

4. 执行程序,可以看到,在点击确定按钮时,就能获取到当前下拉框中选中的内容
   

代码示例2: 从文件中加载下拉框的选项很多时候下拉框的选项并非是固定的,而是通过读取文件/读取网络获取到的

1. 在界面上创建一个下拉框
   
2. 创建 E:/code/1.txt 文件
   
3. 修改 widget.cpp,从文件中读取选项
   使用 ifstream 打开文件
   使用 getline 读取每一行
   使用 QString::fromstdstring 把 std::string 转成 QString

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 需要读取文件内容，把文件的每一行都读出来，作为一个ComboBox 的选项
    std::fstream file("E:/code/1.txt");

    // 判断文件是否被打开
    if(!file.is_open())
    {
        qDebug()<<"文件打开失败";
        return;
    }

    // 按行来读取文本
    std::string line;
    while(std::getline(file,line))
    {
        // 取到的每一行的内容，添加的下拉菜单中
        ui->comboBox->addItem(QString::fromStdString(line));

    }

    file.close();
}

4. 执⾏程序, 可以看到⽂件内容已经被加载到下拉框中
   

4. QSpinBox

使用 QSpinBox 或者 QDoubleSpinBox 表示"微调框",它是带有按钮的输入框.可以用来输入整数/浮点数.通过点击按钮来修改数值大小.
由于 SpinBox 和 QDoubleSpinBox 用法基本相同,就只介绍 SpinBox 的使用了

QSpinBox 关键属性

核心信号

代码示例:调整麦当劳购物车中的份数

1. 在界面上创建下列内容
   三个下拉框:objectName为comboBox到comboBox_3三个微调框:objectName为spinBox到spinBox_3-个按钮:objectName为pushButton
   
2. 编写代码,修改 widget.cpp,给下拉框设置初始值

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 模拟实现麦当劳选餐，并且用微调框进行需要选择的个数

    // 先设置下拉框
    ui->comboBox->addItem("麦辣鸡腿堡");
    ui->comboBox->addItem("巨无霸");
    ui->comboBox->addItem("培根书崔双层牛堡");

    ui->comboBox_2->addItem("中薯条");
    ui->comboBox_2->addItem("麦乐鸡块");
    ui->comboBox_2->addItem("麦辣鸡翅");

    ui->comboBox_3->addItem("可乐");
    ui->comboBox_3->addItem("雪碧");
    ui->comboBox_3->addItem("芬达");


    // 设置微调框的范围
    ui->spinBox->setRange(1,5);
    ui->spinBox_2->setRange(1,5);
    ui->spinBox_3->setRange(1,5);

    // 设置初始值
    ui->spinBox->setValue(1);
    ui->spinBox_2->setValue(1);
    ui->spinBox_3->setValue(1);

}

3. 编写代码,给按钮添加 slot 函数

void Widget::on_pushButton_clicked()
{
    qDebug()<<"当前下单的内容"
            <<ui->comboBox->currentText()<<","<<ui->spinBox->value()
            <<ui->comboBox_2->currentText()<<","<<ui->spinBox_2->value()
           << ui->comboBox_3->currentText()<<","<<ui->spinBox_3->value();
}

4. 执行程序,可以看到当用户选择不同的内容时,点击按钮就能获取到对应的结果,同时我们也无法输入一些超出范围的非法值.
   

5. QDateTimeEdit

使⽤ QDateEdit 作为⽇期的微调框

使用 QTimeEdit 作为时间的微调框

使用 ODateTimeEdit 作为时间日期的微调框

这几个控件用法非常相似,我们以 QDateTimeEdit 为例进行介绍

QDateTimeEdit 核⼼属性

核⼼信号

代码示例: 实现日期计算器

1. 在界面上创建两个 QDateTimeEdit 和一个按钮,一个label
   ODateTimeEdit的objectName 为dateTimedit old 和 dateTimeEdit new
   
   2)编写计算按钮的 slot 函数

• 使用 daysTo 函数可以计算两个日期的天数
• 使用 secsTo
• 函数可以计算两个时间的秒数
• 通过(秒数 /3600)换算成小时数,再余上 24 得到零几个小时使用 Qstring::number 把整数转成 QString 进行拼接

void Widget::on_pushButton_clicked()
{
    // 首先获取两个日期的当前日期
    QDateTime dateOld = ui->dateTimeEdit->dateTime();
    QDateTime dateNew = ui->dateTimeEdit_2->dateTime();
    qDebug()<<dateOld<<dateNew;

    // 计算两个日期的差值天数
    //int days=dateOld.daysTo(dateNew);// 会有缺陷，如果差值小于24小时，会多算一天

    // 计算两个日期的差值秒数
    int seconds=dateOld.secsTo(dateNew);


    // 计算多余的小时
    int hours=(seconds/3600)%24;
    int days=(seconds/3600)/24;

    // 把计算结果输出到label中
    ui->label->setText(QString("持续爱你已经")+ QString(days)+QString("天")
                       +QString(hours)+ QString("小时"));
}

3. 执⾏程序, 观察结果
   

6. QDial

使用 QDial 表示一个 旋钮

核心属性

核心信号

代码示例:调整窗口透明度

1. 在界面上创建一个旋钮和一个label
   
2. 编写 widget.cpp,对旋钮初始化

Widget::Widget(QWidget *parent)
	: QWidget(parent)
	, ui(new Ui::Widget)
{
	ui->setupUi(this);
	// 设置可以循环旋转
	ui->dial->setWrapping(true);
	// 设置刻度线可⻅
	ui->dial->setNotchesVisible(true);
	// 设置最⼤值为
	ui->dial->setMaximum(100);
	// 设置最⼩值为
	ui->dial->setMinimum(0);
	// 设置初始值为
	ui->dial->setValue(100);
}

3. 编写 widget.cpp,设置旋钮的 valuechanged slot函数

void Widget::on_dial_valueChanged(int value)
{
	ui->label->setText(QString("当前不透明度为: ") + QString::number(value));
	this->setWindowOpacity((double)value / 100);
}

4. 运行程序,观察效果,可以看到随着拖动旋钮旋转,不透明度发生明显变化
   

7. QSlider

使⽤ QSlider 表⽰⼀个滑动条.

QSlider 和 QDial 都是继承自 QAbstractslider,因此用法上基本相同

核心属性

核心信号

代码示例: 通过自定义快捷键调整滑动条位置设置 -减小 value,设置=增加 value.默认情况下滑动条****可以通过 方向键 或者 pageUp/pageDown 调整大小.

1. 在界面上创建滑动条和 label
   
2. 编写 Widget.cpp 代码

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 使用快捷键，- 和 =（也就相当于+）,来调节滚动条

    // 1.设置快捷键
    QShortcut *st1=new QShortcut(this);
    st1->setKey(QKeySequence("-"));

    QShortcut *st2=new QShortcut(this);
    st2->setKey(QKeySequence("="));

    // 2.用connect函数进行信号与槽的连接
    connect(st1,&QShortcut::activated,this,&Widget::mudValue);
    connect(st2,&QShortcut::activated,this,&Widget::addValue);

}

void Widget::addValue()
{
    // 获取当前的数值
    int value=ui->horizontalSlider->value();
    if(value>=ui->horizontalSlider->maximum())
    {
        return;
    }

    ui->horizontalSlider->setValue(value+5);
}

void Widget::mudValue()
{
    // 获取当前的数值
    int value=ui->horizontalSlider->value();

    if(value<=ui->horizontalSlider->minimum())
    {
        return;
    }

    ui->horizontalSlider->setValue(value-5);

}


void Widget::on_horizontalSlider_valueChanged(int value)
{
    ui->label->setText("当前的数值为："+ QString::number(value));
}