个人信息窗口（三）

前言

在上一集我们就可以显示我们就可以全部显示所有的未隐藏的组件了，但是隐藏的组件我们还没有蛆完成，所以我们这一集就需要去做隐藏组件的显示，以及如何切换到隐藏的组件的功能。

需求分析并实现

我们需要点击修改按钮，就能够显示修改的输入框以及确认的按钮。

点击修改按钮后，我们需要先隐藏对应的Label组件以及ModifyBtn组件，再把这两个对应的组件从layout上移除。然后就要显示对应的Edit和Submit组件，并且添加到之前删除的组件的原位置。

我们就需要使用连接槽来实现。

 connect(nameModifyBtn, &QPushButton::clicked, this, [=](){
        //隐藏并移除Label、Btn
        nameLabel->hide();
        nameModifyBtn->hide();
        layout->removeWidget(nameLabel);
        layout->removeWidget(nameModifyBtn);
        //显示Edit、Btn
        nameEdit->show();
        nameSubmitBtn->show();
        layout->addWidget(nameEdit,1,2);
        layout->addWidget(nameSubmitBtn,1,3);
    });

这里就可以实现隐藏组件的呈现了。

但是貌似还不够，我们也应该把Label上的内容先放置再我们的编辑框上。

    //输入框内容设置
    nameEdit->setText(nameLabel->text());

总体代码如下

    //连接信号槽
    connect(nameModifyBtn, &QPushButton::clicked, this, [=](){
        //隐藏并移除Label、Btn
        nameLabel->hide();
        nameModifyBtn->hide();
        layout->removeWidget(nameLabel);
        layout->removeWidget(nameModifyBtn);
        //显示Edit、Btn
        nameEdit->show();
        nameSubmitBtn->show();
        layout->addWidget(nameEdit,1,2);
        layout->addWidget(nameSubmitBtn,1,3);
        //输入框内容设置
        nameEdit->setText(nameLabel->text());
    });
    connect(descModifyBtn, &QPushButton::clicked, this, [=](){
        //隐藏并移除Label、Btn
        descLabel->hide();
        descModifyBtn->hide();
        layout->removeWidget(descLabel);
        layout->removeWidget(descModifyBtn);
        //显示Edit、Btn
        descEdit->show();
        descSubmitBtn->show();
        layout->addWidget(descEdit,2,2);
        layout->addWidget(descSubmitBtn,2,3);
        //输入框内容设置
        descEdit->setText(descLabel->text());
    });
    connect(phoneModifyBtn, &QPushButton::clicked, this, [=](){
        //隐藏并移除Label、Btn
        phoneLabel->hide();
        phoneModifyBtn->hide();
        layout->removeWidget(phoneLabel);
        layout->removeWidget(phoneModifyBtn);
        //显示Edit、Btn
        phoneEdit->show();
        phoneSubmitBtn->show();
        layout->addWidget(phoneEdit,3,2);
        layout->addWidget(phoneSubmitBtn,3,3);
        //输入框内容设置
        phoneEdit->setText(phoneLabel->text());
    });

我们来看看效果。

这里就可以看到已经成功实现了这个功能。

但是发现这些输入框靠得太近了。所以我们需要修改一下setVerticalSpacing。

设置一个值，就可以实现这个效果了，大家可以自行设置。
但是我们发现这个验证码很突兀，我们应该再修改电话的时候，才弹出获取验证码的功能。所以我们需要先把验证码的组件先隐藏起来，等点击修改电话的按钮的时候，我们就显示这些有关验证码的组件。

    //获取验证码
    verifyCodeTag = new QLabel();
    verifyCodeTag->setFixedSize(50,height);
    verifyCodeTag->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
    verifyCodeTag->setText("验证码");
    verifyCodeTag->setStyleSheet(labelStyle);
    verifyCodeTag->hide();

    verifyCodeEdit = new QLineEdit();
    verifyCodeEdit->setFixedHeight(height);
    verifyCodeEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
    verifyCodeEdit->setStyleSheet(editStyle);
    verifyCodeEdit->hide();

    getVerifyCodeBtn = new QPushButton();
    getVerifyCodeBtn->setText("获取验证码");
    getVerifyCodeBtn->setStyleSheet("QPushButton { border: none; background-color: transparent; } QPushButton:pressed { background-color: rgb(231,231,231); }");
    getVerifyCodeBtn->setFixedSize(70,height);
    getVerifyCodeBtn->hide();

我们要对这三个内容先隐藏。

connect(phoneModifyBtn, &QPushButton::clicked, this, [=](){
        //隐藏并移除Label、Btn
        phoneLabel->hide();
        phoneModifyBtn->hide();
        layout->removeWidget(phoneLabel);
        layout->removeWidget(phoneModifyBtn);
        //显示Edit、Btn
        phoneEdit->show();
        phoneSubmitBtn->show();
        layout->addWidget(phoneEdit,3,2);
        layout->addWidget(phoneSubmitBtn,3,3);

        verifyCodeTag->show();
        verifyCodeEdit->show();
        getVerifyCodeBtn->show();

        layout->addWidget(verifyCodeTag,4,1);
        layout->addWidget(verifyCodeEdit,4,2);
        layout->addWidget(getVerifyCodeBtn,4,3);

        //输入框内容设置
        phoneEdit->setText(phoneLabel->text());
    });
}

点击修改手机号码的时候，就让他显示出来并添加到布局管理器当中。

那么个人信息这里就算完成了，当然修改之后的那些功能是需要服务器端的交互才能够实现，所以等后面我们去完成了服务器端之后再去实现。