swiftUI中的可变属性和封装

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)
    }
}
相关推荐
HarderCoder15 小时前
Swift 6 并发时代,如何优雅地“抢救”你的单例?
swift
zhangmeng16 小时前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
HarderCoder16 小时前
SwiftUI 踩坑记:onAppear / task 不回调?90% 撞上了“空壳视图”!
swift
HarderCoder16 小时前
@isolated(any) 深度解析:Swift 并发中的“隔离追踪器”
swift
大熊猫侯佩20 小时前
桃花岛 Xcode 构建秘籍:Swift 中的 “Feature Flags” 心法
app·xcode·swift
用户0920 小时前
SwiftUI Charts 函数绘图完全指南
ios·swiftui·swift
YungFan20 小时前
iOS26适配指南之UIColor
ios·swift
HarderCoder1 天前
Swift 6.2 新特性 `@concurrent` 完全导读
swift
HarderCoder1 天前
Swift 里的“橡皮擦”与“标签”——搞懂 existentials 与 primary associated type
swift
权咚2 天前
阿权的开发经验小集
git·ios·xcode