مكوّن "البحث عن الأماكن"
يعرض مكوّن "البحث عن أماكن" في Places UI Kit نتائج البحث عن مكان في قائمة.

يمكنك تخصيص قائمة "البحث عن الأماكن". يمكنك تحديد ما يلي:
- المحتوى المطلوب عرضه
- حجم الوسائط في الاتجاه العمودي
- اقتطاع النص
- الاتجاه
- عمليات إلغاء المظهر التي تتطابق مع علامتك التجارية ولغة تصميم تطبيقك
- موضع تحديد المصدر
- ما إذا كان يمكن اختيار مكان
يمكنك أيضًا تخصيص الطلب لتنفيذ 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" في أعلى المكوّن أو أسفله. القيمة التلقائية هي .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
.
راجِع قسم التصميم المخصّص لمزيد من المعلومات حول التصميم.
توفّر حزمة Places UI Kit مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرين الداكن والفاتح. لتخصيص المظهر الداكن، أضِف قيمًا إلى .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)") } } }
تخصيص المظهر
توفّر حزمة Places UI Kit مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرين الداكن والفاتح. لتخصيص المظهر الداكن، أضِف قيمًا لـ .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() } }