SwiftUI - 选择器

选择器是 SwiftUI 中特殊类型的 UI 控件。选择器用于存储一组相关数据，并允许用户从给定的数据集中选择所需的数据。它与下拉列表或微调器非常相似。

它们通常用于选择单个值、选择多个值、选择日期和时间、控件等。它们紧凑、一致，并且可以定制为各种样式。在 SwiftUI 中，有三种类型的选择器可用，它们是:

• 常规选择器视图

• DatePicker 视图

• ColorPicker 视图

SwiftUI 中的选择器视图

我们可以借助 Picker 结构创建一个选择器。借助此 Picker，我们可以提供选择器的标签、绑定和内容。它可以以轮子、列表或段等各种样式显示一组数据。

语法

以下是语法 −

Picker(
   _ titleKey: LocalizedStringKey,
   selection: BindingValue
)

参数

此视图使用以下参数 −

• titleKey:表示选择选项的标签或目的。

• selection:表示当前选定的选项。

示例

以下 SwiftUI 程序创建一个选择器。

import SwiftUI

struct ContentView: View {
   @State private var selectedOption = "Open"
   let options = ["New", "Open", "SaveAs", "Save", "Recent"]
   var body: some View {
      VStack{
         Picker("Select an option", selection: $selectedOption){
            ForEach(options, id:\.self){x  in Text(x)}
         }
      }
   }
}
#Preview {
   ContentView()
}

输出

在 SwiftUI 中设置 Picker 视图的样式

我们可以使用名为 pickerStyle() 的预定义修饰符来设置选择器的样式。此修饰符可以以自定义样式或标准样式/预定义样式来设置给定选择器的样式。对于自定义样式，我们必须创建符合 PickerStyle 协议的自定义样式。

而标准样式包括菜单、自动、轮子、内联、调色板、导航链接、radioGroup 和段。我们可以将这些样式应用于所有类型的选择器。

语法

以下是语法 −

pickerStyle(style)

示例

以下 SwiftUI 程序设置选择器的样式。

import SwiftUI

struct ContentView: View {
   @State private var selectedOption = "Open"
   let options = ["New", "Open", "SaveAs", "Save", "Recent"]
   var body: some View {
      VStack{
         Text("Picker 1").font(.title)
         Picker("Select an option", selection: $selectedOption){
            ForEach(options, id:\.self){x  in Text(x)}
         }.pickerStyle(.inline)
         Text("Picker 2").font(.title)
         Picker("Select an option", selection: $selectedOption){
            ForEach(options, id:\.self){x  in Text(x)}
         }.pickerStyle(.menu)
         Text("Picker 3").font(.title)
         Picker("Select an option", selection: $selectedOption){
            ForEach(options, id:\.self){x  in Text(x)}
         }.pickerStyle(.palette)
         Text("Picker 4").font(.title)
         Picker("Select an option", selection: $selectedOption){
            ForEach(options, id:\.self){x  in Text(x)}
         }.pickerStyle(.segmented)
         Text("Picker 5").font(.title)
         Picker("Select an option", selection: $selectedOption){
            ForEach(options, id:\.self){x  in Text(x)}
         }.pickerStyle(.wheel)
      }
   }
}
#Preview {
   ContentView()
}

输出

SwiftUI 中的 DatePicker 视图

SwiftUI 中的 DatePicker 视图用于显示一组日期、时间或两者，以便用户可以根据需要选择它们。它还提供了一个用户友好的界面来选择日历日期、时间或两者。它还可以以各种样式显示数据，例如轮子、紧凑、图形等。

语法

以下是语法 −

Picker(
   _ titleKey: LocalizedStringKey,
   selection: BindingValue,
   displayedComponents: [.time, .Date]
)

参数

此视图使用以下参数 −

• titleKey:表示其用途。

• selection:表示当前选定的选项。

• displayedComponents:表示日期组件，例如 .hourAndMinute、.date、.hourMinuteAndSecond 等。

示例

以下 SwiftUI 程序创建一个日期选择器。

import SwiftUI

struct ContentView: View {
   @State private var selectedOption = Date()
  
   var body: some View {
      VStack{
         Text("Date Picker").font(.title)
         DatePicker("Select Date", selection: $selectedOption, displayedComponents: [.date])
      }
   }
}

#Preview {
   ContentView()
}

输出

设置 DatePicker 样式

在 SwiftUI 中，我们可以借助 datePickerStyle() 修饰符来设置日期选择器的样式。它可以自定义或预定义样式来设置日期选择器的样式。自定义样式应符合 datePickerStyle 协议。它可以设置自动、图形、轮盘和紧凑型日期选择器的样式。

语法

以下是语法 −

pickerStyle(style)

示例

以下 SwiftUI 程序设置日期选择器的样式。

import SwiftUI

struct ContentView: View {
   @State private var selectedOption = Date()
   
   var body: some View {
      VStack{
         Text("Date Picker 1").font(.title)
         DatePicker("Select Date", selection: $selectedOption, displayedComponents: [.date]).datePickerStyle(.compact)
         Text("Date Picker 2").font(.title)
         DatePicker("Select Date", selection: $selectedOption, displayedComponents: [.date]).datePickerStyle(.wheel)
         Text("Date Picker 3").font(.title)
         DatePicker("Select Date", selection: $selectedOption, displayedComponents: [.date]).datePickerStyle(.graphical)
      }
   }
}

#Preview {
   ContentView()
}

输出

SwiftUI 中的 ColorPicker 视图

在 SwiftUI 中，ColorPicker 用于从给定的颜色系统中选择颜色。它提供了一个调色板，其中包含系统支持的所有颜色，用户可以从该调色板中选择一种新颜色。

它还提供了不透明度设置功能，以便我们可以调整所选颜色的不透明度。

语法

以下是语法 −

ColorPicker(
   _ titleKey: LocalizedStringKey,
   selection: BindingValue,
   supportsOpacity: Bool
)

参数

此视图使用以下参数 −

• titleKey:表示选择器的用途或标题。

• selection:表示当前选定的颜色。

• supportsOpacity:表示颜色的不透明度。默认情况下，此参数的值为 true，这意味着颜色选择器将包含不透明度滑块。

示例

以下 SwiftUI 程序创建一个颜色选择器。

import SwiftUI

struct ContentView: View {
   @State private var selectedOption : Color = .pink
   
   var body: some View {
      VStack{
         ColorPicker("Select Color", selection: $selectedOption)
      }
   }
}

#Preview {
   ContentView()
}

输出