Qt开发自学2_登陆界面的实现

20200511（一）登录

1）界面控件

1.1 按钮：【Push Button】显示为PushButton

1.2 标签：【Label】显示为TextLabel

1.3 输入框：【Line Edit】

所见即所得：账号、密码、登录、取消

2）布局：水平布局、垂直布局；窗体居中功能

先两两水平布局，然后把三者垂直布局，效果如下：

上图缺点：右上角放大窗体后，发现不够居中

解决办法：窗体居中功能需

添加占位符，即：垂直间隔器【Vertical Spacer】水平间隔器【Horizontal Spacer】

然后点击：栅格布局（Ctrl+G）

效果图如下：

缺点：栏目太长了

解决办法：先打破布局（B），左右各多加1个占位符

效果如下：

结果：居中效果比之前好一点

备注：如果觉得框还有点长，还可以在左右再加个水平间隔Horizontal Spacer。

 

按Tab聚焦切换功能：

鼠标点击数字，即可切换顺序

然后切换回Edit Widget状态就好了。

Tab聚焦效果见下图：

密码栏：echoMode: Password 

前后效果对比：Normal 和 Password

2）界面功能

对象名objectName，可修改，能让人望文生义。

line_Name

line_Passwd

Btn_Login    Btn_Cancel

 

练习1：用代码实现echoMode

mytest.cpp中对相应的对象名添加作用代码

练习2：实现【取消】功能

        *.ui文件中，右击按钮-->转到槽，clicked

//取消功能：关闭当前窗体 this->close();

快捷键F4，在mytest.h头文件中可以看到槽的声明。

      private slots:  void on_Btn_Cancel_clicked();

简单的打断点，调试模式，结果如下

文件结构：会生成2个文件夹

*.pro中的 TARGET 就是生成可执行文件*.cpp的名称。 

练习2：实现【登录】功能（设计：如果登录名和密码相同，则登录成功）

Qt中，类名即为头文件名。

#include <QDebug>    显示调试信息qDebug<<