嵌入式图形界面实验三

一木 455 views 0

实验二QQ登录对话框及添加菜单图标

实验目标

  • 掌握控件的使用
  • 掌握信号与槽机制
  • 掌握菜单栏的实现

实验内容

  • 【实验2-1】Qt5开发环境搭建
  • 【实验2-2】Qt多窗口程序的编写

【实验2-1QQ登录对话框

知识点回顾

  • Qt常用控件

功能描述

  • 实现QQ登录过程。

实验步骤

一、使用设计模式创建界面

1.新建Qt Widgets Application,项目名称为login,类名和基类保持MainWindow和QMainWindow不变。

2.完成项目创建后,向项目中添加新的Qt设计师界面类,模板选择Dialogwithout Buttons,类名更改为LoginDialog。完成后向界面上添加两个标签Label、两个行编辑器Line Edit和两个按钮Push Button,设计界面如下图2- 1所示:

图2- 1 登录界面

3.先选中用户名后面的行编辑器部件,然后在属性编辑器中将其objectName属性更改为usrLineEdit,如下图所示。下面依次更改其他部件的objectName属性,密码后面的行编辑器为pwdLineEdit,登录按钮为loginBtn,退出按钮为exitBtn,如下图2- 2所示:

图2- 2 修改属性值

4.下面使用另外一种信号和槽的关联方法来设置退出按钮。在设计模式下方的信号和槽编辑器(Signals & Slots Editor)中,先点击左上角的绿色加号添加关联,然后选择发送者为exitBtn,信号为clicked(),接收者为LoginDialog,槽为close()。如下图所示。这样,当单击退出按钮时,就会关闭登录对话框,如下图2- 3所示:

图2- 3 信号与槽

5.右击登录按钮,在弹出的菜单中选择“转到槽…”,然后选择clicked()信号并确定。转到相应的槽以后,添加函数调用:

【代码2- 1】 on_loginBtn_clicked

void LoginDialog::on_loginBtn_clicked()

{

accept();

}

6.下面到main.cpp文件,更改内容如下:

【代码2- 2】 main.cpp

#include "mainwindow.h"

#include "logindialog.h"

int main(intargc, char *argv[])

{

QApplication a(argc, argv);

MainWindow w;

LoginDialog dlg;

if (dlg.exec() == QDialog::Accepted)

{

w.show();

return a.exec();

}

else return 0;

}

7.这时运行程序,按下退出按钮会退出程序,按下登录按钮会关闭登录对话框,并显示主窗口。

二、登录设置

1.下面添加代码来实现使用用户名和密码登录,这里只是简单将用户名和密码设置为了固定的字符串,如果以后学习了数据库,还可以通过读取数据库来获取用户名和密码。到logindialog.cpp文件中将登录按钮的单击信号对应的槽的代码更改为:

【代码2- 3】 on_loginBtn_clicked

void LoginDialog::on_loginBtn_clicked()

{

// 判断用户名和密码是否正确,

// 如果错误则弹出警告对话框

if(ui->usrLineEdit->text() == tr("yafeilinux") &&

ui->pwdLineEdit->text() == tr("123456"))

{

accept();

} else {

QMessageBox::warning(this, tr("警告!"),

tr("用户名或密码错误!"),

QMessageBox::Yes);

}

}

Qt中的QMessageBox类提供了多种常用的对话框类型,比如这里的警告对话框,还有提示对话框、问题对话框等。这里使用了静态函数来设置了一个警告对话框,这种方式很便捷,其中的参数依次是:this表明父窗口是登录对话框、窗口标题、界面显示的内容和最后要显示的按钮,这里使用了一个Yes按钮。注意还要添加该类的头文件包含,即:#include 。

2.下面运行程序,如果输入用户名为“yafeilinux”,密码为“123456”,那么可以登录,如果输入其他的字符,则会弹出警告对话框,如下图2- 4所示:

图2- 4 错误提示

3.对于输入的密码,我们常见的是显示成小黑点的样式。下面点击logindialog.ui文件进入设计模式,然后选中界面上的密码行编辑器,在属性编辑器中将echoMode属性选择为Password。这时再次运行程序,可以看到密码显示已经改变了。如下图2- 5所示:

图2- 5 登录

当然,除了在属性编辑器中进行更改,也可以在loginDialog类的构造函数中使用setEchoMode(QLineEdit::Password)函数来设置。

4.在行编辑器的属性栏中还可以设置占位符,就是没有输入信息前的一些提示语句。例如将密码行编辑器的placeholderText属性更改为“请输入密码”,将用户名行编辑器的更改为“请输入用户名”,运行效果如下图2- 6所示:

图2- 6 开始登录界面

5.对于行编辑器,还有一个问题就是,比如我们输入用户名,在前面添加了一个空格,这样也可以保证输入是正确的,这个可以使用QString类的trimmed()函数来实现,它可以去除字符串前后的空白字符。下面将logindialog.cpp文件中登录按钮单击信号槽函数中的判断代码更改为:

【代码2- 4】 logindialog.cpp

if(ui->usrLineEdit->text().trimmed() == tr("yafeilinux")

&&ui->pwdLineEdit->text() == tr("123456"))

这时运行程序,已经实现相应的功能了。

6.最后,当登录失败后,我们希望可以清空用户名和密码信息,并将光标定位到用户名输入框中。这个可以通过在判断用户名和密码错误后添加相应的代码来实现:

【代码2- 5】 logindialog.cpp

else

{

QMessageBox::warning(this, tr("警告!"),tr("用户名或密码错误!"),

QMessageBox::Yes);

// 清空内容并定位光标

ui->usrLineEdit->clear();

ui->pwdLineEdit->clear();

ui->usrLineEdit->setFocus();

}

下面运行程序,大家可以测试一下效果。

7.这里再补充一个技巧,就是Qt Creator的代码补全功能。Qt Creator拥有强大的代码补全功能,比如输入一个关键字时,只要输入前几个字母,就会弹出相关的关键字选择列表;输入完一个对象,然后输入点以后,就会弹出该对象所有可用的变量和函数。这里要说的是,当输入一个比较长得函数或变量名时,可以通过其中的几个字母来定位。比如说,要输入前面讲到的setFocus()函数,那么只需输入首字母s和后面的大写字母F即可,这样可以大大缩减提示列表,如果还没有定位到,那么可以输入F后面的字母o,定位到需要的函数后,直接按下回车键即可完成输入。如下图所示。

还可以使用ctrl + 空格键来强制代码补全,不过这个一般会和我们的输入法的快捷键冲突,大家可以更改输入法的快捷键,也可以在Qt Creator中的工具→选项→环境→键盘中来设置快捷键。

三、纯代码编写

  1. 新建Qt Widgets Application,项目名称为login1,在类信息页面保持类名和基类为MainWindow和QMainWindow不变,取消选择创建界面选项,如下图2- 7所示:

图2- 7 创建项目

这里依然创建了Qt Widgets应用,但是没有使用界面文件,这样就需要使用代码来实现界面。当然,如果有的童鞋说,纯代码编写就得是所有文件都自己写,如果你也有这种BT想法,那么就老老实实创建一个空项目,然后往里面添加main.cpp等文件吧,如果真想回到古时候,还可以参考《Qt Creator快速入门》第2章的后半部分,上面还讲到了使用记事本和命令行来编写编译程序,满足你的自虐心理。

  1. 创建登录对话框类。往项目中添加新文件,模板选择C++分类中的C++ Class,如下图2- 8所示:

图2- 8 选择模板

在类定义页面,将类名设置为LoginDialog,基类选择Custom定制,然后手动设置为QDialog。如下图2- 9所示:

图2- 9 选择类名

设置完成后,先打开logindialog.h文件,将其内容修改如一下代码所示:

【代码2- 6】 logindialog.h

#ifndef LOGINDIALOG_H

#define LOGINDIALOG_H

#include <QDialog>

class QLabel;    //类的前置声明

classQLineEdit;

classQPushButton;

classLoginDialog : public QDialog

{

Q_OBJECT

public:

LoginDialog(QWidget *parent = 0);

//~LoginDialog();

private:

QLabel * usrLabel;

QLabel * pwdLabel;

QLineEdit * usrLineEdit;

QLineEdit * pwdLineEdit;

QPushButton * loginBtn;

QPushButton * editBtn;

};

#endif // LOGINDIALOG_H

这里先添加了QDialog类的头文件,然后前置声明了QLabel、QLineEdit和QPushButton类,这是因为在下面只是定义了这些类对象的指针,并不需要该类完整的定义,所以可以将它们的包含语句放到源文件中进行。在LoginDialog类声明的开始需要添加Q_OBJECT宏才能使用信号和槽等元对象系统功能。在private部分定义了一些界面上需要的部件对象的指针。下面到logindialog.cpp文件中对这些部件对象进行初始化,其内容如以下代码所示:

【代码2- 7】 logindialog.cpp

#include "logindialog.h"

#include<QLabel>

#include<QPushButton>

#include<QLineEdit>

#include<QMessageBox>

LoginDialog::LoginDialog(QWidget *parent)

: QDialog(parent)

{

usrLabel = new QLabel(this);

usrLabel->move(70,80);

usrLabel->setText("用户名:");

usrLineEdit = new QLineEdit(this);

usrLineEdit->move(140,80);

usrLineEdit->setPlaceholderText("请输入用户名:");

 

pwdLabel = new QLabel(this);

pwdLabel->move(70,130);

pwdLabel->setText("密码:");

pwdLineEdit = new QLineEdit(this);

pwdLineEdit->move(140,130);

pwdLineEdit->setPlaceholderText("请输入密码:");

 

loginBtn = new QPushButton(this);

loginBtn->move(50,200);

loginBtn->setText("登录");

editBtn = new QPushButton(this);

editBtn->move(210,200);

editBtn->setText("退出");

}

这里定义了构造函数和析构函数,在构造函数中对界面部件进行了初始化,设置了它们的位置及要显示的文本,这些代码实现的效果与前面在设计模式设置部件实现的效果是一样的。简单举例:move(70, 80)就是将部件左上角的坐标设置为(70, 80),这个坐标是父窗口部件的,这里就是登录对话框,对话框的左上角是(0, 0)点;setText()就是设置显示文本;setPlaceholderText()是设置占位符文本。

下面打开main.cpp文件,在其中使用登录对话框,更改代码如以下代码所示:

【代码2- 8】 main.cpp

#include "logindialog.h"

#include "mainwindow.h"

#include <QApplication>

int main(intargc, char *argv[])

{

QApplicationa(argc, argv);

MainWindow w;

LoginDialog dlg;

 

if(dlg.exec()==QDialog::Accepted)

{

w.show();

}

return a.exec();

}

这里的代码与前面例子中是一样的。现在运行程序,已经可以显示出登录界面了。

出现的一个问题就是屏蔽掉//~LoginDialog();

3、实现功能

下面来实现两个按钮的功能,在Qt中,按钮按下功能是通过信号和槽来实现的,在前面的内容中我们已经看到三种方式来关联信号和槽了,下面来看下怎么使用代码自定义槽,然后手动进行关联。

首先在logindialog.h文件的类声明的最后添加如下代码:

【代码2- 9】 main.cpp

private slots:

void login();

这样便声明了一个槽,其实槽就是一个函数,一般使用slots关键字,但在Qt 5新关联语法下也可以不使用该关键字,那么就可以像声明一般函数一样来声明槽,具体的内容我们将在后面章节中讲解,这里大家有个印象即可,一般建议使用slots关键字。

下面打开logindialog.cpp文件,在构造函数的最后添加如以下所示的两行代码:

【代码2-10】 main.cpp

connect(loginBtn,SIGNAL(clicked(bool)),this,SLOT(login()));

connect(editBtn,SIGNAL(clicked(bool)),this,SLOT(close()));

这里的connect()函数就是用来关联信号和槽的,简单来说,第一个参数就是发射信号的部件,比如这里的loginBtn按钮;第二个参数是发射的信号,比如这里是QPushButton类的单击clicked()信号;第三个参数是接受信号的部件,比如这里是this即本部件也就是LoginDialog;第四个参数是要执行的槽,比如这里是LoginDialog类的login()。使用connect()函数就相当于以前在设计模式进行的关联设置。

下面在logindialog.cpp文件最后添加槽的定义。

【代码2-11】 logindialog.cpp

LoginDialog::login()

{

if(usrLineEdit->text().trimmed()=="yonghuming"

&&pwdLineEdit->text().trimmed()=="mima")

{

accept();

}else

{

QMessageBox::warning(this,"警告!","用户名和密码错误!",QMessageBox::Yes);

//情况内容并定位光标

usrLineEdit->clear();

pwdLineEdit->clear();

usrLineEdit->setFocus();

}

}

这里与前面示例中的代码是一样的,只不过usrLineEdit等部件调用不再需要使用ui对象。现在可以运行程序,已经实现了与使用设计模式相同的功能(密码显示样式可以在构造函数中使用pwdLineEdit->setEchoMode(QLineEdit::Password)来设置)。到这里,如果是初学者,可能会有很多很多疑问,这些疑问一时半会也讲不完,即便是这里都讲到,大家也理解不了,所以还是多动手敲代码,多练习,然后跟着教程往后学习,疑惑会越来越少的。

实验现象

编译运行程序,输入用户名和密码,点击登录会进入登录界面,输入错误则提示错误信息

【实验2-2】添加菜单图标

知识点回顾

  • 菜单类的使用
  • 信号与槽

功能描述

使用Qt完成窗口的菜单栏实现。

实验步骤

一、添加主窗口菜单

1.新建Qt Widgets Application,项目名称为mymainwindow,基类选择QMainWindow,类名为MainWindow。

2.创建完项目后,双击mainwindow.ui文件进入设计模式。在这里可以看到界面左上角的“在这里输入”,我们可以在这里添加菜单。双击“在这里输入”,将其更改为“文件(&F)”,然后按下回车键,效果如下图2- 10所示。这里的&F表明将菜单的快捷键设置为了Alt+ F,可以看到,实际的显示效果中&符号是隐藏的。

图2- 10 菜单

3.同样的方法,我们在文件菜单中添加“新建(&N)”子菜单,效果如下图2- 11所示。菜单后面的那个加号图标是用来创建下一级菜单的。(PS:菜单中如果无法输入中文,可以从别处复制粘贴)

图2- 11 新建菜单

二、添加菜单图标

1.Qt中的一个菜单被看做是一个Action,我们在下面的Action编辑器(Action Editor)中可以看到刚才添加的“新建”菜单,如下图2- 12所示。

图2- 12 Action编辑器

2.双击该条目,会弹出编辑动作对话框,这里可以进行各项设置,比如我们可以设置菜单项的快捷键,点击一下Shortcut后面的行编辑器,然后按下键盘上的Ctrl + N,这样就可以将该菜单项的快捷键设置为Ctrl + N。如下图2- 13所示。那么大家可能会问,既然该菜单项的快捷键是这么设置的,那么菜单项名称“新建(N)”中的N是什么呢?这个可以被称为加速键,就是只有当文件菜单处于激活(显示)状态时,按下N键才会执行新建菜单的功能。

图2- 13 编辑界面

3.在编辑动作对话框中的“图标”后面的 黑色箭头下拉框可以选择使用资源还是使用文件来最为图标,如果使用文件的话,那么就可以直接在弹出的文件对话框中选择本地磁盘上的一个图标文件。下面我们来讲述使用资源的方式,如果直接点击这个按钮就是默认的使用资源。现在我们先按下编辑动作对话框的OK按钮关闭它。

三、添加资源文件

1.Qt中可以使用资源文件将各种类型的文件添加到最终生成的可执行文件中,这样就可以避免使用外部文件而出现的一些问题。而且,在编译时Qt还会将资源文件进行压缩,我们可能发现生成的可执行文件比我们添加到其中的资源文件还要小。

2.我们向项目中添加新文件,模板选择Qt分类中的Qt资源文件(Qt Resource File)。如下图2- 14所示。然后将名称设置为myicon。

图2- 14 选择模板

3.添加完文件后会自动打开该资源文件,需要先添加前缀,点击“添加”按钮,然后选择“添加前缀”,默认的前缀是“/new/prefix1”,这个可以随意修改(不要出现中文字符),我们这里因为要添加图片,所以修改为“/myimages”。然后再按下添加按钮来添加文件,这里最好将所有要用到的图片放到项目目录中。比如这里在项目目录中新建了一个images文件夹,然后将需要的图标文件粘贴进去。添加完文件后,如下图2- 15所示。

图2- 15 资源文件

4.当添加完资源后,一定要按下Ctrl + S来保存资源文件,不然在后面可能无法显示已经添加的资源。

四、使用资源文件

1.我们重新回到设计模式打开新建菜单的编辑动作对话框,然后添加图标。在打开的选择资源对话框中,第一次可能无法显示已经存在的资源,可以按下左上角的绿箭头来更新显示。效果如下所示。

图2- 16 选择资源

2.我们点击这里需要的新建图标filenew.png,按下确定即可。现在按下Ctrl + R运行程序,效果如下图2- 17所示。

图2- 17 添加菜单

四、使用代码来添加菜单和图标

1.对于添加的资源文件,在项目源码目录中可以看到,即myicons.qrc,使用写字板程序将其打开,可以发现它其实就是一个XML文档:

【代码2-11】 myicons.qrc

<RCC>

<qresourceprefix="/myimages">

<file>images/filenew.png</file>

<file>images/fileopen.png</file>

<file>images/filesave.png</file>

<file>images/filesaveas.png</file>

<file>images/find.png</file>

</qresource>

</RCC>

2.前面在设计模式添加了菜单项和图标,下面我们使用代码再来添加一个菜单项,并为其设置图标。在编辑模式打开mainwindow.cpp文件,并在构造函数中添加如以下所示代码:

【代码2-12】 mainwindow.cpp

 

#include<QAction>

#include<QMenu>

#include<QMenuBar>

#include <QIcon>

#include<QToolBar>//工具栏

 

MainWindow::MainWindow(QWidget * parent):

QMainWindow(parent),ui(new ui::MainWindow

{

ui->setupUi(this);

//创建新的动作

QAction * openAction = new QAction((“&open”),this);

//添加图标

QIcon icon(":/myimages/images/xiaomi.ico");

openAction->setIcon(icon);

//设置快捷键

openAction->setShortcut(QKeySequence("Ctrl+0"));

//在文件菜单中设置新的打开动作

ui->menu_F->addAction(openAction);

//创建新的编辑菜单

QMenu * menu_E = ui->menuBar->addMenu(“编辑(&E)”);

QIcon icon2(":/myimages/images/xinliang.ico");

openAtion ->setIcon(icon2);

openAtion ->setShortcut(QKeySequence(“Ctrl+F”));

menu_E->addAction(openAction);

}

这里添加图标时,就使用了资源文件中的图标。使用资源文件,需要在最开始使用冒号,然后添加前缀,后面是文件的路径。在代码中使用“文件菜单”,就是使用其objectName。主窗口上的菜单都是在菜单栏menuBar上的,因为这里使用了设计模式,所以可以通过ui->menuBar来获取菜单栏,菜单栏是QMenuBar类对象。如果不使用设计模式而使用纯代码创建项目,那么可以直接在MainWindow类中使用menuBar()方法来获取菜单栏。菜单栏上可以通过addMenu()来添加新的菜单,而菜单中可以使用QAction来创建菜单项。现在可以运行程序查看效果。

 

实验现象

运行程序,出现带有工具栏的窗口。

 

实验报告和成果物

链接:https://pan.baidu.com/s/1-p9eHpvwxgjWAfNxvSf0AA
提取码:upv4
复制这段内容后打开百度网盘手机App,操作更方便哦

 

打赏
发表评论 取消回复
表情 图片 链接 代码

分享
微信
微博
QQ