عنصر «جستجوی جاها»
عنصر «جستجوی مکان» در «کیت میانای کاربر جاها» نتایج جستجوی مکان را در فهرستی ارائه میکند.
میتوانید فهرست «جستجوی مکان» را سفارشیسازی کنید. میتوانید مشخص کنید:
- محتوای نمایشدادنی
- اندازه رسانه در جهت عمودی
- کوتاه کردن نوشتار
- جهت
- جایگزینهای زمینهای که با نمانام و زبان طراحی برنامه شما مطابقت دارند
- موقعیت اسنادی
- آیا مکان قابلانتخاب است یا نه
همچنین میتوانید درخواست را سفارشیسازی کنید تا SearchByTextRequest یا SearchNearbyRequest را انجام دهد.
صورتحساب
هر بار که مقدار پیوند SearchByTextRequest() یا PlaceSearchViewRequest() تغییر کند، صورتحساب برایتان صادر میشود.
افزودن «جستجوی مکان» به برنامه
ابزاره «جستجوی مکان» را بااستفاده از PlaceSearchView class اضافه کنید.
Swift
PlaceSearchView( orientation: .horizontal, // default is vertical request: $placeSearchViewRequest, configuration: configuration )
وقتی میخواهید برنامهتان نتیجه جستجوی نوشتاری یا جستجوی اطراف را بار کند، مقدار 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 ) ) )
همچنین میتوانید بهصورت اختیاری زمانی که عنصر بار میشود، مکانی انتخاب میشود، یا زمانی که خطایی در بار کردن عنصر وجود دارد، تماس برگشتی دریافت کنید.
Swift
.onLoad { places in print("places: \(places)") } .onRequestError { error in print("error: \(error)") } .onPlaceSelected { place in print("place: \(place)") }
سفارشیسازی کردن عنصر «جستجوی مکان»
سفارشیسازی محتوا
باید مشخص کنید که مؤلفهتان کدام محتوا را نمایش خواهد داد.این مثال مؤلفه را پیکربندی میکند تا نشانی و ردهبندی «مکان» را نمایش دهد.
Swift
private let configuration = PlaceSearchConfiguration( content: [.address(), .rating()] )
همچنین میتوانید جنبههای زیر محتوایی را که در عنصر «جستجوی مکان» شما نشان داده میشود بهصورت اختیاری سفارشیسازی کنید:
content: محتوای نشاندادهشده در عنصر.mediaSize: اندازه عکس در جهت عمودی قطعه. پیشفرض کوچک است. در محتوا مشخص شده است.preferTruncation: اینکه آیا نوشتار هر نمای «جزئیات مکان» کوتاه شود یا نه. پیشفرض «نادرست» است.theme: زمینه سفارشی شما که از PlacesMaterialTheme ارث میبرد. درباره زمینهبندی بیشتر بدانید.attributionPosition: اینکه ارجاع Google Maps در بالا یا پایین عنصر نشان داده شود. پیشفرض .top است.selectable: اینکه هر مکان در فهرست قابلانتخاب باشد یا نه. اگر قابلانتخاب باشد، پساز انتخاب مکان،onPlaceSelectedبسته خواهد شد. پیشفرض «نادرست» است.
پیکربندی سفارشیسازی خود را به 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 )
سفارشیسازی جهت
جهت پیشفرض عمودی است. میتوانید جهت افقی را در PlaceSearchView مشخص کنید.
Swift
PlaceSearchView( orientation: .horizontal, // default is vertical request: $placeSearchViewRequest, configuration: configuration )
سفارشیسازی کردن زمینه
میتوانید زمینهای را مشخص کنید که هریک از مشخصههای سبک پیشفرض را ملغی میکند. پیشفرض PlacesMaterialTheme است.
برای اطلاعات بیشتر درباره زمینهسازی، به بخش سبکدهی سفارشی مراجعه کنید.
«کیت واسط کاربر مکانها» بهطور پیشفرض زمینه تیره ارائه میدهد، بنابراین ممکن است لازم باشد زمینه تیره و روشن را سفارشیسازی کنید. برای سفارشیسازی زمینه تیره، مقادیر .dark و attribution.darkModeColor را به زمینه سفارشی خود اضافه کنید.
مثالها
افزودن عنصر «جستجوی مکان»
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)") } } }
سفارشیسازی کردن زمینه
«کیت واسط کاربر مکانها» بهطور پیشفرض زمینه تیره ارائه میدهد، بنابراین ممکن است لازم باشد زمینه تیره و روشن را سفارشیسازی کنید. برای سفارشیسازی زمینه تیره، مقادیر .dark و attribution.darkModeColor را به زمینه سفارشیتان اضافه کنید.
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() } }