通过制作一个登录界面学习matlab app designer的基础使用方法 |
您所在的位置：网站首页 › nuaaportal登录界面 › 通过制作一个登录界面学习matlab app designer的基础使用方法 |
通过制作一个登录界面学习matlab app designer的基础使用方法
|
目录
0. 写作初衷1. 成品展示2. 原代码3. 详细步骤（从打开MATLAB开始）3.1 设计篇3.2 功能篇3.2.1 当输入账号时，隐藏“账号”提醒3.2.2 当输入密码时，把文本转化为“*”3.2.3 判断账号和密码是否匹配
0. 写作初衷
通过实现一个简单的任务学习app designer的基础使用方法提供一个满足日常需要的登录界面
注：大家需要更多app designer的进阶技能，可以通过下面链接寻找资源。 原作者youtube主页国内搬运视频 1. 成品展示 视频
2. 原代码
百度云盘 链接：https://pan.baidu.com/s/1EddtaDXmklFvqTrcZVrLlQ 提取码：1vol 3. 详细步骤（从打开MATLAB开始）注：演示使用的MATLAB版本为2021a 3.1 设计篇点击APP 点击“设计App” 点击“空白App” 点击一下空白页面 设置“标识符”：更改名字（Name）和图标（Icon） 注：此步骤完成之后，可以运行一下，保存该app，并查看效果图（如下），然后关闭运行的app，进入下一步。 从组件库拖拽一个“图像”到设计视图 单击“Browse”，插入图片。（光标停在图像控件上才会显示“Browse”） 调整图像大小 插入标题：拖动“标签”到合适位置 编辑标题内容，并调整为合适的格式。（需要单击一下“Label”，然后进行设置） 设置提醒，方法同步骤9，10 设置账号输入框：拖动“编辑字段（文本）” 删去“Edit Field”（要有间隔的点击两下，然后delete），并对矩形框大小进行合适地调整 选中空白框，复制粘贴，并调整位置 设计提示：在两个空白框中插入“账号”和“密码”，方法同步骤9，10，也可以把“请登录您的账号”复制过来。 插入登录按钮：拖动“状态按钮”到合适位置，并编辑文字和调整格式 插入登录提醒框，方法同9，10，并删除所有文本。 对控件进行中线对齐：先选中需要对齐的控件，然后点击“对齐”中的“居中对齐”（快捷键：Ctrl+Alt+2）。 对一些控件进行组合，方便后面调整间距：同时选择需要组合的控件，然后右击进行组合设置。（本设计中，组合了3对控件） 等间距分布：先把头尾控件相对于页面的位置固定到合适位置，然后选中所有需要调整的控件，利用"间距"中”垂直应用“进行设置。 把组合的控件再全部取消组合（方便后续点击控件直接在组件浏览器中显示控件名称） 效果图 注：当输入密码时，隐藏“密码”提醒，操作步骤相同，不再进行介绍。 功能演示：  将“账号”提醒对应的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
|
注：此步骤完成之后，可以运行查看效果图（如下），然后关闭运行的app，进入下一步。 
9. 在界面中插入Logo，方法同步骤6，7，8 
注：运行后，界面如下。 
注：运行后，界面如下。 
实现步骤：
方法说明： 将输入的密码在程序内部使用一个变量储存起来，检测密码有多少位，直接在密码框输出多少个“*”。【本文地址】
今日新闻 |
推荐新闻 |