Swift UI 3

Part 1 视频学习

存储文本字段值需要使用字符串进行存储

Textfieled建立文本框

文本框没有限制数字

美元符号绑定自动文本使用文本框进行文字输入处理确定键盘类型  新建一个键盘text使用美元符号进行双向绑定navigation进行添加导航视图使用for each进行强制循环

                                                      增加标签头使用header

Part 2 代码以及函数学习

Scrollview

• 这段代码在 SwiftUI 中根据设备屏幕高度来确定是否使用 ScrollView 来包装内容。如果设备屏幕高度小于 750，即 iPhone SE（第一代）和 iPhone 8 Plus 以下的设备，则使用 ScrollView 包装内容，以确保内容在较小的屏幕上能够滚动查看。否则，如果设备屏幕高度大于等于 750，则直接显示内容，因为较大的屏幕可以容纳更多内容而无需滚动。
• 1. if 分支：在设备屏幕高度小于 750 时，创建一个 ScrollView，并在其中包含 Home 视图，同时设置 showsIndicators 参数为 false，以隐藏滚动指示器。
• 2. else 分支：在设备屏幕高度大于等于 750 时，直接显示 Home 视图，而不使用 ScrollView 包装。
• 这种做法在设计自适应界面时

HStack

• 1. `HStack(spacing: 0) { ... }`：这是一个水平方向的堆栈 (HStack)，它将其中的子视图水平排列。通过 `spacing: 0` 参数设置了子视图之间的间距为 0，这意味着子视图之间没有间距，它们会紧密排列在一起。
• 2. `Button(action:{ ... }) { ... }`：在这个`HStack`中，您有一个按钮。按钮是一个交互式的视图，用户可以点击它来执行指定的操作。在这个按钮中，指定了一个动作 (action)，当用户点击按钮时，这个动作将被触发。
• 3. `withAnimation(.spring()) { index = 0 }`：在按钮的动作 (action) 中，使用 `withAnimation(.spring())` 来指定一个带有弹簧效果的动画。在动画中，`index` 的值被设置为 0。`index` 可能是一个状态变量，用于控制视图的状态或导航等。
• 这段代码的作用是创建一个水平堆栈，其中包含一个按钮。当用户点击按钮时，通过动画将 `index` 的值设置为 0，而动画效果为带有弹簧效果的过渡。
• 这段代码创建了一个 ZStack，其中包含两个 Capsule，用于显示一个底部条和一个被选中的标签。1. `ZStack { ... }`：这是一个 ZStack，用于创建一个重叠的视图层级。
• 2. `Capsule().fill(Color.black.opacity(0.04))`：第一个 Capsule 用于显示底部条。它的填充颜色为黑色，不透明度为 0.04，使其呈现出浅灰色的效果。该 Capsule 的高度设置为 4。
• 3. `if index == 0 { ... }`：这是一个条件语句，用于根据变量 `index` 的值决定是否显示第二个 Capsule。如果 `index` 等于 0，则显示第二个 Capsule，否则不显示。
• 4. `Capsule().fill(Color("Color"))`：第二个 Capsule 用于显示被选中的标签。它的填充颜色使用名为 "Color" 的颜色资源来确定。该 Capsule 的高度设置为 4，并且应用了 `matchedGeometryEffect` 修饰符，用于创建视图间的共享动画效果。
• 5. `matchedGeometryEffect(id:"Tab", in: name)`：这个修饰符用于创建一个共享的几何效果，以便在视图间进行动画过渡时使用。它接受两个参数：`id` 和 `in`。`id` 用于唯一标识几何效果，`in` 表示几何效果应用的范围。在这里，我们使用 `id` 为 "Tab"，而 `in` 为 `name`，表示几何效果在 `name` 的范围内共享。这样，当 `index` 改变时，被选中的标签会以动画的方式从之前的位置移动到新的位置，从而创建一种流畅的过渡效果。
• 通过以上代码，您可以实现一个在用户切换选项卡时具有动画效果的标签栏。

• Image

• 这段代码创建了一个图像视图，用于显示名为 "profile" 的图像文件。让我解释一下代码的结构和功能：
• - `Image("profile")`：这是一个图像视图，用于显示名为 "profile" 的图像文件。在 SwiftUI 中，可以直接使用图像文件的名称来创建图像视图。
• - `.resizable()`：这个修饰符允许图像调整大小，以便根据所提供的框架大小自适应。
• - `.aspectRatio(contentMode: .fill)`：这个修饰符设置了图像的纵横比，并指定了内容模式为 `.fill`，这意味着图像会被拉伸或挤压以填充整个框架，不保持原始比例。
• - `.frame(width: 85, height: 85)`：这个修饰符设置了图像视图的大小，使其具有宽度和高度均为 85 点的框架。
• - `.clipShape(Circle())`：这个修饰符将图像裁剪为圆形，使得图像的外部部分被剪裁掉，只保留圆形范围内的部分。
• 通过以上代码，您创建了一个图像视图，将名为 "profile" 的图像文件显示为圆形的头像，且头像大小为 85x85 点。

• VStack

• 这段代码创建了一个垂直方向的堆栈 (VStack)，其中包含了一些子视图，并且设置了子视图的对齐方式和间距。让我解释一下代码的结构和功能：
• - `VStack`：这是一个 SwiftUI 中的布局视图，用于垂直排列其中的子视图。
• - `alignment: .leading`：通过设置 `alignment` 参数为 `.leading`，指定了堆栈中子视图的对齐方式为左对齐。这意味着堆栈中的子视图将在左侧对齐，而不是默认的居中对齐。
• - `spacing: 15`：通过设置 `spacing` 参数为 `15`，指定了堆栈中相邻子视图之间的间距为 `15` 点。这意味着相邻的子视图之间会有 `15` 点的间距，用于调整它们在堆栈中的布局位置。
• 通过以上代码，您创建了一个垂直堆栈，其中的子视图会左对齐，并且相邻子视图之间有 `15` 点的间距。这种布局可以用于创建垂直排列的用户界面元素，比如表单、列表等。

• renderingMode(.template)`

• 在 SwiftUI 中，`.renderingMode(.template)` 是用于设置图像的渲染模式的一种方式。渲染模式定义了图像在视图中的显示方式。
• 将渲染模式设置为 `.template` 时，图像将以模板方式渲染。在这种模式下，图像的颜色将根据环境中的前景色自动进行调整。这意味着，无论您将图像放置在什么背景下，它都会自动适应并显示为前景色。
• 在这个示例中，创建了一个心形图标，并将其渲染模式设置为 `.template`。然后，通过设置 `.foregroundColor(.red)` 来指定前景色为红色。由于设置了渲染模式为 `.template`，因此即使将图标放置在不同的背景下，它也会自动调整颜色以匹配前景色（红色）。
• 这种渲染模式在需要根据环境动态调整图像颜色的情况下非常有用，例如在按钮、图标等 UI 元素中。