自定义样式设置
  您可以自定义以下 Places UI Kit 组件和非 UI Kit 功能的颜色、排版、间距、边框和边角:
Places UI Kit 采用设计系统方法进行视觉自定义,大致基于 Material Design(进行了一些 Google 地图特有的修改)。请参阅 Material Design 的颜色和排版参考。默认情况下,样式遵循 Google 地图视觉设计语言。
使用 placesMaterialColor、placesMaterialFont、placesMaterialShape 和 placesMaterialTheme 结构体自定义组件的外观和风格。
您可以自定义以下样式:
| 主题属性 | 用法 | 
|---|---|
| 颜色 | |
theme.color.surface | 
    容器和对话框背景 | 
theme.color.outlineDecorative | 
    容器边框 | 
theme.color.primary | 
    链接、加载指示器、概览图标 | 
theme.color.onSurface | 
    标题、对话框内容 | 
theme.color.onSurfaceVariant | 
    地点信息 | 
theme.color.secondaryContainer | 
    按钮背景 | 
theme.color.onSecondaryContainer | 
    按钮文字和图标 | 
theme.color.neutralContainer | 
    查看日期标记、加载占位符形状 | 
theme.color.onNeutralContainer | 
    审核日期,加载时出错 | 
theme.color.positiveContainer | 
    “有电动汽车充电桩”徽章 | 
theme.color.onPositiveContainer | 
    “有电动汽车充电桩”徽章内容 | 
theme.color.positive | 
    放置“营业中”标签 | 
theme.color.negative | 
    “已关闭”地点现在会显示标签 | 
theme.color.info | 
    “无障碍入口”图标 | 
theme.measurement.borderWidthButton | 
    “在地图中打开”按钮和“确定”按钮 | 
| 排版 | |
theme.font.bodySmall | 
    地点信息 | 
theme.font.bodyMedium | 
    地点信息,对话框内容 | 
theme.font.labelMedium | 
    徽章内容 | 
theme.font.labelLarge | 
    按钮内容 | 
theme.font.headlineMedium | 
    对话框标题 | 
theme.font.displaySmall | 
    地点名称 | 
theme.font.titleSmall | 
    地点名称 | 
| 间距 | |
theme.measurement.spacingExtraSmall | 
    |
theme.measurement.spacingSmall | 
    |
theme.measurement.spacingMedium | 
    |
theme.measurement.spacinglarge | 
    |
theme.measurement.spacingExtraLarge | 
    |
theme.measurement.spacingTwoExtraLarge | 
    |
| 效果衡量 | |
borderWidth | 
    Container | 
theme.measurement.borderWidthButton | 
    |
| 形状 | |
theme.shape.cornerRadius | 
    Container | 
theme.shape.cornerRadiusButton | 
    “在 Google 地图中打开”按钮和“确定”按钮(不包括圆形图标按钮) | 
theme.shape.cornerRadiusThumbnail | 
    地点缩略图 | 
theme.shape.cornerRadiusCollageOuter | 
    媒体拼贴 | 
theme.shape.cornerRadiusCard | 
    地点卡片、用户评价卡片 | 
theme.shape.cornerRadiusDialog | 
    Google 地图披露声明对话框 | 
| Google 地图品牌提供方信息 | |
attribution.lightModeColor | 
    浅色主题 Google 地图署名和披露信息按钮(白色、灰色和黑色枚举) | 
attribution.darkModeColor | 
    深色主题 Google 地图署名和披露信息按钮(白色、灰色和黑色枚举) | 
归因颜色
  《Google 地图服务条款》要求您使用三种品牌颜色之一来注明 Google 地图的版权归属信息。在进行自定义更改后,此提供方信息必须可见且可访问。
我们提供 3 种品牌颜色供您选择,这些颜色可以针对浅色主题和深色主题分别设置:
- 浅色主题:
attributionColorLight,包含白色、灰色和黑色枚举。 - 深色主题:
attributionColorDark,包含白色、灰色和黑色的枚举。 
示例
此函数会创建一个主题,用于替换默认样式属性。未被覆盖的任何主题背景属性都使用默认样式。Swift
// Same for compact and full func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme { var theme = PlacesMaterialTheme() var color = PlacesMaterialColor() color.surface = (colorScheme == .dark ? .blue : .gray) color.buttonBorder = (colorScheme == .dark ? .pink : .orange) 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.measurement.borderWidthButton = 1 theme.color = color theme.shape = shape theme.font = font theme.attribution = attribution return theme }