The Util Designer
SwiftUI 輸入元件Picker
xcode 13.4.1, swift 5.5, iOS 15.4
2022-08-18
SwiftUI提供了多種內建的輸入元件，其中一個是Picker用來做一個顏色選擇器。
1. 下面例子使用Picker來演示選擇項的元件來選擇顏色。
struct FormExample : View {
    let colors = ["red", "blue", "green"]
    @State var selectedIndex = 0
    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $selectedIndex) {
                    Text(colors[0]).tag(0)
                    Text(colors[1]).tag(1)
                    Text(colors[2]).tag(2)
                } label: {
                    Text("Color:")
                }
                Text("The color you choose is \(colors[selectedIndex])")
            }
            .navigationTitle("Color Picker")
        }
    }
}
2. 若可顏色太多，我們可以用ForEach來列舉Picker的顏色文字選項。
import SwiftUI

struct FormExample : View {
    let colors = ["red", "blue", "green", "cyan", "yellow"]
    @State var selectedIndex = 0
    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $selectedIndex) {
                    ForEach(0..<colors.count, id:\.self) { i in
                        Text(colors[i]).tag(i)
                    }
                } label: {
                    Text("Color:")
                }
                Text("The color you choose is \(colors[selectedIndex])")
            }
            .navigationTitle("Color Picker")
        }
    }
}
3. 以上例子都是用下標為顯示選項和記住Picker選了哪一個選項，有時不太方便，以下就直接使用String。
import SwiftUI

struct FormExample : View {
    let colors = ["red", "blue", "green", "cyan", "yellow"]
    @State var selectedColor = ""
    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $selectedColor) {
                    ForEach(colors, id:\.self) { color in
                        Text(color)
                    }
                } label: {
                    Text("Color:")
                }
                Text("The color you choose is \(selectedColor)")
            }
            .navigationTitle("Color Picker")
        }
    }
}
4. 以上的選項是用String，但其實可以直接用Color，還可以立即使用已選擇的顏色在文字上，實作如下。
import SwiftUI

struct FormExample : View {
    let colors = [Color.red, Color.green, Color.blue, Color.cyan, Color.yellow]
    @State var selectedColor = Color.red
    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $selectedColor) {
                    ForEach(colors, id:\.self) { color in
                        Text(color.description)
                    }
                } label: {
                    Text("Color:")
                }
                Text("The color you choose is \(selectedColor.description)")
                    .foregroundColor(selectedColor)
                    .font(.title3)
            }
            .navigationTitle("Color Picker")
        }
    }
}
5. 以文字來做顏色的選項，還不是很直接，以下我們直接使用顏色來進行顏色的選擇，以下實作我們在Picker的選擇把Text轉成Rectangle Shape即可。
import SwiftUI

struct FormExample : View {
    let colors = [Color.red, Color.green, Color.blue, Color.cyan, Color.yellow]
    @State var selectedColor = Color.red
    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $selectedColor) {
                    ForEach(colors, id:\.self) {
                        Rectangle()
                            .frame(width: 100, height: 40)
                            .foregroundColor($0)
                    }
                } label: {
                    Text("Color:")
                }
                Text("The color you choose is \(selectedColor.description)")
                    .foregroundColor(selectedColor)
                    .font(.title3)
            }
            .navigationTitle("Color Picker")
        }
    }
}
6. Picker除了預設的列表選擇，還可以使用pickerStyle來設置選擇選項的樣式，比如下面使用了.wheel滾輪的選擇方式：
import SwiftUI 

struct FormExample : View {
    let colors = [Color.red, Color.green, Color.blue, Color.cyan, Color.yellow]
    @State var selectedColor = Color.red
    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $selectedColor) {
                    ForEach(colors, id:\.self) {
                        Rectangle()
                            .frame(width: 100, height: 40)
                            .foregroundColor($0)
                    }
                } label: {
                    Text("Color:")
                }
                .pickerStyle(.wheel)
                Text("The color you choose is \(selectedColor.description)")
                    .foregroundColor(selectedColor)
                    .font(.title3)
            }
            .navigationTitle("Color Picker")
        }
    }
}