کامپوننت جستجوی مکان
کامپوننت جستجوی مکان از کیت رابط کاربری Places، نتایج جستجوی مکان را در یک لیست نمایش میدهد.

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