我們在上面的文章中，已經頻繁用到了@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()
        }
    }

效果沒變和上面一樣。此處就不粘貼圖片了