SwiftUI界面賞鑑demo之《墨竹圖》@ObservedObject @Published使用

SwiftUI 和 Flutter時代編程將成爲一個有品位的工做,爲此特開闢新板塊,用於顯示SwiftUI製做的界面demo,供你們賞鑑。

功能

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

效果

Jietu20200202-093638@2x.jpg

Jietu20200202-093712@2x.jpg

代碼

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...編程

相關文章
相關標籤/搜索