SwiftUI 中的 LinearGradient 与 HierarchicalShapeStyle：语义化样式系统的两种层级

一、背景：SwiftUI 的 ShapeStyle 抽象

在 SwiftUI 中，颜色并不是唯一的视觉输入。自 iOS 15 起，Apple 将颜色、渐变、材质等统一抽象为一个协议：

protocol ShapeStyle

只要一个类型符合 ShapeStyle，它就可以被用于：

foregroundStyle(_:)
background(_:)
fill(_:)
stroke(_:)

LinearGradient 和 HierarchicalShapeStyle 都是 ShapeStyle 的具体实现，但它们代表的设计层级完全不同：

类型	本质
LinearGradient	具体视觉描述（物理样式）
HierarchicalShapeStyle	语义化样式引用（抽象角色）

理解这一点，是理解二者区别的关键。

二、LinearGradient：显式的、确定性的视觉样式

1. 定义与本质

LinearGradient 表示 线性渐变填充，它是一个完全确定的视觉结果：

明确的颜色
明确的方向
明确的渲染方式

LinearGradient(
    colors: [.red, .orange],
    startPoint: .top,
    endPoint: .bottom
)

它直接告诉渲染系统：

“请按照我给定的参数绘制这个渐变。”

2. 所属层级：Presentation Layer

LinearGradient 属于 表现层（Presentation Layer）：

不关心系统主题
不关心控件层级
不关心语义角色

换言之，它是“画什么就是什么”。

3. 典型使用场景

（1）品牌视觉

Text("AYU")
    .font(.largeTitle.bold())
    .foregroundStyle(
        LinearGradient(
            colors: [.purple, .blue],
            startPoint: .leading,
            endPoint: .trailing
        )
    )

适用于：

Logo
品牌主视觉
Banner

（2）强调性装饰

卡片背景
CTA 按钮
Hero 区域

4. 优势与限制

优势

完全可控
表现力强
可复现性高

限制

不自适应系统语义
暗黑模式需要手动适配
可维护性随复杂度下降

三、HierarchicalShapeStyle：语义化的系统层级样式

1. 定义与本质

HierarchicalShapeStyle 并不是一个“颜色”或“渐变”，而是一个：

语义占位符（Semantic Placeholder）

它代表的是：

“请使用当前上下文中，某一层级的系统前景样式。”

常见用法：

.foregroundStyle(.secondary)

实际上 .primary、.secondary、.tertiary、.quaternary 都是 HierarchicalShapeStyle 的不同实例。

2. 所属层级：Semantic Layer

它属于 语义层（Semantic Layer）：

不是“长什么样”
而是“扮演什么角色”

例如：

样式	语义
.primary	主要信息
.secondary	次要信息
.tertiary	辅助信息
.quaternary	极弱提示

系统会根据以下条件动态决定最终颜色：

Light / Dark Mode
高对比度设置
父视图的 foregroundStyle
控件状态（enabled / disabled）

3. 动态解析机制

VStack {
    Text("Title")
        .foregroundStyle(.primary)

    Text("Subtitle")
        .foregroundStyle(.secondary)
}

在不同模式下：

模式	primary	secondary
Light	接近黑色	中灰
Dark	接近白色	浅灰

开发者不需要写任何适配代码。

4. 典型使用场景

（1）信息层级表达

Text("Heart Rate")
    .foregroundStyle(.secondary)

Text("72 bpm")
    .foregroundStyle(.primary)

（2）系统风格一致性

设置页
表单
列表
辅助说明文本

四、二者的核心差异对比

维度	LinearGradient	HierarchicalShapeStyle
类型	具体样式	语义样式
是否固定	是	否
是否响应系统	否	是
是否表达层级	否	是
是否适合品牌	是	否
是否适合信息文本	否	是

一句话总结：

**LinearGradient 告诉 SwiftUI“怎么画”，
HierarchicalShapeStyle 告诉 SwiftUI“画给谁看”。**

五、组合使用：现代 SwiftUI 的推荐模式

SwiftUI 并不要求二选一，正确的方式是分层使用。

示例：健康类 App（贴合你的项目场景）

VStack(alignment: .leading, spacing: 8) {
    Text("Morning Weight")
        .font(.caption)
        .foregroundStyle(.secondary)

    Text("68.4 kg")
        .font(.title2.bold())
        .foregroundStyle(
            LinearGradient(
                colors: [.green, .mint],
                startPoint: .leading,
                endPoint: .trailing
            )
        )
}

语义层负责 信息结构，表现层负责 视觉强调。

六、设计哲学总结（非常重要）

Apple 在 SwiftUI 中引入 HierarchicalShapeStyle，传达了一个明确的设计方向：

不要用颜色表达语义，而要用语义生成颜色。

这与传统 UIKit 中大量 UIColor.gray.withAlphaComponent(0.6) 的做法形成根本性转变。

而 LinearGradient 则依然是你在需要“突破系统样式”的地方，唯一正确的选择。

七、结论

LinearGradient 是 视觉工具
HierarchicalShapeStyle 是 设计语言
一个解决“好不好看”
一个解决“对不对”