SwiftUI开发（二）

Text文本日期格式

首先给ContentView结构体，添加一个日期属性。

var now = date()   这是设置日期属性的初始值，是设备的当前日期
let formatter = DateFormatter()   初始化一个日期格式化类型的实例
formatter.dateStyle = .long   设置日期格式化对象的日期样式为长样式，依次显示日数、月份和年份的值
formatter.dateStyle = .full  修改日期格式为全日期，不仅显示年月日，还会显示星期。

Text("The time is：\(now, formatter：Self.dateFormatter)")   修改文本内容，并按照指定的日期格式，显示日期属性的值

Text-拼接文本

  文本视图中，可以调用加号扩展方法，拼接另一个文本视图；可以将两个文本视图进行拼接，并返回一个统一的文本视图。（注意使用加号扩展时“+”，加号要接一个空格隔开）

TextField

  TextField是一个用来显示可编辑文本界面的控件，主要用于接收和显示来自用户的输入内容

  首先，我们需要添加一个字符串类型属性，用于收容用户在TextField输入的内容，并在左侧添加**@State关键词**，@State是指属性代理，他表示username属性将和界面上的元素进行绑定。（当属性的值发生变化时，SwiftUI会立即通知绑定的视觉元素进行内容的更新）
@State var username : String

  由于给ContentView结构体添加了两个属性，所以需要更新PreviewProvider的属性的值，这样才能在右侧预览窗口显示正确的值。
ContentView(username: "", nickname: "")


  此时，完成这部分代码后，再点击右侧的Resume，左侧会提示出现错误，此时在左侧文件框的上部分，选择到警告的那一栏，我们可以在此部分找到问题的所在，双击问题点，会自动跳转到问题所在位置。

  然后在代码中找到问题，再点击Fix，软件即可自动进行更改语法，自行再进行部分修改，即可解决bug点。

  再在左侧栏上方选择到文件区，切换回ContentView.swift文件，再次点击Resume，就能在右侧预览区看见效果。
  接着添加一个TextField视图，并设置text属性为userName的值。（注意userName左侧的 $ 符号，该符号是指Binding wrapper绑定包装，表示可以修改属性的值）

**onEditingChanged**：是一个回调函数，该回调函数的入参是一个Bool值。当该TextField获得或失去焦点时，会触发函数的调用，而这个Bool值在获得焦点时为true，失去焦点时为false。

我们加入这个回调函数，实时观察属性的值的变化。

onCommit：是在用户点击键盘的Done时被触发。

  我们再加入这个函数，实现当用户完成文本框里的输入时，在控制台输出userName属性的值。

nickname的值输入和显示也是类似的操作实现。


.textFieldStyle(RoundedBorderTextFieldStyle())   设置TextField的样式为圆角边框样式

SecureField视图

  首先和TextField类似，先创建一个属性用于存储用户输入的密码，并在属性左侧添加一个@State属性代理标记，从而使属性和界面元素进行绑定。
SecureField("Your password", text: $password)   添加一个密文输入框，并设置指定位符。同时将它的text的值设置为password属性的值，并通过美元符号和password属性进行绑定包装。

print("Your password is \(self.password)!")   为了测试，再将用户的密码进行输出显示。

  剩下的操作与TextField相似，也需要去ContentView添加一个属性，所以要去修改程序入口处的代码。（去SceneDelegate.swoft文件中，添加；回到ContentView.swift中也要修改ContentView

Button按钮

首先添加一个简单的按钮，可以直接在左边代码中输入，也能在组件库里拖出来。

我先将按键在左侧写出来，写入按钮名称，再将其动作设置为输出一段话。

我再使用拖入组件，设置第二个按钮，先设置其动作，再写入按钮名称。

再设置第三个按钮，本次我们将图像视图和一个文本视图作为按钮的视图内容，并设置文本颜色和背景颜色

第四个按钮，设置动作、文本，再调整文本边框值，并设置背景颜色

第五个按钮，设置动作、文本，再调整文本边框值，并设置背景颜色，然后使用HStack实现垂直排列

  此时点击左上角的播放键，开启模拟，我们才能在下发的输出框看见效果（点击右边的Resume）

Button打开模态窗口

  先创建一个@State属性代理标记，来决定模态窗口的显示和隐藏；接着添加一个按钮控件，再调用Button控件的sheet方法，并设置isPresented的值为当前的布尔属性，当属性的值为真时，显示sheet中的内容。

  然后定义一个遵守View协议的指定名称的结构体，作为一个新的自定义图。先在结构体中添加一个字符串类型的属性，接着添加必需的body属性（视图中的所有元素都要放在body中）；再添加一个文本控件，显示文本即可。

回到上面的sheet中，在其内添加我们自定义的结构体。

  最后点击右边的Resume，再点击实时预览键（播放键），进入可互动的状态，就可实现点击按钮弹出模态窗口。