007_swiftui_@State与@Binding实战中应用

我们在上面的文章中，已经频繁用到了@State

下面构建一个颜色选择器也是同样的使用了@State

效果展示

代码展示

    //
    //  ContentView.swift
    //  Slots Demo
    //
    //  Created by liuan on 2020/3/31.
    //  Copyright © 2020 liuan. All rights reserved.
    //
    
    import SwiftUI
    
    struct ContentView: View {
        @State private var red:Double=0;
        @State private var green:Double=0;
        @State private var blue:Double=0;
        
        
        var body: some View {
            VStack{
                Rectangle()
                    .frame(width:100,height: 100)
                    .foregroundColor(Color(red:red/255,green:green/255,blue:blue/255))
                    .border(Color.black,width: 1)
                
                Slider(value:$red,in:0...255,step: 1)
                Text("Green:\(Int(red))")
                
                
                Slider(value:$green,in:0...255,step: 1)
                Text("Green:\(Int(green))")
                
                Slider(value:$blue,in:0...255,step: 1)
                Text("Green:\(Int(blue))")
                
            }
        }
        
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }

我们可以看到

文章多处使用了

   Slider(value:$blue,in:0...255,step: 1)
                Text("Green:\(Int(blue))")

我们可以提取出一个控件SliderView。然后频繁的调用

首选创建一个SwiftUi

选中项目的target后

点击File

点击Next

输入名字后 编辑这个文件

代码如下

//
//  SlideView.swift
//  Slots Demo
//
//  Created by liuan on 2020/3/31.
//  Copyright © 2020 liuan. All rights reserved.
//

import SwiftUI

struct SlideView: View {
    @Binding var value:Double
    var label:String
    
    var body: some View {
        VStack{
            Slider(value:$value,in:0...255,step: 1)
            Text("\(label):\(Int(value))")
        }
    }
}

struct SlideView_Previews: PreviewProvider {
    static var previews: some View {
        SlideView(value: Binding.constant(0), label: "Label")
    }
}

相当于单独提取出来了这个控件。下面我们继续修改主要的核心代码ContentView.swift

    //
    //  ContentView.swift
    //  Slots Demo
    //
    //  Created by liuan on 2020/3/31.
    //  Copyright © 2020 liuan. All rights reserved.
    //
    
    import SwiftUI
    
    struct ContentView: View {
        @State private var red:Double=0
        @State private var green:Double=0
        @State private var blue:Double=0
        
        
        var body: some View {
            VStack{
                Rectangle()
                    .frame(width:100,height: 100)
                    .foregroundColor(Color(red:red/255,green:green/255,blue:blue/255))
                    .border(Color.black,width: 1)
                
                SlideView(value: $red, label: "Red")
                
                SlideView(value: $green, label: "Green")
                
                SlideView(value: $blue, label: "Blue")
                
                
                
            }
        }
        
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }

效果没变和上面一样。此处就不粘贴图片了