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

26岁的学习随笔

已于 2022-05-19 09:29:50 修改

阅读量9.2k

点赞数 46

分类专栏： matlab app designer 文章标签： matlab app designer 封面制作基础学习

于 2022-05-16 15:12:45 首次发布

本文链接：https://blog.csdn.net/fair_li/article/details/124800309

版权

matlab app designer 专栏收录该内容

5 篇文章 5 订阅

订阅专栏

0. 写作初衷

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

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

1. 成品展示

视频

2. 原代码

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

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

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

3.1 设计篇

点击APP
点击“设计App”
点击“空白App”
点击一下空白页面
设置“标识符”：更改名字（Name）和图标（Icon）

注：此步骤完成之后，可以运行一下，保存该app，并查看效果图（如下），然后关闭运行的app，进入下一步。
从组件库拖拽一个“图像”到设计视图
单击“Browse”，插入图片。（光标停在图像控件上才会显示“Browse”）
调整图像大小

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

9. 在界面中插入Logo，方法同步骤6，7，8

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

注：运行后，界面如下。
设置提醒，方法同步骤9，10
设置账号输入框：拖动“编辑字段（文本）”
删去“Edit Field”（要有间隔的点击两下，然后delete），并对矩形框大小进行合适地调整
选中空白框，复制粘贴，并调整位置
设计提示：在两个空白框中插入“账号”和“密码”，方法同步骤9，10，也可以把“请登录您的账号”复制过来。
插入登录按钮：拖动“状态按钮”到合适位置，并编辑文字和调整格式
插入登录提醒框，方法同9，10，并删除所有文本。
对控件进行中线对齐：先选中需要对齐的控件，然后点击“对齐”中的“居中对齐”（快捷键：Ctrl+Alt+2）。
对一些控件进行组合，方便后面调整间距：同时选择需要组合的控件，然后右击进行组合设置。（本设计中，组合了3对控件）
等间距分布：先把头尾控件相对于页面的位置固定到合适位置，然后选中所有需要调整的控件，利用"间距"中”垂直应用“进行设置。
把组合的控件再全部取消组合（方便后续点击控件直接在组件浏览器中显示控件名称）

效果图
**加粗样式**

3.2 功能篇

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

注：当输入密码时，隐藏“密码”提醒，操作步骤相同，不再进行介绍。
功能演示：
在这里插入图片描述
实现步骤：

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

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

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

功能演示：
在这里插入图片描述
方法说明：
将输入的密码在程序内部使用一个变量储存起来，检测密码有多少位，直接在密码框输出多少个“*”。

实现步骤：

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

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

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

            % 保存密码
            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

密码星号表示

            % 密码星号表示
            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 判断账号和密码是否匹配

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

实现步骤：

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

            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