布局组件和布局按钮

Qt的UI设计器中提供了丰富的布局管理功能，组件面板里有Layouts（布局）和Spacers（间隔器）两个组件面板。

Vertical Layout：垂直方向布局，组件自动在垂直方向上分布。

Horizontal Layout：水平方向布局，组件自动在水平方向上分布。

Grid Layout：网格状布局（栅格布局），网状布局大小改变时，每个网格的大小都改变。

Form Layout：窗体布局，与网格状布局类似，但是只有最右侧一列网格会改变大小。

Horizontal Spacer：一个用于水平分隔的空格。

Vertical Spacer：一个用于垂直分隔的空格。

在窗体上方工具栏中也提供了布局管理按钮，主要用到的还是上面介绍的那些

练习-用户信息

页面布局

我们要做一个下面格式的窗口

首先我们根据这个窗口排放对应组件，并对各个组件更改对象的名字方便记忆和使用。

然后我们选择所有组件进行排布布局

如果有些位置不好调整我们可以选择打破布局，然后挪动位置后再进行布局直到达到目标布局为止。

到这样就可以了。

准备工作

将界面上的年龄、性别、生日、邮箱后缀的初始值设定好，此项工作应当在窗口创建之初就应当完成了。再MainWindow的构造函数中setUi之后进行设定。

设置性别

    ui->comboBox_sex->addItem("男");
    ui->comboBox_sex->addItem("女");

设置年龄

    ui->spinBox_age->setValue(1);

设置生日

让生日的默认值为当前时间

    ui->dateEdit_birth->setDate(QDate::currentDate());  

设置邮箱后缀

这里我们选择添加多个文本，首先创建一个QStringList链表，然后将链表传入

并且设置默认显示，如果不设置默认显示则会默认显示第0个元素

    QStringList strList{"qq.com","163.com","sina.com","gmail.com"};
    ui->comboBox_suffix->addItems(strList);
    ui->comboBox_suffix->setCurrentIndex(1);  //设置编辑框上显示的文本，如果不设置，默认显示第一个

设置头像

我们直接右键更新头像，选择转到槽自动生成一个绑定clicked信号的槽函数

然后对这个槽函数进行实现，其中包括获取图片的绝对路径，之后就是想将这张图放到上边的label标签上

需要通过和图的一个绑定变量来实现（就像easyx中的image变量一样），然后设定图片的大小，最后将图片设置到标签上

//更新头像
void MainWindow::on_pushButton_pic_clicked()
{
    QString file = QFileDialog::getOpenFileName(this,  //父窗口
                                 "请选择一张图片",  //标题
                                 "C:/Users/jiaji/Desktop",  //选择的起始路径
                                 "Image (*.png *.bmp *.jpg)");  //文件过滤
    if(!file.isEmpty()){  //如果字符串不为空，则是选择了一张图
        qDebug()<<"file = "<<file;

        QPixmap pix(file);  //和某张图绑定关联
        pix = pix.scaled(230,180,Qt::KeepAspectRatio);  //保持宽高比，设定图片的大小

        ui->label_pic->setPixmap(pix);  //将图片设置到label标签上
    }

}

点击更新头像按钮会跳转到默认起始路径

选择一张图即可实现贴图

创建文件

在mainwindow的构造函数中创建文件

创建文件分为两大步骤：找到指定路径下的指定文件 打开文件

    //找到指定路径下的指定文件
    QString path = "E:/ab/bb";
    QString file = "userinfo.txt";

    QDir dir(path);  //绑定指定的路径
    if(!dir.exists()){  //如果路径不存在，则创建
        if(!dir.mkpath(path)){  //如果路径创建失败
            QMessageBox::critical(this,"错误","路径创建失败");
            exit(0);  //程序退出
        }
    }

    QString pathfile = QString("%1/%2").arg(path).arg(file);

    //打开文件
    //QFile file(pathfile);
    m_file.setFileName(pathfile);  //绑定文件
    if(!m_file.open(QIODevice::ReadWrite|QIODevice::Text)){  //创建文件 读写文本
        QMessageBox::critical(this,"错误","文件创建失败");
        exit(0);  //程序退出
    }

写入文件

将更新按钮转入槽，在槽中实现写入

其中要注意的是在写入之前重新设定文本大小，写入之后及时刷新缓冲区

//获取用户信息写入到文件
void MainWindow::on_pushButton_update_clicked()
{
    m_file.resize(0);  //重新设定大小

    QString userInfo = "%1\n%2\n%3\n%4\n%5\n%6\n%7\n%8\n%9";
    userInfo = userInfo.arg(ui->lineEdit_nick->text())
                        .arg(ui->plainTextEdit_sign->toPlainText())
                        .arg(ui->lineEdit_name->text())
                        .arg(ui->comboBox_sex->currentText())
                        .arg(ui->spinBox_age->value())
                        .arg(ui->dateEdit_birth->text())
                        .arg(ui->lineEdit_tel->text())
                        .arg(ui->lineEdit_email->text()+"@"+ui->comboBox_suffix->currentText())
                        .arg(ui->lineEdit_school->text());

    qDebug()<<userInfo;

    if(!m_file.write(userInfo.toStdString().c_str())){
        QMessageBox::critical(this,"错误","写入文件失败");
    }

    m_file.flush();  //及时刷新缓冲区

}

这样在录入完信息之后点击更新就会将信息写入到文本了

清空表单信息

将清空按钮转入到一个槽

在这个槽函数中实现将所有信息恢复初始化

//清空表单信息
void MainWindow::on_pushButton_clear_clicked()
{
    ui->lineEdit_nick->clear();
    ui->plainTextEdit_sign->clear();
    ui->lineEdit_name->clear();
    ui->comboBox_sex->setCurrentText("男");
    ui->spinBox_age->setValue(1);
    ui->dateEdit_birth->setDate(QDate::currentDate());
    ui->lineEdit_tel->clear();
    ui->lineEdit_email->clear();
    ui->comboBox_suffix->setCurrentIndex(1);
    ui->lineEdit_school->clear();
}

清空前

清空后

Buddy（伙伴）关系

伙伴关系是指界面上的一个label和一个组件的关联，在程序运行时，在窗体上按快捷键快速将焦点切换到label的伙伴关系组件上。

再获颁关系工具下，选中label标签拖动到后面的组件上，那么两者就成了伙伴关系，label的buddy属性，显示了关联的伙伴。

label的text属性改为xx(&S)，括号为英文，其中&用来指定快捷键，并不会显示到窗口上，指定的快捷键为0，当程序运行后，按下Alt+0即可将光标焦点切换到昵称的伙伴组件上。

Tab顺序

tab顺序说的是在窗口上按下tab键，各个控件焦点的顺序。可以按照我们的习惯来指定这些控件焦点顺序，而不是一个乱序的顺序。

注意：没有输入焦点的组件是没有tab顺序的。如果我们想更改顺序，只需要点击上面的数字，自动更改顺序，点击的顺序为自然数顺序。

控件上tab顺序序号有三种颜色：

1. 绿色：代表已经点击过了，排好顺序了。
2. 红色：正在指定顺序的数字下标。
3. 蓝色：还未指定的数字顺序。

也可以选中数字【右键】

【从这里开始】：代表从选中数字之后的顺序开始调整，之前的数字顺序为原来的顺序。

【重新开始】：所有的控件重新从1开始指定。

如果我们想按照数字方向顺序切换，【shift】+【tab】