通过制作一个登录界面学习matlab app designer的基础使用方法

0. 写作初衷

• 通过实现一个简单的任务学习app designer的基础使用方法
• 提供一个满足日常需要的登录界面

注：大家需要更多app designer的进阶技能，可以通过下面链接寻找资源。

• 原作者youtube主页
• 国内搬运视频

1. 成品展示

• 视频
  

2. 原代码

百度云盘
链接：https://pan.baidu.com/s/1EddtaDXmklFvqTrcZVrLlQ
提取码：1vol

3. 详细步骤（从打开MATLAB开始）

注：演示使用的MATLAB版本为2021a

3.1 设计篇

1. 点击APP
   

2. 点击“设计App”
   

3. 点击“空白App”
   

4. 点击一下空白页面
   

5. 设置“标识符”：更改名字（Name）和图标（Icon）
   

   注：此步骤完成之后，可以运行一下，保存该app，并查看效果图（如下），然后关闭运行的app，进入下一步。
   

6. 从组件库拖拽一个“图像”到设计视图
   
   

7. 单击“Browse”，插入图片。（光标停在图像控件上才会显示“Browse”）
   

8. 调整图像大小
   
   注：此步骤完成之后，可以运行查看效果图（如下），然后关闭运行的app，进入下一步。
   
   9. 在界面中插入Logo，方法同步骤6，7，8
   
   注：运行后，界面如下。
   

9. 插入标题：拖动“标签”到合适位置
   
   

10. 编辑标题内容，并调整为合适的格式。（需要单击一下“Label”，然后进行设置）
    
    注：运行后，界面如下。
    

11. 设置提醒，方法同步骤9，10
    

12. 设置账号输入框：拖动“编辑字段（文本）”
    
    

13. 删去“Edit Field”（要有间隔的点击两下，然后delete），并对矩形框大小进行合适地调整
    

14. 选中空白框，复制粘贴，并调整位置
    

15. 设计提示：在两个空白框中插入“账号”和“密码”，方法同步骤9，10，也可以把“请登录您的账号”复制过来。
    

16. 插入登录按钮：拖动“状态按钮”到合适位置，并编辑文字和调整格式
    
    

17. 插入登录提醒框，方法同9，10，并删除所有文本。
    

18. 对控件进行中线对齐：先选中需要对齐的控件，然后点击“对齐”中的“居中对齐”（快捷键：Ctrl+Alt+2）。
    
    

19. 对一些控件进行组合，方便后面调整间距：同时选择需要组合的控件，然后右击进行组合设置。（本设计中，组合了3对控件）
    
    
    
    

20. 等间距分布：先把头尾控件相对于页面的位置固定到合适位置，然后选中所有需要调整的控件，利用"间距"中”垂直应用“进行设置。
    
    

21. 把组合的控件再全部取消组合（方便后续点击控件直接在组件浏览器中显示控件名称）

效果图

3.2 功能篇

3.2.1 当输入账号时，隐藏“账号”提醒

注：当输入密码时，隐藏“密码”提醒，操作步骤相同，不再进行介绍。
功能演示：

实现步骤：

1. 选中”“账号”对应的空白框，右击，选择“ing”回调。（app运行后，如果空白框得到输入，程序内部则会转到“ing”回调代码）
2. 将“账号”提醒对应的label文本置空

        function EditFieldValueChanging(app, event)
            changingValue = event.Value;
            app.Label_3.Text = ' '; % 置空Label_3的文本
        end

3.2.2 当输入密码时，把文本转化为“*”

功能演示：

方法说明：
将输入的密码在程序内部使用一个变量储存起来，检测密码有多少位，直接在密码框输出多少个“*”。

实现步骤：

1. 定义全局变量，用来储存保存的密码：在“代码视图”界面，利用“属性”中的“私有属性”完成定义。
   

    properties (Access = private)
        password % 保存密码
    end

2. 进入密码框的“ing”回调
   
3. 保存密码

            % 保存密码
            if size(changingValue,2)>1 % 密码框中的字符多于1个
                if size(changingValue,2)-size(app.password,2) == 1     % 手动输入了1个字符
                    app.password = [app.password,changingValue(:,end)];
                elseif size(changingValue,2)-size(app.password,2) > 1  % 粘贴输入了多个字符
                    app.password = changingValue;
                else % 删除了字符
                    app.password = app.password(1,1:size(changingValue,2));
                end
            elseif size(changingValue,2) == 0 % 密码框中的字符为0个
                    app.password = [];
            elseif size(changingValue,2) == 1 % 密码框中的字符为1个
                    app.password = [app.password,changingValue(:,end)];
            end

4. 密码星号表示

            % 密码星号表示
            if size(changingValue,2)>1
                s = '*';
                for i = 2:size(changingValue,2)
                    s = [s,'*'];
                end
                app.EditField_2.Value = s;
                elseif size(changingValue,2)==1
                    app.EditField_2.Value = '*';
            end

结束

3.2.3 判断账号和密码是否匹配

方法说明：
在程序内提前设置好账号和密码，直接和输入的账号和密码做字符匹配。

实现步骤：

1. 进入“登录”控件的回调
   
2. 字符匹配，并显示匹配结果

            if strcmp(app.Account.Value,'郑州大学') && strcmp(app.password,'123456')
                app.Label_5.FontColor = 'black';  % 设置Label_5的字体颜色
                app.Label_5.Text = '登录成功';    % 在Label_5中显示
                pause(0.5)  
            else
                app.Label_5.FontColor = 'red';
                app.Label_5.Text = '账号或密码错误，请重试';
                pause(5)
                app.Label_5.Text = ' ';   % 提示错误5秒钟，然后清除提醒
            end