Composant Place Search

Le composant Place Search du kit d'UI Places affiche les résultats d'une recherche de lieu dans une liste.

Vous pouvez personnaliser la liste de recherche de lieux. Vous pouvez spécifier ce qui suit :

Le contenu à afficher
Taille du support en orientation verticale
Troncation du texte
Orientation
Remplacements de thème correspondant à la langue de conception de votre marque et de votre application
Position de l'attribution
Indique si un lieu peut être sélectionné.

Vous pouvez également personnaliser la requête pour effectuer une Search by text request ou une Search Nearby request.

Facturation

Vous êtes facturé chaque fois que la valeur de liaison SearchByTextRequest() ou PlaceSearchViewRequest() est modifiée.

Ajouter la recherche de lieux à votre application

Ajoutez le widget Place Search à l'aide de PlaceSearchView class.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

Lorsque vous souhaitez que votre application charge un résultat de recherche de texte ou de recherche à proximité, mettez à jour votre valeur PlaceSearchViewRequest.

Swift

// use placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request

  @State private var let placeSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )

Vous pouvez également recevoir des rappels lorsque le composant se charge, qu'un lieu est sélectionné ou qu'une erreur se produit lors du chargement du composant.

Swift

.onLoad { places in
  print("places: \(places)")
}
.onRequestError { error in
  print("error: \(error)")
}
.onPlaceSelected { place in
  print("place: \(place)")
}

Personnaliser le composant Place Search

Personnaliser le contenu

Vous devez spécifier le contenu que votre composant affichera.

Cet exemple configure le composant pour afficher l'adresse et la note du lieu.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating()]
)

Vous pouvez également personnaliser les aspects suivants du contenu qui s'affiche dans votre composant de recherche de lieux :

content : contenu affiché dans le composant.
mediaSize : taille de la photo dans l'orientation verticale du fragment. La valeur par défaut est "small". Spécifié dans le contenu.
preferTruncation : indique si le texte de chaque vue Détails du lieu doit être tronqué. La valeur par défaut est "false" (inactif).
theme : votre thème personnalisé qui hérite de PlacesMaterialTheme. En savoir plus sur les thèmes
attributionPosition : indique si l'attribution Google Maps doit s'afficher en haut ou en bas du composant. La valeur par défaut est ".top".
selectable : indique si chaque lieu de la liste peut être sélectionné. Si elle est sélectionnable, la fermeture onPlaceSelected sera appelée après la sélection d'un lieu. La valeur par défaut est "false" (inactif).

Ajoutez votre configuration de personnalisation à PlaceSearchConfiguration.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address, .rating, .media(size: .large)],
    preferTruncation: true, // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom, // default is top
    selectable: true // default is false
)

Personnaliser l'orientation

L'orientation par défaut est verticale. Vous pouvez spécifier une orientation horizontale dans PlaceSearchView.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

Personnaliser le thème

Vous pouvez spécifier un thème qui remplace l'un des attributs de style par défaut. La valeur par défaut est PlacesMaterialTheme. Pour en savoir plus sur les thèmes, consultez la documentation sur le composant Détails du lieu.

Swift

@Environment(\.colorScheme) var colorScheme
var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      color.outlineDecorative = (colorScheme == .dark ? .white : .black)
      color.onSurface = (colorScheme == .dark ? .yellow : .red)
      color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
      color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
      color.positive = (colorScheme == .dark ? .yellow : .red)
      color.primary = (colorScheme == .dark ? .yellow : .purple)
      color.info = (colorScheme == .dark ? .yellow : .purple)
      var shape = PlacesMaterialShape()
      shape.cornerRadius = 10
      var font = PlacesMaterialFont()
      font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
      font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
      font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
      var attribution = PlacesMaterialAttribution()
      attribution.lightModeColor = .black
      attribution.darkModeColor = .white
      theme.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
}

Exemple

Swift

struct PlaceSearchDemoView: View {
  private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating(), .type(), .media(size: .large)],
    preferTruncation: true,  // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom,  // default is top
    selectable: true  // default is false
  )
  // can also do let placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request
  @State private var placeSearchViewRequest: PlaceSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )
  var body: some View {
    PlaceSearchView(
      orientation: .horizontal,  // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
    )
    .onLoad { places in
      print("places: \(places)")
    }
    .onRequestError { error in
      print("error: \(error)")
    }
    .onPlaceSelected { place in
      print("place: \(place)")
    }
  }
}