嵌入式学习之QT学习----4 完善界面

这一部分就在嵌入式学习之QT学习—3制作简单的QT界面（如：QQ登录界面）的基础上进一步地完善界面。

1、给QT工程添加图片

（1）添加图片资源文件
选住项目名称-----》点击右键----》添加新文件----》Qt------>QtResource File-----》choose…（路径和名称都不能有中文，此处命名为qq）-----》下一步…-----》完成
添加完之后，会在工程文件下看到添加的资源文件夹以及文件。

点击新生成的“.qrc”文件，右键“open with”-----》“资源管理器”，会弹出以下界面，刚开始这些界面都是灰色的，不可以编辑的。
点击添加，选择添加前缀，一般都将前缀设置为根目录“/”，摁下ctrl+s保存；接着再次点击添加，添加文件，选择想要添加的图标，添加完成之后，点击保存。
这一番操作之后，可以在工程文件下发现多了工程文件的代码。

（2）引用添加的图片
打开ui文件，添加“Label”，将label中的文字删除掉，然后右键Label控件，选择“改变样式…”----》点击“添加资源”处的箭头-----》“border-image”----》“”----》ok----》ok



编译运行结果如下：

2、界面布局

界面布局并不会影响.cpp代码

接下来给刚才做的界面来布个局吧（再添加一个控件，命名为“QQ”字样）

将黑色框框里面的控件全部都按照“水平布局”，黄色框框里的控件全部都按照“垂直布局”，先做水平布局的，再做垂直布局的。
属性编辑器的这里可以使其居中。

布局完成，编译结果如下：
但是存在一个问题，放大或者缩小运行界面的时候，编译结果是固定的，不会跟着放大或者缩小，就很影响视觉效果。

那么要怎么修改呢？
给布局号的界面四周加上弹簧控件，然后选中整个界面，点击栅格布局，再重新编译运行一下。

编译结果如下：（这次将界面缩小成这么小都可以看得清楚啦）
再回到ui界面，选中所有控件，点击“打破布局”，给其它控件之间也加上弹簧控件，使得界面更加美观。

编译运行结果如下：

3、界面切换

步骤一：创建一个新的ui界面
选中"工程"—》右键—》添加新文件----》Qt----》Qt设计师界面类----》choose…----》widget----》下一步-----》改变“类名”-----》下一步-----》完成

步骤二：在新建的ui界面添加控件
以添加三个功能为例（消息、联系人、动态）

然后改控件名字以及添加图片资源

添加完图片资源之后要记得保存

给界面布局：

编译运行发现并不会弹出来这个新设计的ui界面，因为在代码里面没有引用它。
步骤三：在代码中引用新的ui界面
修改widget.cpp文件代码如下：

#include "widget.h"
#include "ui_widget.h"
#include "enter.h"
//包含新界面的头文件

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    connect(ui->registBt,SIGNAL(clicked()),this,SLOT(registBt_clicked_slots()));
 
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_logoBt_clicked()
{
    //qDebug("logo success!");
    //在登录的槽函数里面声明一个对象
    enter *et = new enter;
    et->setGeometry(this->geometry());
    et->show();
}
//实现手动关联时声明的槽函数
void Widget::registBt_clicked_slots()
{
    qDebug("regist success!");
}

编译运行QT工程，此时弹出来：

点击登录就会出来新设计的ui界面：

那么如何从这个界面返回呢？
返回到新设计的ui界面，将“动态”字样修改为“返回”，然后选住该控件，给该控件改一下名字（改成了backBk），接着选住该控件，右键，“转到槽”（选择关联第一个信号），“返回”就意为着现在这个打开的新的ui界面，直接在槽函数中写入“关闭”即可。

再来编译运行一下，点击返回的时候就可以退出新的ui界面啦。

4、验证账号与密码输入是否正确

要验证账号密码输入的是否正确，就得判断一下。widget.cpp的代码修正如下：

#include "widget.h"
#include "ui_widget.h"
#include "enter.h"
//包含新界面的头文件
#include <QString>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    connect(ui->registBt,SIGNAL(clicked()),this,SLOT(registBt_clicked_slots()));
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_logoBt_clicked()
{
    //qDebug("logo success!");

    //定义username以及passwd，并获取账号以及密码
    QString userName = ui->userEdit->text();
    QString passwd = ui->passwdEdit->text();
    //获取到账号以及密码之后，对账号和密码进行判断,若正确则切换界面
    if(userName == "23456" && passwd == "67890")
    {
        //在登录的槽函数里面声明一个对象
        enter *et = new enter;
        et->setGeometry(this->geometry());
        et->show();
    }


}
//实现手动关联时声明的槽函数
void Widget::registBt_clicked_slots()
{
    qDebug("regist success!");
}

编译运行，编译结束之后，点击“登录”是没有反应的，但是当账户和密码输入正确之后，就可以进行界面切换啦。