​应当注意VStack最多可以容纳十个子视图，因此可以在VStack视图内部添加一个子VStack试图，这样我们可以在VStack内添加任意多个子视图。

公有属性(View协议的属性)

所有的组件都是遵循这个View协议的，所以这个View协议有的属性，基本上都会有

View()
.resizable()
.background(.red) // 背景色
.shadow(color: .black, radius: 2, x: 9, y: 15) //阴影
.frame(width: 30, height: 30) // 宽高 可以只设置宽或者高
.offset(x: 10,y: 10) //显示位置偏移（原来的位置可能还继续占位）
.position(CGPoint(x: 175, y: 100)) //绝对位置 这个配置的是中心点的位置
//相对于其他组件的间距
.padding(EdgeInsets(top: 10, leading: 50, bottom: 50, trailing: 50))
.scenePadding(.trailing) // 填充此视图所沿的一组边。
.border(.blue, width: 12) // 边框颜色和宽度
.cornerRadius(15) // 圆角
.clipShape(Circle()) //裁减成圆形
.mask(Circle()) //遮罩
.onTapGesture { // 点击事件
   print("你好啊")
}

Text组件

用于展示文本内容，拥有的属性如下：

Text("hello")
.bold//加粗
.italic//斜体
.underline//下划线
.underline(true,color: .orange)//下划线的颜色设置为橙色
.strikethrough()//删除线
.foregroundColor(Color.orange)//设置文本的颜色字体
.background(Color.orange)//设置文字的背景颜色
.beselineOffset(CGFloat(5.0))//设置文字内容在文本视图垂直方向上的偏移值
.background(Image("Picture"),alignment: .bottom)//将一张图片作为文本视图的背景，并设置文字内容位于文本视图的底部
.font(.footnote）//设置文字的字体尺寸为注脚样式
.font(.system(size:36)//设置文字的字体尺寸为36
.font(.system(.title,design:.monospaced))//设置文字字体为标题样式，并可根据屏幕尺寸大小，自动调整自身尺寸
.font(.custom("BradleyHandITCTT-Bold",size:36))//具有自定义字体的文本视图，并设置字体尺寸为36
.fontWeight(Font.Weight.heavy)//通过字体粗细属性给它设置加粗效果
.fontWeight(Font.Weight.ultraLight)//通过字体粗细属性给它设置纤细效果

文本试图的段落属性，调整文字的字距，行距，偏移值，框架和对齐方式等视觉样式：

Text("hello")
.tracking(10)//使用字距属性设置文本字距为10表示的是一组文字的平均字距
.kerning(10)//使用字距调整属性设置字距为10表示的是一组字元的字距
.blur(radius:1)//设置模糊效果，并设置模糊半径为1
Text（”“）
.lineSapcing(20)
.lineLimit(nil)//设置一个文本视图的行距为20，同时不限制文字的行数
.offset(x:40,y:0)//设置文字内容在水平方向上向右侧偏移四十点的距离
.frame(width:200,height:80,alignment:
      .bottomTrailing)//设置文本视图的宽度为200，高度为80，文字内容位于文本视图的右下角
.frame(width:200,height:80,alignment:
      .center)//设置文本视图的宽度为200，高度为80，文字内容位于文本视图的中心位置
.position(x:50,y:50)//调用文本的视图位置方法，该方法使对齐属性失效，因此文字会从视图的左上角向右向下各偏移50点
.frame(width:200,height:80,alignment:
      .bottomTrailing)//设置文本视图的宽度为200，高度为80，文字内容位于文本视图的右下角
.background(Color.orange)//设置文本视图的宽度为200，高度为80，文字内容位于文本视图的右下角
 
.lineLimit(4)//可以显示四行文字
.frame(width:200,height:100)//添加一个宽200高100的文本视图，默认情况下文字处于左对齐的状态
.multilineTextAlignment(.center)//可以将对齐方式修改为居中对齐

文本视图的内部填充属性，可以使用填充属性，修改文字内容和文本视图边框之间的距离，即文本视图的上下左右内边距： 

Text（“hello”）
.background(Color.black)
.foregroundColor(.white)//将文本视图设置为黑色并设置文字颜色为白色
.padding(20)//设置填充属性的值为20增加文本视图与文字内容的间距
Text（“hello”）
.padding(20)
.background(Color.black)
.foregroundColor(.white)//调用的顺序由上而下进行
//创建由外向内颜色渐变的边框
.font(.largegTitle)//设置文字内容的样式为巨型标题
.padding(15)//设置填充属性的值为15增加文本视图与文字内容的间距
.background(Color.yellow)//背景颜色为黄色
.paading(15)//在文本视图的外围再次增加15点的间距
.blackground(Color.orange)//给新的内边距设置填充颜色为橙色
.padding(10)//在外围增加十点间距

SwiftUI在界面搭建时会考虑到屏幕设备的安全区域，界面的元素被限制在刘海下方，但是可以使界面元素突破安全限制撑满整个屏幕：

 
.frame(minWidth:0,maxWidth:.infinity,minHeight:0,maxHeight:.infinity)//设置文本框架属性，不限制文本视图的最大宽度和最大高度
.background(Color.orange)//设置文本视图的背景颜色为橙色，此时视图在刘海下方
.font(.largeTitle)//设置文字的字体属性，增加文字的尺寸
.edgesTgnoringSafeArea(.all)//设置文本视图的边缘，在上下左右四个方向忽略安全区域的限制改设置不仅适用于文本视图也适用于其他视图

对日期内容进行格式化并显示在文本视图中，首先需要在结构体中添加一个日期属性：

struct ContentView:View{
var now=Date()//初始值为该设备的当前日期
static let dateFormatter:DateFormatter= //添加一个日期格式化类型的属性，对日期内容进行格式化操作
{
 
let formatter=DateFormatter()
 formatter.dateStyle=.full
//formatter.dateFormat="yyyy-MM-dd"//初始化日期格式化类型设置日期样式
return formatter//返回指定的实例，作为日期格式化属性的值
}()
var body:some View
{
Text("Interactive tutorials"\(now,formatter:Self.dateFormatter)")//修改文本视图的文字内容，并按照指定的日期格式，显示日期属性的值
.font(.title)//设置文本视图的字体样式，增加文字的尺寸
.padding()//增加文字内容和文本视图边框的间距
}
}

使用文本视图的扩展方法，对多个不同样式的文本视图进行拼接，从而创建漂亮的富文本：

Text("hello")
.foregroundColor(.yellow)//设置文字的字体为黄色
.fontWeight(.heavy)//给文字设置加粗显示效果
+ Text（“world”）//调用文本视图加号扩展方法，拼接另一个文本视图，将两个视图文本进行拼接，然后返回一个统一的文本

Label组件

使用Label显示图像，SF符号和文字的组合，可以在单个ui元素中显示图像，SF符号和文字的组合

TextField组件

用TextField文本输入框接收用户的数据是一个可显示可编辑文本界面的控件，需要定义一个和输入框绑定的变量：

@State var username = ""


TextField("user name", text: $username) {
    print("user name value\(self.username)")
}.font(.title).textFieldStyle(RoundedBorderTextFieldStyle())

SecureField组件

在输入密码时我们需要保护用户的隐私使用密文输入，那么就需要借助SecureField视图。

需要注意的是当你在添加一个属性的值时需要对contentView的初始化代码进行修改，可以将其设置为空：

struct ContentView:View{//使用时需要给结构体增加一个属性
@State var password:String//该属性用于存储用户输入的密码，并在属性左侧添加一个@State属性代理标记，从而使属性和界面元素进行绑定
var bady:some View{
VStack{
 
    Text("your password is \(password)!")
    SecureField("Your password",text:$password){//添加一个密文输入框，并设置指定位符，同时                设置text属性为password属性的值，并通过$与password属性进行绑定包装
    print("your password id\(self.password)!")
        }
    .//可以设置输入边框样式为圆角样式
    }
    }
}

创建可容纳多行滚动文字的输入框TextEditor，TextField可以输入单行的文字内容但是输入多行时则需使用能够容纳多行滚动文字的TextEditor：

@State var content=""
@State var isAlert=false//定义一个字符串属性来储存输入的内容，定义一个bool属性用来标记是否弹出警告窗口可以显示用户输入的内容
init（）
{
UITextView。appearance（）.backgroundColor=.clear//TextEditor是UIKit中的UITextView演变而来因此可以在init方法中通过UITextView修改TextEditor的外观属性
}
var body;some view
{
VStack{
TextEditor(text:self.$content)//创建一个TextEditor，在默认状态下它不会显示边框
.background(Color,gray.opacity(0,3))//设置背景颜色为浅灰色来提示用户的显示区域
.frame(height:200)//设置高度为200
}
Button("Sumbit")
{
self.isAlert=true//创建一个按钮当用户点击这个按钮弹出警告窗口，显示用户输入的内容
}
.alertt(isPressented:$isAlert,content:
{
Alert (title:Text("Content"),message:
Text(content))
}
.padding()
}

Button按钮

Button按钮是用户界面最常见的交互控件，本节课展示按钮的基础1用法，以及创建图文混排样式的按钮：

var body:some view
{
VStack{
 
Button("First button")//添加一个简单的按钮并指定文字标题为First button
{
print（“————first button action.”）//点击按钮后返回的值
} 
 
Button (action://另一种初始化方法，添加一个按钮控件，首先设置按钮的点击事件，当被点击时，在控制台输出指定信息
{
print("---Second button action.")
}){
Text(“Second button”）//指定一个文本视图，作为按钮的文字标签
}
 
Button (action://添加第三个按钮，将图标和文字作为按钮的标签内容
{
print("---Third button action.")
}){
Image(systemName:"clock")
Text(“Third button”）//添加一个图像视图和文本视图作为按钮的标签内容
}
.foregroundColor(Color.white)
.blackground(Color.orange)//设置按钮的字体颜色与背景颜色，由于1按钮控件的padding默认为0，所以按钮控件会显得比较拥挤
 
Button (action://设置按钮的点击事件与标题
{
print("---padding for button.")
}){
Text(“Default padding”）//指定一个文本视图，作为按钮的文字标签
}
.padding(30)
background(Color.yellow)
 
Button (action://另一种初始化方法，添加一个按钮控件，首先设置按钮的点击事件，当被点击时，在控制台输出指定信息
{
print("---button with image.")
}){
HStack{//通过该视图，来组合多个子视图，并使子视图沿着水平方向等距排列
Image(systemName:"star")
Text(“Button with image”）
}
.padding()
.background(Color.yellow)//设置内边距与颜色
}
}
}

下面是使用button控件的sheet方法打开一个指定内容的模态窗口,通过按钮打开模态窗口：

@static var isPresented-false//bool型决定模态窗口的显示与隐藏
var body:some body
{
VStack{
BUtton("Show modal")
{
self.isPresented=true//添加一个按钮控件，设置其文字标题，当按钮被点击时，设置布尔型属性的值为真
}.sheet(isPresented:$isPresented,content://调用Button控件的sheet方法，并设置isPresented的值为当前的布尔属性，当属性的值为真的时候显示sheet中的内容
{
MyDetailView（message:"Model window")
})
}
}
struct MyDetailView:View //定义一个遵守View协议的指定名称的结构体，作为一个新的自定义视图，结构体相对于类//来说更加量，所以swiftui使用结构体来定义视觉控件
{
let message:String
 var body :some View//实现View协议中必需实现的body属性，所有自定义视图中的元素都需要放在body中
{
VStack{
Text(message)
.font(.largeTitle)//添加一个文本视图来显示属性的值
}
}
}

Image组件

使用Image图像视图显示项目中的图片：

 var body :some View
{
VStack{
Image("giralpicture")//在界面显示一张图片，但是该图片是需要提前导入资源的
//Image视图类似于UIKit中的UIImageView主要用于显示项目里的图片素材，这里直接使用图片的名称，即可快速显示指定名称的图片
Image(systemName:"arkit")//通过systemName属性，可以显示指定名称的SF Symbols图标，通过指定的名称，可以显示超过1500份不同的苹果内置图标
//修改图标的颜色，尺寸与修改字体的颜色方法是相同的
Image("giralpicture")
.resizable()//使用resizable方法，使图像视图进行自动缩放，以适配其父视图
.aspectRatio(contentMode: .fit)//将图像视图的尺寸限制为指定的宽高比，即在撑满父视图的前提下，仍然保持图像原始的宽高比
}
}