Componente Place Search

Il componente Place Search del Places UI Kit esegue il rendering dei risultati di una ricerca di luoghi in un elenco.

Puoi personalizzare l'elenco Ricerca luoghi. Puoi specificare:

I contenuti da visualizzare
Dimensioni dei contenuti multimediali in orientamento verticale
Troncamento testo
L'orientamento
Override del tema che corrispondono al brand e al linguaggio di progettazione dell'app
La posizione dell'attribuzione
Se un luogo è selezionabile

Puoi anche personalizzare la richiesta per eseguire un'Search by text request o un Search Nearby request.

Fatturazione

L'addebito viene effettuato ogni volta che viene modificato il valore di binding SearchByTextRequest() o PlaceSearchViewRequest().

Aggiungere la ricerca di luoghi all'app

Aggiungi il widget Ricerca luoghi utilizzando PlaceSearchView class.

Swift

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

Quando vuoi che la tua app carichi un risultato di ricerca di testo o di ricerca nelle vicinanze, aggiorna il valore di 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
      )
    )
  )

Puoi anche ricevere facoltativamente callback quando il componente viene caricato, viene selezionato un luogo o quando si verifica un errore durante il caricamento del componente.

Swift

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

Personalizzare il componente Place Search

Personalizzare i contenuti

Devi specificare i contenuti che verranno visualizzati dal componente.

Questo esempio configura il componente per visualizzare l'indirizzo e la valutazione del luogo.

Swift

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

Puoi anche personalizzare facoltativamente i seguenti aspetti dei contenuti visualizzati nel componente Ricerca luoghi:

content: i contenuti mostrati nel componente.
mediaSize: la dimensione della foto nell'orientamento verticale del frammento. Il valore predefinito è small. Specificato nei contenuti.
preferTruncation: indica se troncare il testo di ogni visualizzazione Dettagli del luogo. Il valore predefinito è false.
theme: il tema personalizzato che eredita da PlacesMaterialTheme. Scopri di più sui temi.
attributionPosition: indica se mostrare l'attribuzione di Google Maps nella parte superiore o inferiore del componente. Il valore predefinito è .top.
selectable: indica se ogni luogo nell'elenco è selezionabile. Se è selezionabile, la chiusura di onPlaceSelected verrà chiamata dopo la selezione di un luogo. Il valore predefinito è false.

Aggiungi la configurazione di personalizzazione a 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
)

Personalizzare l'orientamento

L'orientamento predefinito è verticale. Puoi specificare un orientamento orizzontale in PlaceSearchView.

Swift

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

Personalizzare il tema

Puoi specificare un tema che sostituisce uno qualsiasi degli attributi di stile predefiniti. Il valore predefinito è PlacesMaterialTheme. Per ulteriori informazioni sui temi, consulta la documentazione del componente Dettagli luogo.

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()
    }
}

Esempio

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)")
    }
  }
}