[一、基础控件]9使用TextField文本输入框接收用户的数据
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号:山青咏芝
➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/)
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址: https://www.cnblogs.com/strengthen/p/16587202.html
➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
本文演示TextField的使用,TextField是一个用来显示可编辑文本界面的控件,
主要用于接收和显示来自用户的输入内容。
使用SwiftUI,我们不再需要通过手动编码的方式,来刷新界面上的元素。
通过绑定包装特性,即可实现界面元素和数据内容的实时绑定。
【SceneDelegate.swift】文件中的程序启动时的初始化方法。
1 func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) { 2 // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`. 3 // If using a storyboard, the `window` property will automatically be initialized and attached to the scene. 4 // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead). 5 6 // Use a UIHostingController as window root view controller 7 if let windowScene = scene as? UIWindowScene { 8 let window = UIWindow(windowScene: windowScene) 9 //由于ContentView新增了两个属性,所以需要修改此处的初始化方法 10 window.rootViewController = UIHostingController(rootView: ContentView(username: "", nickname: "")) 11 self.window = window 12 window.makeKeyAndVisible() 13 } 14 }
【ContentView.swift】文件
由于SwiftUI的所有视觉元素都遵循View协议,可以说所见即View,因此TextField也是一种View。
1 import SwiftUI 2 3 struct ContentView : View { 4 //添加一个字符串类型属性,用于接收用户在TextField中输入的内容。 5 //并在左侧添加@State关键词 6 //@State是指属性代理,它表示userName属性将和界面上的元素进行绑定。 7 //当属性的值发生变化时,SwiftUI会立即通知绑定的视觉元素进行内容的更新。 8 @State var username : String 9 @State var nickname : String 10 11 var body: some View { 12 13 VStack{ 14 //由于userName属性拥有@State标记, 15 //所以一旦userName属性的值发生变化,文本视图上的文字内容也会立即刷新 16 //当需要恢复同步预览时,Xcode会显示错误的提示信息。 17 //这是因为程序入口处的代码需要修改,点击错误信息,跳转到错误代码所在的位置。 18 Text("Your username is \(username)!") 19 //添加文本视图,用来显示nickName属性的实时变化 20 Text("Your nickname is \(nickname)!") 21 22 //添加一个TextField视图,并设置text属性为userName的值。 23 //请注意userName左侧的$美元符号,该符号是指Binding wrapper绑定包装,表示可以修改属性的值。 24 TextField("User Name", text: $username, onEditingChanged: { (value) in 25 //当用户修改文本输入框里的内容时,在控制台输出属性的值,实时观察属性的值的变化。 26 print("onEditingChanged:\(self.username)") 27 }) { 28 //当用户完成文本框里的输入时,在控制台输出userName属性的值。 29 print("onCommit:\(self.username)") 30 } 31 //设置文本输入框的值为圆角边框样式 32 .textFieldStyle(RoundedBorderTextFieldStyle()) 33 34 //添加文本输入框 35 //由于SwiftUI的所有视觉元素都遵循View协议,可以说所见即View, 36 //因此TextField也是一种View 37 TextField("Nick Name", text: $nickname) 38 //设置文本输入框的值为圆角边框样式 39 .textFieldStyle(RoundedBorderTextFieldStyle()) 40 } 41 //设置VStack视图的内边距,使TextField与屏幕两侧保持一定的距离 42 .padding() 43 } 44 } 45 46 #if DEBUG 47 struct ContentView_Previews : PreviewProvider { 48 49 static var previews: some View { 50 //由于给ContentView结构体添加了两个属性, 51 //所以需要更新PreviewProvider的属性的值, 52 //这样才可以在右侧的预览窗口显示正确的内容 53 ContentView(username: "", nickname: "") 54 } 55 } 56 #endif
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)