敢教日月换新天。为有牺牲多壮志,

[一、基础控件]9使用TextField文本输入框接收用户的数据

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号:山青咏芝
➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址: https://www.cnblogs.com/strengthen/p/16587202.html
➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

热烈欢迎,请直接点击!!!

进入博主App Store主页,下载使用各个作品!!!

注:博主将坚持每月上线一个新app!!!

本文演示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
复制代码

 

posted @   为敢技术  阅读(52)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示
西雅图
10°
22:15发布
西雅图
22:15发布
10°
西南风
5级
空气质量
相对湿度
85%
今天
大雨
6°/10°
周三
多云
3°/15°
周四
4°/16°