Компонент автозаполнения Basic Place

Компонент Basic Place Autocomplete из Places UI Kit позволяет добавить отдельный компонент пользовательского интерфейса, который возвращает ID места , когда пользователь выбирает место. Компонент представляет собой полноэкранное окно, отображающее строку поиска, в которую пользователи могут вводить запрос. По мере ввода пользователем текста под строкой поиска будет отображаться список результатов автозаполнения. При нажатии на место разработчику возвращается объект Place, содержащий только ID места. Этот компонент настраиваемый.

Компонент принимает географические границы и другие параметры поиска через структуру AutocompleteFilter .

В ответе предоставляется структура Place , в которой заполнено только поле placeID .

Компонент Basic Place Autocomplete имеет следующие параметры настройки: плотность списка и включение или отсутствие значков местоположения. Для настройки компонента используйте структуру AutocompleteUICustomization .

Компонент Basic Place Autocomplete можно использовать как самостоятельно, так и в сочетании с другими API и сервисами платформы Google Maps.

Выставление счетов

С вас взимается плата каждый раз, когда компонент открывается и выполняется запрос. Повторная оплата за эту сессию взиматься не будет, если сессия не истечет или не будет выбрано место из списка.

Добавьте компонент «Базовое автозаполнение» в ваше приложение.

Настройте параметры фильтра автозаполнения (например, типы возвращаемых результатов, страну, по которой следует ограничить результаты, координаты региона для результатов и информацию о расстоянии, если задана точка отсчета пользователя) так же, как и для использования функции автозаполнения мест (новая версия) без Places UI Kit. Полные инструкции и пример кода для создания фильтра автозаполнения см. в документации по функции автозаполнения мест (новая версия) .

После создания фильтра автозаполнения вы можете создать структуру с настройками пользовательского интерфейса. См. параметры настройки и инструкции .

Затем создайте кнопку, которая запустит ваш пользовательский компонент «Базовое автозаполнение».

Быстрый

  Button("Search for a place") {
    showWidget.toggle()
  }
  .basicPlaceAutocomplete(
    show: $showWidget
     // ...
  )

См. полный пример .

Настройка базового компонента автозаполнения

Настройте контент

Плотность списка

Вы можете выбрать отображение списка в две строки или в несколько строк. Используйте параметры класса AutocompleteUICustomization в параметре AutocompleteListDensity ( .twoLine или .multiLine ). Если плотность списка не указана, компонент отобразит список в две строки.

Значок местоположения

Вы можете выбрать, отображать ли значок места по умолчанию в списке результатов. Используйте параметры класса AutocompleteUIIcon ( .defaultIcon или .noIcon ) в классе AutocompleteUICustomization .

Настройте тему

Вы можете указать тему, которая переопределяет любые атрибуты стиля по умолчанию. Вы можете настроить цвета, типографику, отступы, границы и углы компонента «Подробная информация о месте». По умолчанию используется тема PlacesMaterialTheme .

Для всех непереопределенных атрибутов темы используются стили по умолчанию.

В Places UI Kit по умолчанию используется темная тема, поэтому вам может потребоваться настроить как темную, так и светлую темы. Чтобы настроить темную тему, добавьте значения для .dark и attribution.darkModeColor в вашу пользовательскую тему .

Более подробную информацию о настройке тем оформления см. в разделе «Настройка стиля» .

Добавьте в компонент «Базовое автозаполнение» настройки контента и темы оформления.

Используйте класс AutocompleteUICustomization для настройки компонента Basic Autocomplete.

Быстрый

let uiCustomization = AutocompleteUICustomization(
    listDensity: .multiLine,
    listItemIcon: .noIcon,
    theme: PlacesMaterialTheme()
)

Пример

Добавить компонент «Базовое автозаполнение»

Важно: установите начальное значение параметра showWidget равным false, чтобы ваш пользовательский компонент отображался при нажатии пользователем кнопки.

В этом примере создается пользовательский компонент «Базовое автозаполнение» с кнопкой. Заданы значок по умолчанию, плотность списка в две строки и пользовательская тема оформления. Фильтр автозаполнения настроен на поиск мест, связанных с бухгалтерским учетом, в Лас-Вегасе и его окрестностях.

Быстрый

  // Note: You must provide an API key in your app entry point first.
  // A demo view of the basic place autocomplete widget.
  public struct BasicPlaceAutocompleteView: View {
    @State private var fetchedPlace: Place?
    @State private var placesError: PlacesError?
    @State private var showWidget = false
    public var body: some View {
      let types: Set<PlaceType> = [.accounting]
      let countries: Set<String> = ["US"]
      let origin = CLLocation(latitude: 36.19030535579595, longitude: -115.25397680618019)
      let coordinateRegion = RectangularCoordinateRegion(
        northEast: CLLocationCoordinate2D(
          latitude: 36.25290087640495, longitude: -115.08025549571225),
        southWest: CLLocationCoordinate2D(latitude: 36.06607422287787, longitude: -115.33431432920293)
      )
      let regionCode = "US"
      let inputOffset = 10
      let filter = AutocompleteFilter(
        types: types,
        countries: countries,
        origin: origin,
        coordinateRegionBias: coordinateRegion,
        regionCode: regionCode)
      let uiCustomization = AutocompleteUICustomization(
        listDensity: .multiLine,
        listItemIcon: .noIcon,
        theme: PlacesMaterialTheme()
      )
      VStack {
        Button("Search for a place") {
          showWidget.toggle()
        }
        .basicPlaceAutocomplete(
          filter: filter,
          uiCustomization: uiCustomization ?? AutocompleteUICustomization(),
          show: $showWidget,
          onSelection: { place in
            guard let placeID = place.placeID else {
              self.placesError = .internal(
                "Could not fetch place details because place ID from selected suggestion not found."
              )
              return
            }
            Task {
              let placesClient = await PlacesClient.shared
              let fetchPlaceRequest = FetchPlaceRequest(
                placeID: placeID,
                placeProperties: [.displayName, .formattedAddress]
              )
              switch await placesClient.fetchPlace(with: fetchPlaceRequest) {
              case .success(let place):
                print("Fetched place: \(place)")
                self.fetchedPlace = place
              case .failure(let placesError):
                print("Failed to fetch place: \(placesError)")
                self.placesError = placesError
              }
            }
          },
          onError: { placesError in
            self.placesError = placesError
          }
        )
        if let placesError = $placesError.wrappedValue {
          Text(placesError.localizedDescription)
            .frame(maxWidth: .infinity, alignment: .leading)
        } else if let fetchedPlace = $fetchedPlace.wrappedValue {
          Text("\(fetchedPlace)")
            .frame(maxWidth: .infinity, alignment: .leading)
        }
      }
    }
  }

Настройте тему

Быстрый

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