SwiftUI基础控件Ⅱ

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

Label{
Text（“progress")
}icon:
{
Image(systemName:"book.circle")
}  //可以创建一个标签控件，显示一行文字，并在文字的左侧显示一枚图标
List{
Label("hello",systemTmage:"hand.wave")//使用简洁的初始化语句，创建一个label控件，并设置Label的文字与图标
Label("world",systemTmage:"hand.point。right")//即使是多行图标与文字可以完美对齐
}//在List中使用Label，可以创建常见的选项列表

使用TextField文本输入框接收用户的数据是一个可显示可编辑文本界面的控件

@State var username :String//添加一个字符串类型属性，用于接收用户在textfield中输入的内容并在左侧添加@sState属性包装器
@State var nickname：String//State是代理属性表示userName属性将和界面上的元素进行绑定，当属性值发生变化时，SwiftUI会立即通知绑定的视觉元素进行内容的更新
ContentView（username：“ ”，nickname：“”） //由于给ContentView结构体添加了两个属性，所以需要更新PreviewProvider的属性的值，这样才可以在右侧预览显示正确的值
//userName属性拥有@State属性包装器，所以一旦userName属性的值发生变化，文本视图上的文字内容也会立即刷新
VStack{
Text（“\(username)")
Text("\(nickname)")//显示属性的实时变化
TextField("User Name",text:$username,onEditingChangged:{(value)in //添加一个TextField视图设置text属性为username的值”$“指Binding wrapper绑定包装，表示可以修改属性的值
print（”\(self.username)")//当用户修改输入框的内容时在控制台输出属性的值，实时观察属性的值的变化
}){
print("\(self.username)")//当用户完成文本框的输入在控制台输出username属性的值
}
.textFieldStyle(RoundedBorderTextFieldStyle())//设置TextField的样式为圆角边框样式
TextField（“Nick Name”，text：$nickname)
.textFieldStyle(RoundedBorderTextFieldStyle())/
}

在输入密码时我们需要保护用户的隐私使用密文输入，那么就需要借助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按钮是用户界面最常见的交互控件，本节课展示按钮的基础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图像视图显示项目中的图片

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