SwiftUI界面赏鉴demo之《墨竹图》@ObservedObject @Published使用

SwiftUI 和 Flutter时代编程将成为一个有品位的工作,为此特开辟新板块,用于显示SwiftUI制作的界面demo,供大家赏鉴。

功能

  • @ObservedObject
  • @Published
  • UserDefaults
  • 自定义Cell

效果

SwiftUI界面赏鉴demo之《墨竹图》@ObservedObject @Published使用_第1张图片

SwiftUI界面赏鉴demo之《墨竹图》@ObservedObject @Published使用_第2张图片

代码

import SwiftUI

struct ContentView: View {
    
    @ObservedObject var settingsVM = SettingsViewModel()
    
    var body: some View {
        VStack(alignment: .center) {
            Text("《墨竹谱》")
                .font(.largeTitle)
                .foregroundColor(.white)
                .bold()
            Text("元代画家吴镇赠予其子佛奴的画作")
                .font(.system(size:26))
                .foregroundColor(.white)
            
            self.$settingsVM.isOn.wrappedValue ? Text("轻荫护绿苔").foregroundColor(.white):Text("儗与可笔意").foregroundColor(.white)
            Toggle(isOn: self.$settingsVM.isOn) {
                Text("")
            }.fixedSize()
        }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        
            .background(self.$settingsVM.isOn.wrappedValue ? Image("muzhu01") : Image("muzhu02"))
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
import Foundation

class SettingsViewModel: ObservableObject {
    
    @Published var isOn: Bool = UserDefaults.standard.bool(forKey: "isOn") {
        didSet {
            UserDefaults.standard.set(self.isOn, forKey: "isOn")
        }
    }
    
}

更多SwiftUI教程和代码关注专栏

https://www.jianshu.com/c/7b3...

你可能感兴趣的:(ios,swift)