🎛️Picker

SwiftUI ⟩ control ⟩ pickers ⟩ Picker

⭐️ 注意： PickerStyle.automatic 回傳的是 DefaultPickerStyle，兩者名稱不一致，請小心❗️

💾 程式

👉 SwiftUI Tutorials ⟩ Working with UI Controls ⟩ Sec 3. Define the Profile Editor

Picker (segmented style)

VStack(alignment: .leading, spacing: 20) {
    Text("Seasonal Photo").bold()
    /// ⭐️ Picker
    Picker("Seasonal Photo", selection: $profile.seasonalPhoto) {
        ForEach(Profile.Season.allCases) { season in
            Text(season.rawValue).tag(season)
        }
    }
    .pickerStyle(.segmented)
}

👉Implicit Alignment

@State private var selection: String = "leading"

let keys = ["leading", "center", "trailing"]
let alignments: [String:HorizontalAlignment] = [
    "leading": .leading, "center": .center, "trailing": .trailing
]
    
/// segmented control
var picker: some View {
    Picker("Align", selection: $selection) {
        ForEach(0..<3){ Text(keys[$0]).tag(keys[$0]) }
    }
    .pickerStyle(.segmented).shadow(radius: 2)
    .padding()
    // ⭐️ animate the change when `selection` changes
    .onChange(of: selection) { newSelection in
        withAnimation(.easeOut(duration: 1)) {
            self.alignment = alignments[newSelection]!
        }
    }
}

📘 手冊

• SwiftUI ⟩

  • Picker ⟩

    • picker styles

  • PickerStyle (protocol)

  • View ⟩

    • .pickerStyle(_:)

📗 參考

• AppCoda ⟩ 構建一個輪盤選擇器 (Wheel Picker)

👥 相關

• events

• Implicit Alignment

🖥️ 影片

tundsdev ⟩ Picker And PickerStyle In SwiftUI