> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/master/todo/tutorials/swift-animation-mastery/triggers/picker.md).

# example ⟩ Picker

![💈 範例](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MKiEUoAa6-WH7YOBl9M%2F-MKiEZPwAt1B2HVvuKST%2FTriggers%20-%20Picker.gif?alt=media\&token=1026e109-69b5-4c17-8f52-77d6625d0913)

{% tabs %}
{% tab title="💈 範例" %}

```swift
import SwiftUI
import PlaygroundSupport

// 🌀 RoundedRectangle(), 🌀 shape.outlined()
let r1 = RoundedRectangle().outlined(fill: .blue)
let r2 = RoundedRectangle().outlined(fill: .pink)
let spring = Animation.spring(response: 0.5, dampingFraction: 0.5, blendDuration: 0)

// live view
struct ContentView: View {
    
    // ⭐️ view state
    @State private var index = 0
    @State private var change = false
    
    var a: Double { change ? 1 : 0 }  // opacity
    
    // helper
    func makeBody(size: CGSize) -> some View {
        let w = size.width
        var isTag0 : Bool    { index == 0 }
        var d      : CGFloat { isTag0 ? 0 : w }  // offset
        var t      : Double  { isTag0 ? 1 : 0 }  // opacity
        return ZStack {
            r1
                .offset(x: d).opacity(t)  // slide & fade away
                .animation(spring)
            r2
                .offset(x: d - w).opacity(1 - t)
                .animation(.default)
        }
    }
    
    // view body
    var body: some View {
        VStack {
            
            if self.change {
                // rounded rects
                GeometryReader { geo in 
                    self.makeBody(size: geo.size)
                }.transition(.asymmetric(insertion: .move(edge: .bottom), removal: .opacity))
                // segmented control (picker)
                Picker("Day & Night", selection: $index) {
                    Text("🌞 Day").tag(0)
                    Text("🌙 Night").tag(1)
                }.pickerStyle(SegmentedPickerStyle())
            } else {
                // segmented control (picker)
                Picker("Day & Night", selection: $index) {
                    Text("🌞 Day").tag(0)
                    Text("🌙 Night").tag(1)
                }.pickerStyle(SegmentedPickerStyle())
                // rounded rects
                GeometryReader { geo in 
                    self.makeBody(size: geo.size)
                }.transition(.asymmetric(insertion: .move(edge: .top), removal: .opacity))
            }
            
            Divider().padding(.top, 4)
            
            Button(action: { self.change.toggle() }, label: {
                Text("Change")
                    .font(.caption)
                    .padding(8)
                    .padding(.horizontal, 6)
                    .accentColor(.white)
                    .background(Color.orange)
                    .cornerRadius(10)
            })
            
        }// container: VStack
            .frame(350, 200)
            .shadow(radius: 8)
            .padding()
            .background(Color.gray)
            .cornerRadius(10).animation(.default)
    }
}

PlaygroundPage.current.setLiveView(ContentView())
```

{% endtab %}

{% tab title="📗 參考" %}

* [ ] [Build a Custom iOS Segmented Control With SwiftUI](https://medium.com/better-programming/custom-ios-segmented-control-with-swiftui-473b386d0b51) - Medium
* [ ] [SwiftUI Custom Styling](https://swiftui-lab.com/custom-styling/) - The SwiftUI Lab
  {% endtab %}

{% tab title="🌀  套件" %}

* [🌀 RoundedRectangle](/ios/custom/ext/roundedrectangle.md)
* [🌀 Shape](/ios/swiftui/shapes/shape/shape.md)
  {% endtab %}

{% tab title="📘 手冊" %}

* [SwiftUI](https://developer.apple.com/documentation/swiftui)  ⟩  [Views and Controls](https://developer.apple.com/documentation/swiftui/views-and-controls)  ⟩  [Picker](https://developer.apple.com/documentation/swiftui/picker) 
  * [PickerStyle](https://developer.apple.com/documentation/swiftui/pickerstyle) 
    {% endtab %}

{% tab title="🗣 討論" %}

* [SwiftUI Custom PickerStyle](https://stackoverflow.com/questions/58878987/swiftui-custom-pickerstyle) - StackOverflow
  {% endtab %}

{% tab title="👥 相關" %}

* [Picker](/ios/swiftui/control/pickers/picker.md)
  {% endtab %}
  {% endtabs %}