[SUI] Picker

Un Picker sirve para presentar una lista de valores en un componente gráfico que simula una rueda, una lista, o una serie de botones.

• init(_:selection:content:). titleKey es la etiqueta. selection almacena el valor seleccionado. content tiene la lista de vistas para presentar los valores, que puede ser creada de forma estática (una vista por línea) o dinámicamente con un ForEach.

struct ContentView: View {
  @State private var selectedFlavor: String = "Chocolate"

  var body: some View {
    List {
      Picker("Flavor", selection: $selectedFlavor) {
        Text("Chocolate")
        Text("Vanilla")
        Text("Strawberry")
      }
    }
  }
}

El estilo por defecto del Picker es PickerStyle.menu que crea un menú desplegable en MacOS y un botón que abre un menú contextual en dispositivos móviles.

En el ejemplo anterior, el Picker mostraba su etiqueta "Flavor" porque estaba metido en un List. Si se usa otro contenedor, no se muestra la etiqueta.

struct ContentView: View {
  @State private var selectedFlavor: String = "Chocolate"

  var body: some View {
    VStack {
      Picker("Flavor", selection: $selectedFlavor) {
        Text("Chocolate")
        Text("Vanilla")
        Text("Strawberry")
      }
    }
  }
}

Identificando valores con tag

El Picker identifica los items por el valor mostrado al usuario. Si se quiere usar un valor diferente para identificar a cada vista, se debe especificar con tag(_:includeOptional:).

A continuación se ilustra como poner los tag con una enumeración:

enum Flavor: String, CaseIterable, Identifiable {
  case chocolate, vanilla, strawberry
  var id: Self { self }
}

struct ContentView: View {
  @State private var selectedFlavor: Flavor = .chocolate

  var body: some View {
    List {
      Picker("Flavor", selection: $selectedFlavor) {
        Text("Chocolate").tag(Flavor.chocolate)
        Text("Vanilla").tag(Flavor.vanilla)
        Text("Strawberry").tag(Flavor.strawberry)
      }
    }
  }
}

Usando la misma enumeración para construir la lista de valores dinámicamente:

struct ContentView: View {
  @State private var selectedFlavor: Flavor = .chocolate

  var body: some View {
    List {
      Picker("Flavor", selection: $selectedFlavor) {
        ForEach(Flavor.allCases) { flavor in
          Text(flavor.rawValue.capitalized).tag(flavor)
        }
      }
    }
  }
}

Usando índices enteros:

struct ContentView: View {
  private let flavors = ["A", "B", "C"]
  @State private var selectedFlavor: Int = 0

  var body: some View {
    List {
      Picker("Flavor", selection: $selectedFlavor) {
        ForEach(flavors.indices) { index in
          let flavor = flavors[index]
          Text(flavor).tag(index)
        }
      }
    }
  }
}

Modificando el estilo

El modificador pickerStyle(_:) permite aplicar un PickerStyle a un Picker, que tiene unos valores predefinidos:

• automatic: El estilo se adapta al dispositivo.
• menu: Crea un menú contextual
• segmented: Los valores se convierten en botones. Esta opción se usa cuando hay pocos valores para elegir.
• wheel: Muestra los valores en una rueda.

struct ContentView: View {
  private let cities = ["Arauca", "Bogota", "Cali"]
  @State private var selectedCity: String = "Arauca"

  var body: some View {
    List {
      Picker("Ciudades", selection: $selectedCity) {
        ForEach(cities, id: \.self) { city in
          Text(city)
        }
      }
      .pickerStyle(.segmented)
    }
  }
}