此软件包是 SNAP 套件的一部分。

SnapTheme

一个工具集,用于抽象多平台 SwiftUI 应用程序的颜色、字体、图标和数字。在 Theme 中定义语义属性,并将它们应用于您的视图,以实现一致的 UI 并兼顾可维护性。

Documentation

动机

外观和感觉的一致性非常重要。特别是对于不断增长的应用程序项目,当您决定调整一些属性或需要进行调整以适应平台变化或设计趋势时。SnapTheme 的目标是在一个地方定义视觉属性,以实现:一致的 UI,具有简单的调整和快速的实验,但具有强大的可维护性。

您无需在各处定义设计属性,而是注册一个语义键,分配一个定义,并在您的 SwiftUI 视图中使用它。您还可以定义多个主题,让用户选择自己喜欢的主题。

Theme 自带

主题被注入到 Environment 中,以便 ViewModifier 和 Views 可以使用。

默认情况下,字体和数字会通过 DynamicType 进行缩放。这带来了一些额外的好处

如何使用

主题带有一些预设,并且易于使用和自定义。

定义主题

在自定义主题中覆盖预设属性

let theme = Theme(
	colors: [
		.accentColorBase : .color(.purple)
	], 
	...
)

和/或定义您自己的属性

extension Theme.ColorKey {
	static let exampleColor = Theme.ColorKey("exampleColor", default: .color(.purple))
}

应用主题

contentView.theme(apply: theme)

使用主题

Text("Example").color(.exampleColor)

定义

ColorKey

表示颜色的语义含义(.foreground.background.accent.destructive)。它们不描述颜色或特定用例(.red.buttonLabel)。

SurfaceKey

Surface 表示 ShapeStyle,可以是颜色、材质或渐变。

FontKey

表示文本的语义含义(.textTitle.textSubtitle)并分配 FontDefinition

IconKey

表示视觉指示器的语义含义并分配图像。

NumberKey

表示特定值。通过动态类型缩放。

键分配

TextSurfaceKey

为字体分配 Surface

BackgroundKey

通过分配 Surface 和高亮 Surface 来定义语义布局元素(.screen.content.contentSecondary)的背景。

SnapAppThemeDemo

主题的演示操作可在 snap-app-theme-demo 中找到。它为所有预设属性提供了参考,演示了默认值,并提供了一些配置集来更改应用程序中的属性。

主题的元素

ThemeKeys

键和默认值。

ThemeValues

ThemeKey 注册的值。

示例:BackgroundValue、ColorValue (TextSurface)、FontValue、IconValue、NumberValue

ThemeModifier

使用 ThemeKey 应用配置的值到视图的修饰符。

示例:.theme(background:).theme(color:).theme(text:).theme(padding:)

LayoutElements

用于布局的通用容器视图。构建屏幕的基本构建块。

示例:ThemeScreenThemeHStack(spacing:)ThemeElement

Components

显示内容并使用 ThemeKey 配置样式和布局的视图。

示例:ThemeLabel(icon:)ThemeCornerView(icon:)ThemeRectangle(cornerRadius:)

Container

容器使用 ThemeKey 来布局内容。

示例:ThemeCloseContainerThemeSectionHeaderContainer

Styles

使用 ThemeKey 的 SwiftUI 样式的定义。

示例:ThemeButtonStyleThemeLabelStyleTag