SwiftUI入门3提示弹窗,Tex

北京中科皮肤病医院 http://www.bdfyy999.com/m
置顶

菜鸟入门,各位大佬轻喷,如有谬误之处欢迎讨论建议,也欢迎各位道友与我同行

"不积跬步,无以至千里;不积小流,无以成江海"

继续

续接上篇文章,我们实现了一个简单的登陆界面,但是我们的表单提示,例如用户名等,是用的文字在按钮上方提示的

那我们如何去实现一个提示框用于提示呢?然后再自动聚焦到输入框中呢?

提示框的实现

//是否显示弹窗的标识

StateprivatevarshowAlert:Bool=false;//在登陆按钮之后放置弹窗Button("登陆"){//切换要显示AlertshowAlert.toggle();//省略一部分操作。。。}.alert(isPresented:showAlert){//这里isPresented绑定showAlert变量Alert(title:Text("提示"),//顶部的标题message:Text(res),//弹窗的内容,需要是一个Text,调用了我们之前定义的提示文本primaryButton:.default(Text("取消")){//第一个按钮是默认类型样式,显示取消//第一个按钮点击后的操作},secondaryButton:.destructive(Text("确定")){})}

以上的代码运行后得到如下结果

focus到TextField

以上的弹出框提示已经解决,那么接下来需要实现的是弹出之后哪一个字段没填,就让它自动聚焦,让用户可以直接填写那个字段添加如下的代码

//是否聚焦到用户名字段,注意

符号后面跟的是FocusState,不然用到focused里面会报错,并且不能设置默认值

FocusStateprivatevarfocusUser:Bool;HStack{Text("用户名")Spacer()TextField("请输入用户名",text:userName).multilineTextAlignment(.center)//给用户名字段的focused绑定focusUser变量.focused(focusUser)}.padding(.all)}///...省略部分代码Button("登陆"){//切换要显示AlertshowAlert.toggle();if(userName==""){//如果没填userName那么切换focusUser的值focusUser.toggle()}//省略一部分操作。。。}//。。。省略Alert部分

此处的代码实现了,如果在点击登陆按钮后用户名没有填,自动聚焦到用户名字段在本页面中,共有三个字段,可以定义三个变量的形式来进行判定聚焦但是如果有很多个字段的话就不合适了,我们可以使用枚举的方式来进行定义

以下贴出本页面完整的代码

importSwiftUIstructContentView:View{//用户名

StateprivatevaruserName:String="";//密码

StateprivatevarpassWord:String="";//验证码

Stateprivatevarcode:String="";//提示语

Stateprivatevarres:String="请输入。。。";//提示语的颜色,color类型

Stateprivatevarcolor:Color=.red;//是否显示弹窗标识

StateprivatevarshowAlert:Bool=false;//聚焦到哪一个字段?

FocusStateprivatevarfocus:FocusField?;//定义一个Hashable的枚举,因为focused的第二个参数需要一个hashable的参数enumFocusField:Hashable{casename;casepassword;casecode;caseclear;};varbody:someView{//整体纵向布局VStack{//页面标题,加粗,标题字体Text("登陆界面").fontWeight(.bold).font(.title)//分隔占位,有点类似html中flex的flex:1,具体怎么用之后再看Spacer()//一个横向布局,表单项名称-分隔占位-以及表单项//给一个.all的padding,不然不好看HStack{Text("用户名")Spacer()TextField("请输入用户名",text:userName).multilineTextAlignment(.center)//focused绑定focus变量,当该变量为.name时.focused(focus,equals:.name)}.padding(.all)HStack{Text("密码")Spacer()//securefield跟TextField基本类似,只是隐藏输入的内容SecureField("请输入密码",text:passWord).multilineTextAlignment(.center).focused(focus,equals:.password)}.padding(.all)HStack{Text("验证码")Spacer()TextField("请输入验证码",text:code).multilineTextAlignment(.center).focused(focus,equals:.code)}.padding(.all)Spacer()//提示语和button在一起Text(res).foregroundColor(color)Button("登陆"){showAlert.toggle();color=.red//button的点击事件action,做一个简单的判断//修改res的名称,以及res的颜色if(userName==""){res="请输入用户名!";return;}if(passWord==""){res="请输入密码!"return;}if(code==""){res="请输入验证码";return;}color=.green;res="登陆成功"//清空表单数据userName="";passWord="";code="";}.buttonStyle(.bordered).alert(isPresented:showAlert){Alert(title:Text("提示"),message:Text(res),primaryButton:.default(Text("取消")),secondaryButton:.destructive(Text("确定")){if(res=="请输入用户名!"){//没有用户名focus=.name}if(res=="请输入密码!"){focus=.password}if(res=="请输入验证码!"){focus=.code}if(res=="登陆成功"

res=="请输入。。。"){focus=.clear}})}}.padding()}}structContentView_Previews:PreviewProvider{staticvarpreviews:someView{ContentView()}}

运行得到以下的结果

总结

1.TextField的.focused(focus,.name)使用

2.enum的基本使用

.Alert的基本使用




转载请注明:http://www.aierlanlan.com/cyrz/8132.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了