جزء جستجوی مکان
مؤلفه جستجوی مکان در کیت UI مکان ها، نتایج جستجوی مکان را در یک لیست ارائه می کند.

می توانید لیست جستجوی مکان را سفارشی کنید. می توانید مشخص کنید:
- محتوایی برای نمایش
- اندازه رسانه در جهت عمودی
- کوتاه کردن متن
- جهت گیری
- طرح زمینهای که با برند و زبان طراحی برنامه شما مطابقت دارد
- موقعیت انتساب
- اینکه آیا مکانی قابل انتخاب است یا خیر
همچنین میتوانید درخواست را برای انجام SearchByTextRequest
یا SearchNearbyRequest
سفارشی کنید.
صورتحساب
هر بار که مقدار اتصال SearchByTextRequest()
یا PlaceSearchViewRequest()
تغییر می کند، صورتحساب شما دریافت می شود.
جستجوی مکان را به برنامه خود اضافه کنید
ویجت جستجوی مکان را با استفاده از 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
: اینکه آیا متن هر نمای جزئیات مکان کوتاه شود. پیش فرض نادرست است. -
theme
: طرح زمینه سفارشی شما که از PlacesMaterialTheme به ارث می رسد. درباره قالب بندی بیشتر بیاموزید. -
attributionPosition
: اینکه آیا انتساب Google Maps در بالا یا پایین جزء نشان داده شود. پیش فرض .top است. -
selectable
: آیا هر مکان در لیست قابل انتخاب است یا خیر. اگر قابل انتخاب باشد، بسته شدنonPlaceSelected
پس از انتخاب مکان فراخوانی می شود. پیش فرض نادرست است.
پیکربندی سفارشی سازی خود را به 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 )
تم را سفارشی کنید
می توانید موضوعی را تعیین کنید که هر یک از ویژگی های سبک پیش فرض را لغو کند. پیش فرض PlacesMaterialTheme
است.
برای اطلاعات بیشتر در مورد تم، بخش استایل سفارشی را ببینید.
Places UI Kit به طور پیشفرض یک تم تیره ارائه میکند، بنابراین ممکن است لازم باشد هر دو تم تاریک و روشن را سفارشی کنید. برای سفارشی کردن طرح زمینه تیره، مقادیر .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 UI Kit به طور پیشفرض یک تم تیره ارائه میکند، بنابراین ممکن است لازم باشد هر دو تم تاریک و روشن را سفارشی کنید. برای سفارشی کردن طرح زمینه تیره، مقادیر .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() } }