swift UI学习笔记

一.间距

在构建一个界面时我们肯定需要调整每个部件的位置，这时候我们就需要调整他们的间距

1.padding

padding是内部的对象和外部对象之间的距离

这里我们需要记住上下左右分别的名称

 

在swift UI中我们在文本下方加上.padding并给背景设置为红色方便观察

右边就是padding过后的间距

然后在右边的选择栏中我们可以选择改变四条边的边距

效果如图所示

2.frame 

frame表示的是当前画幅的大小

 

和padding一样，我们改变背景颜色方便观察

不同于padding的是

padding是以文本为中心，而frame是以画幅为中心

 

二.按钮 

在平时使用app时我们要对手机进行点击，这个时候我们就要用到按钮button

这里我们给到两种设置按钮的方法

 

 

效果是这样的，我们可以对他们进行点击

 

当我们点击后就可以运行button内部的代码 

三.跳转界面 

在本周的任务中，我们会用到跳转视图的功能

这里我给到两种跳转视图的方法

首先我们要建立好需要跳转的视图

 

1.NavigationLink 

NavigationLink是在 SwiftUI 中用于实现导航功能的视图 

它会自动处理视图的过渡动画，并且能够与NavigationView（也是 SwiftUI 中的一个视图类型）协同工作，来构建具有层次结构的应用界面。

 

这里我们的destination就是我们要跳转的视图

text就是我们需要的文本，同样在text下方我们可以进行修改 

当我们点击这个按钮我们就能实现跳转界面 

2. sheet

在 SwiftUI 中，sheet是一种视图修饰符，用于以模态（modal）的方式呈现一个新的视图。模态视图会覆盖在当前视图之上，并且通常会部分或全部遮挡住底层的视图，直到模态视图被关闭。这就像是在一个应用中弹出一个对话框或者一个新的页面，用户需要在这个弹出的内容上进行操作或者将其关闭后才能继续与底层的视图进行交互。

注意使用这个方式时要设置一个布尔变量来对视图进行传递

@State用于在视图（View）中声明可变的状态属性。SwiftUI 会自动跟踪这些使用@State标记的属性的变化，并且当属性值改变时，会自动重新渲染相应的视图，以更新界面显示来反映最新的状态，确保视图和数据保持同步。

 

 这里我们可以看到一个.onTapGesture就相当于给这个文本修改出一个点击功能

当我们点击这个文本时就讲b的值反转（也就是将b改为ture）

$b 这里的 $ 符号表示这是对一个 @State 或者 @Binding 类型属性的引用绑定。也就是说，b 是一个已经声明的属性，并且这个属性的类型是 @State 或者 @Binding，用来动态地决定模态视图的显示状态。