登录框效果实现

基本界面：

提示框效果

基本逻辑梳理

提示逻辑

页面布局

①拖入矩形，搭建基本的外部登录提示框

提示框外部构建

②放入一个文本标签，作为提示文字，起名为tips，并清空文本标签内容，后期通过登录按钮对文本编辑。

输入框搭建

③搭建用户名框和密码框。加入矩形，起名border1，作为输入框提示的的颜色变化框。在颜色框内，放入文本框，起名yonghuming，作为用户输入的地方，注意，隐藏文本框的边框。

image.png

因为用户名框的效果和密码框的效果一致，此时，不用着急新建密码框。只需要等用户名框的交互全部搞定后直接复制即可。

④加入登录button，基本框架搭建完毕，大功告成。

登录框基本框架

交互设置

①用户名
用户名框会存在未输入、输入错误、输入正确三种情况。
从交互来说，输入中，文本框获取光标、颜色变化框边框为蓝色；
未输入时，文本框失去光标、颜色为灰色；
点击登录按钮后，若输入错误，则变化框颜色为红色。

将颜色变化框添加动态面板，设置三种状态，每种状态中，分别将边框的颜色进行设置为（灰色、红色、蓝色）

颜色框的设置

设置交互效果

获得焦点/失去焦点的效果设置

同理密码的颜色框可直接复制，并改名为border2

②登录按钮

登录交互事件