当前位置：首页 > news >正文

swiftUI中的可变属性和封装

news 来源：原创 2024/5/22 6:13:32

swiftUI的可变属性

关于swift中的属性，声明常量使用let ，声明变量使用var
如果需要在swiftUI中更改视图变化那么就需要在 var前面加上@state 。通过挂载到state列表，从而让xcode找到对应的改变的值

例子：


import SwiftUIstruct StateBootCamp: View {@State var customColor = Color.redvar 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.yellowcase "pink":self.customColor = Color.pinkcase "green":self.customColor = Color.greendefault:break}}
}#Preview {StateBootCamp()
}

效果图：
在这里插入图片描述

上面代码块通过封装视图的背景色从而达到点击不同按钮更改背景颜色的效果。

swiftUI的方法封装

/// 将点击事件封装出来func buttonHandle(enter: String) {switch enter {case "yellow":self.customColor = Color.yellowcase "pink":self.customColor = Color.pinkcase "green":self.customColor = Color.greendefault:break}}

把方法封装出来这样代码看起来就不会把按钮点击事件和UI代码放在一起，看起来会舒服点。

swiftUI的图层代码封装

swiftUI的图层代码封装代码和效果图如下：

import SwiftUIstruct 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: Stringlet count: Intlet bgColor: Colorvar body: some View {VStack {Text("\(count)")Text(title)}.padding().background(bgColor).cornerRadius(10).shadow(radius: 10)}
}