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)
    }
}
相关推荐
权咚1 小时前
阿权的开发经验小集
git·ios·xcode
用户092 小时前
TipKit与CloudKit同步完全指南
ios·swift
法的空间8 小时前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
2501_915918419 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张10 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
东坡肘子11 小时前
完成 Liquid Glass 的适配了吗?| 肘子的 Swift 周报 #0102
swiftui·swift·apple
Magnetic_h19 小时前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
00后程序员张21 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
前端小超超21 小时前
capacitor配置ios应用图标不同尺寸
ios·蓝桥杯·cocoa
2501_915106321 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode