SwiftUI — secondarySystemBackground

在 iOS/macOS 开发中，像 secondaryBackgroundColor 这样的属性通常是设计用来表达应用程序界面的辅助背景颜色，而 background 则是表示主要的背景颜色。这些属性通常用于细化 UI 设计，使界面更具层次感，同时也遵循系统的设计规范。

以下是 secondaryBackgroundColor 和 background 的具体区别和应用场景：

1. background 的含义 #

  • background 通常表示主要背景颜色，适用于整个界面的背景或主容器的背景。
  • 用途：
    • 设置 view 或屏幕的主背景颜色。
    • 通常用于全屏布局或最外层视图。
  • 示例：
    • 在系统默认 UI 中，明亮模式下，background 的颜色可能是白色，暗黑模式下是黑色或深灰色。

示例代码： #

view.backgroundColor = UIColor.systemBackground
// 设置主背景颜色
  • 典型系统颜色：
    • systemBackground：主要背景颜色（依赖于系统的 dark/light 模式）。
    • 特点： 在不同的 UI 环境（标准 or 深色模式）下会动态变化。

2. secondaryBackgroundColor 的含义 #

  • secondaryBackgroundColor 是辅助背景颜色，通常用于比主背景更浅、次递进的层级视图中。
  • 用途：
    • 用于分隔或衬托主背景中的内容。
    • 创建更复杂的多层次 UI 时，用作次要容器的背景，从而实现层次感。
    • 比如，在一段内容的分组中，为不同的区块设置稍微不同的背景。

示例代码： #

view.backgroundColor = UIColor.secondarySystemBackground
// 设置辅助背景颜色
  • 典型系统颜色：
    • secondarySystemBackground：辅助背景颜色。
    • 特点：
      • 比 systemBackground 更具有对比性，用于次要内容的容器。
      • 在浅色模式和暗黑模式下动态变化，例如：
        • 浅色模式：略浅的灰色。
        • 暗色模式：略深的灰色。

3. 区别：background vs secondaryBackgroundColor #

属性background（系统背景颜色）secondaryBackgroundColor（辅助背景颜色）
用途设置主要背景颜色，适用于全局或最外层的 View。设置次要背景颜色，用于内容分组或深一层的容器。
默认设计用于大容器视图（如 TableView 的背景、主要屏幕区域）。用于次要容器视图（如 TableView 的 Section 背景、详细分组）。
外观主背景色，颜色显得更突出。辅助背景色，比 background 浅或者深，界面层次更分明。
系统颜色名称iOS 系统默认提供：iOS 系统默认提供：
- systemBackground- secondarySystemBackground
- groupedBackground- tertiarySystemBackground
系统动态支持 Light/Dark 模式在浅色模式下颜色可能偏白，在暗黑模式下颜色较深，会动态调整。同样会动态调整，比主背景略深（浅色模式）或略浅（暗色模式）。
层次分明为主要的背景颜色，用于顶层内容。用于比主背景稍深或者稍浅的视图，让主界面对比感更强。

4. 多背景设计的典型场景 #

苹果系统定义的背景颜色有三个层次的系统标准颜色，用于让开发者轻松地按照 Apple 的设计规范实现层次分明的界面。

4.1 系统预定义背景层次： #

颜色属性用途
systemBackground最顶级的主背景。用于普通 View 的背景。
secondarySystemBackground辅助背景的视图，用于比主视图更深一层的 UI 元素，比如内容分隔线后的背景颜色（分组内容时）。
tertiarySystemBackground更浅的层次背景，辅助区块的内嵌内容背景（比如表格单元中的内容容器背景）。

浅色和暗黑模式下颜色层次对比： #

层次浅色模式暗黑模式
主背景清晰的白色。深灰或黑色。
辅助背景（次要）略浅的灰色，比如 #F2F2F2。略深的灰色，比如 #1C1C1C。
嵌套背景（第三层）更淡的灰色或渐变色。更接近主背景。

实际应用场景示例： #

  1. 大容器背景（使用 systemBackground）： 用于整个屏幕或最顶层视图的背景。例如 View 或主窗口：

    view.backgroundColor = UIColor.systemBackground

  2. 分组容器背景（使用 secondarySystemBackground）： 比如 UITableView 的背景。如果是分组样式，分组的背景可以用 secondarySystemBackground。

    tableView.backgroundColor = UIColor.secondarySystemBackground

  3. 更深一层的嵌套背景（使用 tertiarySystemBackground）： 适合次级的简单内容容器背景。比如子分区中的小块背景：

    innerView.backgroundColor = UIColor.tertiarySystemBackground

5. 系统设计和动态背景的优势 #

苹果设计 secondaryBackgroundColor 以及其他背景属性的初衷是为了促进界面的一致性和支持动态外观。

  1. 动态支持浅色/暗黑模式：

    • 在不同的外观下，这些背景颜色会自动调整，开发者无需手动设置浅/暗模式的颜色。
    • 例如：
      • 浅色模式：
        • systemBackground: 白色。
      • 暗黑模式：
        • systemBackground: 深黑色。

  2. 一致性设计：

    • 使用苹果提供的系统颜色，能保证用户在不同设备、iOS 版本上的体验是一致的。
    • 比如在浅色模式下分组背景颜色偏白，在深色模式下却是灰色，用户感知之间有清晰的对比层次。

  3. 易于层次分明的 UI 设计：

    • 多层次的背景颜色让界面设计更直观，比如：
      • 顶级元素使用 systemBackground。
      • 分区使用 secondarySystemBackground。
      • 嵌套内容或更次要部分使用 tertiarySystemBackground。

6. 总结 #

属性主要应用场景动态支持 Light/Dark 模式
background用于设置主背景（适用于整个屏幕或内容容器）。✅
secondaryBackground用于辅助背景区（例如内容分隔的容器或子区域）。✅

建议： #

  • 当开发层次分明的 UI 时，优先使用 systemBackground 及其衍生属性（如 secondarySystemBackground）。它们不仅在浅色和暗黑模式下会自动调整，还能确保设计的一致性和系统风格契合。
  • 不要手动定义浅/暗模式的颜色，因为苹果的动态颜色会自动处理这些逻辑，更加方便和灵活。
本文共 1921 字，上次修改于 Jan 11, 2025