swiftUI中的可变属性和封装

lingjunjie2024-03-13 8:01

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)
    }
}