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)
    }
}
相关推荐
程序猿看视界44 分钟前
如何在 UniApp 中实现 iOS 版本更新检测
ios·uniapp·版本更新
dr李四维4 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
️ 邪神4 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
比格丽巴格丽抱16 小时前
flutter项目苹果编译运行打包上线
flutter·ios
网络安全-老纪17 小时前
iOS应用网络安全之HTTPS
web安全·ios·https
今天啥也没干19 小时前
使用 Sparkle 实现 macOS 应用自定义更新弹窗
前端·javascript·swift
1024小神20 小时前
tauri2.0版本开发苹果ios和安卓android应用,环境搭建和最后编译为apk
android·ios·tauri
lzhdim21 小时前
iPhone 17 Air看点汇总:薄至6mm 刷新苹果轻薄纪录
ios·iphone
安和昂21 小时前
【iOS】知乎日报第四周总结
ios
yngsqq1 天前
037集——JoinEntities连接多段线polyline和圆弧arc(CAD—C#二次开发入门)
开发语言·c#·swift