# 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](https://lochiwei.gitbook.io/ios/custom/ext/roundedrectangle)
* [🌀 Shape](https://lochiwei.gitbook.io/ios/swiftui/shapes/shape/shape)
  {% 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](https://lochiwei.gitbook.io/ios/swiftui/control/pickers/picker "mention")
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/ios/master/todo/tutorials/swift-animation-mastery/triggers/picker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.