Xamarin.Forms登录对话框及表单验证
程序员文章站
2022-03-10 19:43:56
微信公众号: "Dotnet9" ,网站: "Dotnet9" , "问题或建议,请网站留言" ; "如果您觉得Dotnet9对您有帮助,欢迎赞赏" 。 Xamarin.Forms登录系统 内容目录 1. 实现效果 2. 业务场景 3. 编码实现 4. 本文参考 5. 源码下载 1.实现效果 弹出登 ......
微信公众号:dotnet9,网站:dotnet9,;
如果您觉得dotnet9对您有帮助,欢迎赞赏。
xamarin.forms登录系统
内容目录
- 实现效果
- 业务场景
- 编码实现
- 本文参考
- 源码下载
1.实现效果
弹出登录窗口,输入验证
2.业务场景
- 主窗口弹出登录或者其他小窗口
- 表单验证
3.编码实现
3.1 添加nuget库
创建名为 “loginsystem” 的xamarin.forms项目,添加2个nuget库
- rg.plugins.popup 1.2.0.223:弹出框由该插件提供
- fluentvalidation 8.6.1:表单验证使用
3.2 工程结构
3.3 共享库中的mainpage
弹出登录窗口,mainpage.xaml中关键代码
<stacklayout verticaloptions="center"> <button text="登录" backgroundcolor="#2196f3" clicked="login_click"/> </stacklayout>
后台弹出登录窗口 mainpage.xaml.cs
private async void login_click(object sender, eventargs e) { await popupnavigation.instance.pushasync(new loginpage()); }
3.4 models中类文件
3.4.1 loginuser.cs
namespace loginsystem.models { class loginuser { public string username { get; set; } public string password { get; set; } } }
3.4.2 loginuservalidator.cs
使用fluentvalidation进行实体规则验证
using fluentvalidation; namespace loginsystem.models { class loginuservalidator : abstractvalidator<loginuser> { public loginuservalidator() { rulefor(x => x.username).notempty().withmessage("请输入账号") .length(5, 20).withmessage("账号长度在5到20个字符之间"); rulefor(x => x.password).notempty().withmessage("请输入密码"); } } }
3.4.3 notifypropertychanged.cs
封装inotifypropertychanged接口
using system; using system.collections.generic; using system.componentmodel; using system.runtime.compilerservices; namespace loginsystem.models { public class notifypropertychanged : inotifypropertychanged { protected bool setproperty<t>(ref t backingstore, t value, [callermembername]string propertyname = "", action onchanged = null) { if (equalitycomparer<t>.default.equals(backingstore, value)) return false; backingstore = value; onchanged?.invoke(); onpropertychanged(propertyname); return true; } #region inotifypropertychanged public event propertychangedeventhandler propertychanged; protected void onpropertychanged([callermembername] string propertyname = "") { var changed = propertychanged; if (changed == null) return; changed.invoke(this, new propertychangedeventargs(propertyname)); } #endregion } }
3.5 viewmodel中类文件
3.5.1 loginviewmodel.cs
登录视图的viewmodel,fluentvalidation的具体调用
using fluentvalidation; using loginsystem.models; using system; using system.threading.tasks; using system.windows.input; using xamarin.forms; namespace loginsystem.viewmodel { class loginviewmodel : notifypropertychanged { public inavigation navigation { get; set; } public loginuser loginuserins { get; set; } string username = string.empty; public string username { get { return username; } set { setproperty(ref username, value); } } string password = string.empty; public string password { get { return password; } set { setproperty(ref password, value); } } private readonly ivalidator _validator; public loginviewmodel() { _validator = new loginuservalidator(); } private icommand logincommand; public icommand logincommand { get { return logincommand ?? (logincommand = new command(executelogincommand)); } } private string validatemsg; public string validatemsg { get { return validatemsg; } set { setproperty(ref validatemsg, value); } } private async void executelogincommand(object obj) { try { if (loginuserins == null) { loginuserins = new loginuser(); } loginuserins.username = username; loginuserins.password = password; var validationresult = _validator.validate(loginuserins); if (validationresult.isvalid) { //todo 作服务端登录验证 validatemsg = "登录成功!"; } else { if (validationresult.errors.count > 0) { validatemsg = validationresult.errors[0].errormessage; } else { validatemsg = "登录失败!"; } } } catch (exception ex) { validatemsg = ex.message; } finally { } await task.fromresult(""); } } }
3.6 views中的视图文件
3.6.1 loginpage
登录窗口loginpage.xaml,引入弹出插件rg.plugins.popup,设置弹出框动画,绑定fluentvalidation验证提示信息 “validatemsg”
<?xml version="1.0" encoding="utf-8" ?> <pages:popuppage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:animations="clr-namespace:rg.plugins.popup.animations;assembly=rg.plugins.popup" xmlns:pages="clr-namespace:rg.plugins.popup.pages;assembly=rg.plugins.popup" mc:ignorable="d" x:class="loginsystem.views.loginpage"> <pages:popuppage.resources> <resourcedictionary> <color x:key="primary">#2196f3</color> </resourcedictionary> </pages:popuppage.resources> <pages:popuppage.animation> <animations:scaleanimation durationin="400" durationout="300" easingin="sinout" easingout="sinin" hasbackgroundanimation="true" positionin="center" positionout="center" scalein="1.2" scaleout="0.8" /> </pages:popuppage.animation> <grid verticaloptions="center" margin="40,20" heightrequest="400"> <frame cornerradius="20" backgroundcolor="white"> <stacklayout spacing="20" padding="15"> <image source="person.png" heightrequest="50" verticaloptions="end"/> <entry x:name="entryusername" text="{binding username}" placeholder="账号" placeholdercolor="#bababa" fontsize="16"/> <entry ispassword="true" text="{binding password}" placeholder="密码" placeholdercolor="#bababa" fontsize="16"/> <button margin="0,10,0,0" text="登录" backgroundcolor="{staticresource primary}" textcolor="white" heightrequest="50" verticaloptions="start" command="{binding logincommand}"/> <label text="{binding validatemsg}" textcolor="red" horizontaloptions="center"/> <label text="没有账号?请联系管理员。" horizontaloptions="center" fontsize="12"/> </stacklayout> </frame> </grid> </pages:popuppage>
后台loginpage.xaml.cs绑定viewmodel loginviewmodel,需要设置navigation到loginviewmodel的属性navigation,用于viewmodel中验证成功时返回主窗口使用
using loginsystem.viewmodel; using rg.plugins.popup.pages; using xamarin.forms.xaml; namespace loginsystem.views { [xamlcompilation(xamlcompilationoptions.compile)] public partial class loginpage : popuppage { loginviewmodel viewmodel = null; public loginpage() { if (viewmodel == null) { viewmodel = new loginviewmodel(); } this.bindingcontext = viewmodel; viewmodel.navigation = navigation; initializecomponent(); } } }
3.7 android项目中的mainactivity.cs
注册弹出插件
3.8 ios项目中的appdelegate.cs
注册弹出插件
4.本文参考
houssem dellai 大神的学习视频:popup in xamarin forms
fluent validation with mvvm in xamarin forms application
5.代码下载
文中代码已经全部提供
除非注明,文章均由 dotnet9 整理发布,欢迎转载。
转载请注明本文地址:
欢迎扫描下方二维码关注 dotnet9 的微信公众号,本站会及时推送最新技术文章