swiftUI的可变属性
关于swift中的属性,声明常量使用let , 声明变量使用var
如果需要在swiftUI中更改视图变化那么就需要在 var前面加上@state 。 通过挂载到state列表 ,从而让xcode找到对应的改变的值
例子:
swift
import SwiftUI
struct StateBootCamp: View {
@State var customColor = Color.red
var body: some View {
ZStack{
customColor
.ignoresSafeArea()
VStack(spacing: 20, content: {
Text("title")
Text("count : 1")
HStack(spacing: 20, content: {
Button("yellow".uppercased()) {
self.buttonHandle(enter: "yellow")
}
Button("pink".uppercased()) {
self.buttonHandle(enter: "pink")
}
Button("green".uppercased()) {
self.buttonHandle(enter: "green")
}
})
})
}
}
/// 将点击事件封装出来
func buttonHandle(enter: String) {
switch enter {
case "yellow":
self.customColor = Color.yellow
case "pink":
self.customColor = Color.pink
case "green":
self.customColor = Color.green
default:
break
}
}
}
#Preview {
StateBootCamp()
}
效果图:
上面代码块通过封装视图的背景色从而达到点击不同按钮更改背景颜色的效果。
swiftUI的方法封装
swift
/// 将点击事件封装出来
func buttonHandle(enter: String) {
switch enter {
case "yellow":
self.customColor = Color.yellow
case "pink":
self.customColor = Color.pink
case "green":
self.customColor = Color.green
default:
break
}
}
把方法封装出来这样代码看起来就不会把按钮点击事件和UI代码放在一起,看起来会舒服点。
swiftUI的图层代码封装
swiftUI的图层代码封装代码和效果图如下:
swift
import SwiftUI
struct ExtracSubviewsBootCamp: View {
var body: some View {
ZStack{
Color(Color.blue).ignoresSafeArea()
/// 引入封装了的图层
contentLayer
}
}
/// 把UI的代码封装出来从而更清晰
var contentLayer: some View {
HStack {
MyItem(title: "Apples", count: 1, bgColor: .red)
MyItem(title: "Bananas", count: 2, bgColor: .yellow)
MyItem(title: "Oranges", count: 13, bgColor: .orange)
}
}
}
#Preview {
ExtracSubviewsBootCamp()
}
/// 提取子视图
struct MyItem: View {
let title: String
let count: Int
let bgColor: Color
var body: some View {
VStack {
Text("\(count)")
Text(title)
}
.padding()
.background(bgColor)
.cornerRadius(10)
.shadow(radius: 10)
}
}