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)
    }
}
相关推荐
恋猫de小郭7 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
点金石游戏出海12 小时前
每周资讯 | Krafton斥资750亿日元收购日本动画公司ADK;《崩坏:星穹铁道》新版本首日登顶iOS畅销榜
游戏·ios·业界资讯·apple·崩坏星穹铁道
旷世奇才李先生14 小时前
Swift 安装使用教程
开发语言·ios·swift
90后的晨仔15 小时前
Xcode16报错: SDK does not contain 'libarclite' at the path '/Applicati
ios
finger2448015 小时前
谈一谈iOS线程管理
ios·objective-c
Digitally15 小时前
如何将大型视频文件从 iPhone 传输到 PC
ios·iphone
梅名智16 小时前
IOS 蓝牙连接
macos·ios·cocoa
美狐美颜sdk1 天前
跨平台直播美颜SDK集成实录:Android/iOS如何适配贴纸功能
android·人工智能·ios·架构·音视频·美颜sdk·第三方美颜sdk
恋猫de小郭1 天前
Meta 宣布加入 Kotlin 基金会,将为 Kotlin 和 Android 生态提供全新支持
android·开发语言·ios·kotlin
泓博1 天前
Objective-c把字符解析成字典
开发语言·ios·objective-c