我们正在构建一个账单分割应用程序，这意味着用户需要能够输入他们的账单花费，多少人分担，以及他们想留下多少小费。
希望您已经可以看到这意味着我们需要添加三个@State属性，因为我们希望用户在我们的应用程序中输入三个数据。
因此，首先将这三个属性添加到ContentView结构体中：
@State private var checkAmount = ""
@State private var numberOfPeople = 2
@State private var tipPercentage = 2
如您所见，这为账单金额提供了空字符串，为人数提供了默认值2，为小费百分比提供了默认值2。
你可能想知道为什么我们要用字符串来表示账单金额，而显然Int或Double更有效。原因是我们别无选择：SwiftUI必须使用字符串来存储TextField输入值。
有两个人作为账单支票的默认值是明智的——这在很多时候是不对的，但这仍然是一个很好的默认值。但小费比例为2似乎有些奇怪：我们真的打算留下2%的小费吗？
好吧，不是的。我们在这里使用2，因为我们将使用它从预先确定的小费值数组中取值。
我们需要将可能的小费大小列表存储在某处，因此请在前三个属性的下面添加第四个属性：
let tipPercentages = [10, 15, 20, 25, 0]
现在你可以看到小费百分比2实际上意味着20%的小费，因为这是tipPercentages[2]的值。
将body属性修改为：
var body: some View {
Form {
Section {
TextField("Amount", text: $checkAmount)
}
}
}
这将创建一个滚动条目形式的一个部分，其中又包含一行：我们的文本输入框。在表单中创建文本输入框时，第一个参数是用作占位符的字符串——文本字段旁边显示的灰色文本，让用户了解其中应包含的内容。第二个参数是到checkAmount属性的双向绑定，这意味着该属性将被更新。
@State属性包装器的一个优点是，它自动监视更改，当发生某些事情时，它将自动重新调用body属性。这是一种奇特的说法，它将重新加载您的UI以反映更改后的状态，这是SwiftUI工作方式的一个基本特性。
要演示这一点，请添加第二个部分，其中包含显示checkAmount值的文本视图，如下所示：
Form {
Section {
TextField("Amount", text: $checkAmount)
}
Section {
Text("$\(checkAmount)")
}
}
稍后我们将制作其他内容，但现在请在模拟器中运行该应用程序，以便您可以自己尝试。
点击“账单金额”文本输入框，然后输入一些文本——它不需要是数字；任何事情都可以。您将看到，当您在第二部分中键入文本视图时，它会自动并立即反映您的操作。
发生此同步的原因是：
1.我们的文本输入框与
checkAmount属性有双向绑定。
2.checkAmount属性用@State标记，它自动监视值的更改。
3.当@State属性更改时，SwiftUI将重新调用body属性（即，重新加载我们的UI）
4.因此，文本视图将获得checkAmount的更新值。
最终的项目不会在文本视图中显示checkAmount，但现在已经足够了。不过，在我们继续之前，我想解决一个重要的问题：当您点击在文本输入框中输入文本时，用户会看到一个普通的字母键盘。当然，他们可以点击键盘上的一个按钮进入数字屏幕，但这很烦人，也不是很有必要。
幸运的是，文本字段有一个修饰符，允许我们强制使用另一种键盘：keyboardType（）。我们可以给它一个参数来指定我们想要的键盘类型，在这个例子中，.numberPad或.decimalPad都是不错的选择。这两个键盘都会显示数字0到9供用户点击，但decimalPad也会显示小数点，这样用户就可以输入32.50美元之类的账单金额，而不仅仅是整数。
所以修改TextField如下：
TextField("Amount", text: $checkAmount)
.keyboardType(.decimalPad)
你会注意到keyboardType之前添加了一个换行符，并且将它缩进了比TextField深一层的地方——这不是必需的，但是它可以帮助你跟踪哪些修改器应用于哪些视图。
PS: 可以选中代码 Ctrol + i ,自动对齐代码
现在继续运行应用程序，你会发现你现在只能在文本输入框中键入数字。
提示：.numberPad和.decimalPad键盘类型告诉SwiftUI显示数字0到9以及可选的小数点，但这并不阻止用户输入其他值。例如，如果他们有一个硬件键盘，他们可以键入自己喜欢的内容，如果他们从其他地方复制了一些文本，他们就可以将其粘贴到文本字段中，无论文本中包含什么内容。不过，没关系，我们稍后会处理这件事。
https://www.hackingwithswift.com/books/ios-swiftui/reading-text-from-the-user-with-textfield
| Previous: 在循环中创建视图 | Next: 在表单中创建选择器 |
|---|
赏我一个赞吧~~~
网友评论