滚动视图进阶

滚动视图进阶

了解如何使用 SwiftUI 中的最新 API 将滚动视图提升到新的水平。我们将向你展示如何以前所未有的方式自定义滚动视图。探索安全区域和滚动视图边距之间的关系，了解如何与滚动视图的内容偏移量进行交互，并了解如何通过滚动过渡为内容增添一些独特风格。

章节
- 0:00 - Introduction to scroll views
- 2:01 - Margins and safe area
- 4:14 - Targets and positions
- 11:33 - Scroll transitions
资源
- - 高清视频
  - 标清视频
相关视频

WWDC23
- 探索 Swift Charts 中的饼图及交互性
- SwiftUI 的新功能
下载

♪ ♪
Harry：大家好我叫 Harry 是 SwiftUI 团队的一名工程师欢迎来到讲座“滚动视图进阶” 我将介绍 SwiftUI 中滚动视图的一些新改进我们的设备所要处理的内容很少能够固定于某个屏幕尺寸为了处理这种复杂性设备引入了滚动功能这使得设备能够展示所有内容即使它们无法在屏幕上完整显示 SwiftUI 提供了几个不同的组件让你可以将滚动功能集成到你的 App 中今天我将讲解其中一个组件：滚动视图滚动视图是一个构建块可以让你的内容滚动滚动视图有定义其可滚动方向的轴滚动视图有内容当内容超出滚动视图的尺寸时部分内容将被裁剪用户需要滚动来展示它们滚动视图通过将安全区域解析为边距来确保内容位于安全区域内滚动视图默认会立即加载全部内容你可以使用 lazy stack 来更改这种行为
滚动视图内容在内容中的确切滚动位置称为内容偏移量 SwiftUI 提供了 ScrollViewReader API 来控制内容偏移量今年 SwiftUI 还引入了更多方法来影响和响应滚动视图所管理的内容偏移量在本讲座中我将首先解释如何影响滚动视图的边距以及其与安全区域的关系然后我将介绍通过滚动目标和滚动位置来管理滚动视图的内容偏移量最后我将展示如何通过滚动过渡为你的 App 添加一些真实的效果自从我开始制作我的 Colors App 以来用户们非常喜欢向我展示他们喜欢的颜色组合我希望能够展示其中一些组合让其他用户也能享受到为此我一直在努力为 Colors App 添加一个画廊功能我已经在实现画廊功能方面取得了一些进展在本次讲座中我将会优化画廊的展示区域的标题和内容
在我的画廊中我使用水平的 ScrollView 包装了一个 lazy stack 首先我将通过添加一些边距使这个视图看起来更好一些你的第一反应可能是给滚动视图添加一些内边距这将使滚动视图内部产生一个缩进但请注意现在在滚动时其内容被裁剪了我不想给滚动视图本身添加内边距而是希望扩展滚动视图的内容外边距我可以使用新的 safeAreaPadding 修饰符来实现这一点它的行为类似于普通的 padding 修饰符但不是给内容添加内边距而是将内边距添加到安全区域现在滚动视图的宽度被扩展使得接下来的内容可部分显示在屏幕上在继续之前我想简单谈谈与滚动视图相关的安全区域安全区域通常来自你的 App 所运行的设备它们也可以来自像 safeAreaPadding 或 safe area inset 修饰符这样的 API 滚动视图将安全区域解析为应用于其内容的边距这包括你负责的内容以及滚动视图负责的其他内容如滚动指示器这意味着通过修改安全区域无法为不同类型的内容配置不同的缩进
如果你想应用不同的缩进你可以使用新的 contentMargins API 此 API 允许你将缩进滚动视图的内容与缩进滚动指示器分离开或者将缩进指示器与缩进内容分离开回到我的画廊我将把 safeAreaPadding 修饰符换成 content margin API 现在我的视图已经应用了一些边距但我希望控制在用户松开手指后滚动视图将滚动到哪里
默认情况下滚动视图使用标准减速率以及滚动的速度来计算滚动应该在哪里结束它并没有考虑滚动视图本身或其内容的大小但有时这些因素是很重要的在 SwiftUI 中你可以使用 scrollTargetBehavior 修饰符来更改滚动视图计算目标内容偏移量的方式此修饰符接受遵循 scrollTargetBehavior 协议的类型在这里我指定了 paging 行为现在我的滚动视图每次滑动一页 paging 行为很特殊它有自定义的减速率并根据滚动视图本身的尺寸来选择滚动的位置这种滚动行为在 iOS 设备上效果良好但在较大的 iPadOS 屏幕上可能显得过于夸张或不够合适与其将滚动视图的对齐方式与整个容器的尺寸相关联我更希望将其对齐到各个单独的视图上
viewAligned 行为会将滚动视图对齐到视图因此滚动视图需要知道哪些视图应该用于对齐这些视图称为滚动目标有一组新的修饰符可以让我指定哪些视图是滚动目标在这里我将使用 scrollTargetLayout 修饰符使 lazy stack 中的每个主视图都被视为滚动目标你也可以使用 scroll target 修饰符来标记单个视图作为目标使用 lazy stack 时重要的是要使用 scrollTargetLayout 修饰符可见区域之外的视图尚未创建但是布局系统已经知道将会创建哪些视图所以能够确保滚动视图滚动到正确的位置
现在我的滚动视图在 iPad 上看起来好多了 paging 和 viewAligned 行为是基于新的 ScrollTargetBehavior 协议构建的 SwiftUI 为你提供了这些常见的行为同时还允许你遵守此协议并实现自己的自定义行为就像你之前采用了介绍过的布局协议一样通过实现一个必需的方法 updateTarget 使自定义类型符合 ScrollTargetBehavior 协议 SwiftUI 在计算滚动结束的位置时调用此方法而且也在其他环境中调用比如滚动视图的大小发生变化时自定义行为很容易在这里如果滚动视图的目标偏移量靠近顶部并且滚动是向上快速滑动的那么我希望将滚动视图正好滚动到顶部这可以通过修改提供的目标偏移量来实现这将导致滚动视图选择不同的内容偏移量作为滚动的终点通过这种方式我可以插入自定义代码影响滚动视图在哪里选择滚动
让我们回到我的画廊视图我想谈谈布局注意我的主视图是相对于设备的整体宽度大小进行调整的如果我们看一下 iPad 两个视图可以均匀地适应设备的宽度之前你可能需要使用 GeometryReader 来实现这一点但今年 SwiftUI 使这一操作更为简便它推出了一个新的 API 称为 containerRelativeFrame 修饰符
我会向你展示我的主视图如何使用这个 API 首先我从一组颜色视图开始并使用 frame 修饰符指定了一个固定的高度然后我将 containerRelativeFrame 修饰符添加到我的视图中在这里我指定了水平轴让视图的宽度与其容器相同在我的案例中容器是两侧的滚动视图但它也可能是导航分割视图中最近的列或者你的 App 窗口当容器的宽度发生变化时视图的大小会自动更新我可以通过提供数量和间距来创建这些视图的网格式布局并根据 horizontalSizeClass 条件化计数使得视图在 iPad 上有两列在手机上有一列更好的是由于 horizontalSizeClass 环境属性现在适用于所有平台我可以去掉 OS 条件最后我将使用 aspectRatio 修饰符使高度和宽度成比例变化而不是硬编码为固定高度现在我已经完成了画廊的布局和滚动行为接下来我想做一些更改你会注意到的一个问题是滚动指示器我想把它们去掉
我可以使用现有的 scrollIndicators API 来实现这一点当我在 iPad 上用手指滑动时效果看起来很棒但是我通常在 Mac 上使用画廊在 Mac 上如果使用鼠标或其他输入设备我可能无法轻松地进行水平轻扫手势当我连接鼠标时指示器是可见的尽管我要求它们隐藏没有滚动指示器使用鼠标可能会很难或无法滚动因此 scrollIndicators 修饰符的默认行为是在使用更加灵活的输入设备例如触摸板时隐藏滚动指示器但当连接鼠标时允许滚动指示器显示你可以为 scrollIndicators 修饰符提供 never 的值这样无论输入设备如何都始终隐藏指示器但我的 App 仍然需要支持使用鼠标的用户所以我需要为他们提供另一种滚动画廊的方式我将使用一些视图来代替滚动指示器允许用户通过点击来滚动到上一个或下一个视图要开始构建这个功能让我们稍微整理一下我的滚动视图我将把滚动视图移到一个包含顶部视图的 VStack 中
现在我会专注于顶部视图
我会将一些自定义的箭头按钮视图添加到顶部视图中在之前的 SwiftUI 版本中我可能会使用 ScrollViewReader 来将其传递给我的箭头按钮并滚动到适当的视图 SwiftUI 中的新功能是 ScrollPosition 修饰符这个修饰符将一个绑定与封装标识符的状态关联起来我将把这个绑定传递给我的 scrollPosition 修饰符然后滚动视图将从中读取并应用到我的顶部视图在头部视图的滚动手柄中我可以像处理任何其他状态一样写入绑定当绑定被写入时滚动视图将滚动到具有该标识符的视图就像视图对齐的 ScrollTargetBehavior 一样 ScrollPosition 修饰符使用 scrollTargetLayout 修饰符来确定要查询其标识值的视图
ScrollPosition 修饰符还允许我了解当前滚动视图的标识因此我可以在头部视图中添加一些文本显示当前滚动的主图像的值当滚动视图中最前面的视图发生更改时绑定将自动更新现在使用鼠标的用户也可以滚动我的画廊了我想为此视图添加最后一点装饰了解当前滚动到的视图很有用同样地有时我想根据视图在滚动视图中的位置对其进行视觉上的修改 SwiftUI 中的新 API ScrollTransitions 可以轻松实现这一点 ScrollTransition 很像普通的过渡过渡描述了视图在出现或消失时应该经历的变化当视图出现时它处于标识阶段不该应用任何自定义 ScrollTransition 描述了一组类似于过渡的更改但是在视图进入滚动视图的可见区域时以及之后离开时应用这些更改
默认情况下当视图位于可见区域的中心时它处于 ScrollTransition 的标识阶段让我们在主视图中查看这一点我将稍微简化这个示例以便专注于 ScrollTransitions
当视图接近滚动视图的边缘时我希望其尺寸缩小一些我将首先添加 ScrollTransition 修饰符此 API 接受内容和一个阶段并允许你根据阶段指定内容的视觉更改此时我将在视图不处于其标识阶段时指定一个缩小的比例
看起来很不错！ ScrollTransitions 使用 SwiftUI 中的新协议 VisualEffect 该协议为视图内容提供了一组安全使用的自定义功能这些功能可以作为布局的函数比如滚动视图的内容偏移量其中许多可能对你来说很熟悉你已经了解了 scaleEffect 你还可以像使用视图修饰符一样自定义旋转或偏移等效果但并非所有视图修饰符都可在 ScrollTransition 中安全使用例如自定义字体不受支持并且无法构建在 ScrollTransition 修饰符中不能使用会改变滚动视图整体内容大小的任何内容哇我们介绍了很多内容让我们简单复习一下
我们讨论了安全区域和内容边距之间的区别及与滚动视图的关系我向你展示了如何使用 paging 和 viewAligned 的 ScrollTargetBehaviors 来影响滚动视图的行为以及如何编写符合 ScrollTargetBehavior 协议的自定义实现你学会了使用 containerRelativeFrame 修饰符来相对于容器更轻松地创建布局我使用 ScrollPosition 修饰符连接到滚动视图的状态允许我以编程方式滚动并获知当前滚动的视图是哪个最后我使用 ScrollTransition API 基于滚动视图的内容偏移量创建了视觉效果希望你享受学习有关滚动视图的这些优化谢谢祝你度过愉快的 WWDC ♪ ♪

struct Item: Identifiable {
    var id: Int
}

struct ContentView: View {
    @State var items: [Item] = (0 ..< 25).map { Item(id: $0) }

    var body: some View {
        ScrollView(.vertical) {
            LazyVStack {
                ForEach(items) { item in
                    ItemView(item: item)
                }
            }
        }
    }
}

struct ItemView: View {
    var item: Item

    var body: some View {
        Text(item, format: .number)
            .padding(.vertical)
            .frame(maxWidth: .infinity)
    }
}

2:29 - Basic Featured Section

struct ContentView: View {
    @State var palettes: [Palette] = [
        .init(id: UUID(), name: "Example One"),
        .init(id: UUID(), name: "Example Two"),
        .init(id: UUID(), name: "Example Three"),
    ]

    var body: some View {
        ScrollView {
            GalleryHeroSection(palettes: palettes)
        }
    }
}

struct Palette: Identifiable {
    var id: UUID
    var name: String
}

struct GalleryHeroSection: View {
    var palettes: [Palette]

    var body: some View {
        GallerySection(edge: .top) {
            GalleryHeroContent(palettes: palettes)
        } label: {
            GalleryHeroHeader(palettes: palettes)
        }
    }
}

struct GallerySection<Content: View, Label: View>: View {
    var edge: Edge? = nil
    @ViewBuilder var content: Content
    @ViewBuilder var label: Label

    var body: some View {
        VStack(alignment: .leading) {
            label
                .font(.title2.bold())
            content
        }
        .padding(.top, halfSpacing)
        .padding(.bottom, sectionSpacing)
        .overlay(alignment: .bottom) {
            if edge != .bottom {
                Divider().padding(.horizontal, hMargin)
            }
        }
    }

    var halfSpacing: CGFloat {
        sectionSpacing / 2.0
    }

    var sectionSpacing: CGFloat {
        20.0
    }

    var hMargin: CGFloat {
        #if os(macOS)
        40.0
        #else
        20.0
        #endif
    }
}

struct GalleryHeroContent: View {
    var palettes: [Palette]

    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: hSpacing) {
                ForEach(palettes) { palette in
                    GalleryHeroView(palette: palette)
                }
            }
        }
    }

    var hSpacing: CGFloat {
        10.0
    }
}

struct GalleryHeroView: View {
    var palette: Palette

    @Environment(\.horizontalSizeClass) private var sizeClass

    var body: some View {
        colorStack
            .aspectRatio(heroRatio, contentMode: .fit)
            .containerRelativeFrame(
                [.horizontal], count: columns, spacing: hSpacing
            )
            .clipShape(.rect(cornerRadius: 20.0))
    }

    private var columns: Int {
        sizeClass == .compact ? 1 : regularCount
    }

    @ViewBuilder
    private var colorStack: some View {
        let offsetValue = stackPadding
        ZStack {
            Color.red
                .offset(x: offsetValue, y: offsetValue)
            Color.blue
            Color.green
                .offset(x: -offsetValue, y: -offsetValue)
        }
        .padding(stackPadding)
        .background()
    }

    var stackPadding: CGFloat {
        20.0
    }

    var heroRatio: CGFloat {
        16.0 / 9.0
    }

    var regularCount: Int {
        2
    }

    var hSpacing: CGFloat {
        10.0
    }
}

struct GalleryHeroHeader: View {
    var palettes: [Palette]

    var body: some View {
        Text("Featured")
            .padding(.horizontal, hMargin)
    }

    var hMargin: CGFloat {
        20.0
    }
}

4:00 - Featured Section with Margins

struct ContentView: View {
    @State var palettes: [Palette] = [
        .init(id: UUID(), name: "Example One"),
        .init(id: UUID(), name: "Example Two"),
        .init(id: UUID(), name: "Example Three"),
    ]

    var body: some View {
        ScrollView {
            GalleryHeroSection(palettes: palettes)
        }
    }
}

struct Palette: Identifiable {
    var id: UUID
    var name: String
}

struct GalleryHeroSection: View {
    var palettes: [Palette]

    var body: some View {
        GallerySection(edge: .top) {
            GalleryHeroContent(palettes: palettes)
        } label: {
            GalleryHeroHeader(palettes: palettes)
        }
    }
}

struct GallerySection<Content: View, Label: View>: View {
    var edge: Edge? = nil
    @ViewBuilder var content: Content
    @ViewBuilder var label: Label

    var body: some View {
        VStack(alignment: .leading) {
            label
                .font(.title2.bold())
            content
        }
        .padding(.top, halfSpacing)
        .padding(.bottom, sectionSpacing)
        .overlay(alignment: .bottom) {
            if edge != .bottom {
                Divider().padding(.horizontal, hMargin)
            }
        }
    }

    var halfSpacing: CGFloat {
        sectionSpacing / 2.0
    }

    var sectionSpacing: CGFloat {
        20.0
    }

    var hMargin: CGFloat {
        #if os(macOS)
        40.0
        #else
        20.0
        #endif
    }
}

struct GalleryHeroContent: View {
    var palettes: [Palette]

    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: hSpacing) {
                ForEach(palettes) { palette in
                    GalleryHeroView(palette: palette)
                }
            }
        }
        .contentMargins(.horizontal, hMargin)
    }

    var hMargin: CGFloat {
        20.0
    }

    var hSpacing: CGFloat {
        10.0
    }
}

struct GalleryHeroView: View {
    var palette: Palette

    @Environment(\.horizontalSizeClass) private var sizeClass

    var body: some View {
        colorStack
            .aspectRatio(heroRatio, contentMode: .fit)
            .containerRelativeFrame(
                [.horizontal], count: columns, spacing: hSpacing
            )
            .clipShape(.rect(cornerRadius: 20.0))
    }

    private var columns: Int {
        sizeClass == .compact ? 1 : regularCount
    }

    @ViewBuilder
    private var colorStack: some View {
        let offsetValue = stackPadding
        ZStack {
            Color.red
                .offset(x: offsetValue, y: offsetValue)
            Color.blue
            Color.green
                .offset(x: -offsetValue, y: -offsetValue)
        }
        .padding(stackPadding)
        .background()
    }

    var stackPadding: CGFloat {
        20.0
    }

    var heroRatio: CGFloat {
        16.0 / 9.0
    }

    var regularCount: Int {
        2
    }

    var hSpacing: CGFloat {
        10.0
    }
}

struct GalleryHeroHeader: View {
    var palettes: [Palette]

    var body: some View {
        Text("Featured")
            .padding(.horizontal, hMargin)
    }

    var hMargin: CGFloat {
        20.0
    }
}

7:42 - Featured Section + Container Relative Frame

struct ContentView: View {
    @State var palettes: [Palette] = [
        .init(id: UUID(), name: "Example One"),
        .init(id: UUID(), name: "Example Two"),
        .init(id: UUID(), name: "Example Three"),
    ]

    var body: some View {
        ScrollView {
            GalleryHeroSection(palettes: palettes)
        }
    }
}

struct Palette: Identifiable {
    var id: UUID
    var name: String
}

struct GalleryHeroSection: View {
    var palettes: [Palette]

    var body: some View {
        GallerySection(edge: .top) {
            GalleryHeroContent(palettes: palettes)
        } label: {
            GalleryHeroHeader(palettes: palettes)
        }
    }
}

struct GallerySection<Content: View, Label: View>: View {
    var edge: Edge? = nil
    @ViewBuilder var content: Content
    @ViewBuilder var label: Label

    var body: some View {
        VStack(alignment: .leading) {
            label
                .font(.title2.bold())
            content
        }
        .padding(.top, halfSpacing)
        .padding(.bottom, sectionSpacing)
        .overlay(alignment: .bottom) {
            if edge != .bottom {
                Divider().padding(.horizontal, hMargin)
            }
        }
    }

    var halfSpacing: CGFloat {
        sectionSpacing / 2.0
    }

    var sectionSpacing: CGFloat {
        20.0
    }

    var hMargin: CGFloat {
        #if os(macOS)
        40.0
        #else
        20.0
        #endif
    }
}

struct GalleryHeroContent: View {
    var palettes: [Palette]

    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: hSpacing) {
                ForEach(palettes) { palette in
                    GalleryHeroView(palette: palette)
                }
            }
            .scrollTargetLayout()
        }
        .contentMargins(.horizontal, hMargin)
        .scrollTargetBehavior(.viewAligned)
    }

    var hMargin: CGFloat {
        20.0
    }

    var hSpacing: CGFloat {
        10.0
    }
}

struct GalleryHeroView: View {
    var palette: Palette

    @Environment(\.horizontalSizeClass) private var sizeClass

    var body: some View {
        colorStack
            .aspectRatio(heroRatio, contentMode: .fit)
            .containerRelativeFrame(
                [.horizontal], count: columns, spacing: hSpacing
            )
            .clipShape(.rect(cornerRadius: 20.0))
    }

    private var columns: Int {
        sizeClass == .compact ? 1 : regularCount
    }

    @ViewBuilder
    private var colorStack: some View {
        let offsetValue = stackPadding
        ZStack {
            Color.red
                .offset(x: offsetValue, y: offsetValue)
            Color.blue
            Color.green
                .offset(x: -offsetValue, y: -offsetValue)
        }
        .padding(stackPadding)
        .background()
    }

    var stackPadding: CGFloat {
        20.0
    }

    var heroRatio: CGFloat {
        16.0 / 9.0
    }

    var regularCount: Int {
        2
    }

    var hSpacing: CGFloat {
        10.0
    }
}

struct GalleryHeroHeader: View {
    var palettes: [Palette]

    var body: some View {
        Text("Featured")
            .padding(.horizontal, hMargin)
    }

    var hMargin: CGFloat {
        20.0
    }
}

9:46 - Featured Section + Scroll Position

struct ContentView: View {
    @State var palettes: [Palette] = [
        .init(id: UUID(), name: "Example One"),
        .init(id: UUID(), name: "Example Two"),
        .init(id: UUID(), name: "Example Three"),
    ]

    var body: some View {
        ScrollView {
            GalleryHeroSection(palettes: palettes)
        }
    }
}

struct Palette: Identifiable {
    var id: UUID
    var name: String
}

struct GalleryHeroSection: View {
    var palettes: [Palette]
    @State var mainID: Palette.ID? = nil

    var body: some View {
        GallerySection(edge: .top) {
            GalleryHeroContent(palettes: palettes, mainID: $mainID)
        } label: {
            GalleryHeroHeader(palettes: palettes, mainID: $mainID)
        }
    }
}

struct GallerySection<Content: View, Label: View>: View {
    var edge: Edge? = nil
    @ViewBuilder var content: Content
    @ViewBuilder var label: Label

    var body: some View {
        VStack(alignment: .leading) {
            label
                .font(.title2.bold())
            content
        }
        .padding(.top, halfSpacing)
        .padding(.bottom, sectionSpacing)
        .overlay(alignment: .bottom) {
            if edge != .bottom {
                Divider().padding(.horizontal, hMargin)
            }
        }
    }

    var halfSpacing: CGFloat {
        sectionSpacing / 2.0
    }

    var sectionSpacing: CGFloat {
        20.0
    }

    var hMargin: CGFloat {
        #if os(macOS)
        40.0
        #else
        20.0
        #endif
    }
}

struct GalleryHeroContent: View {
    var palettes: [Palette]
    @Binding var mainID: Palette.ID?

    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: hSpacing) {
                ForEach(palettes) { palette in
                    GalleryHeroView(palette: palette)
                }
            }
            .scrollTargetLayout()
        }
        .contentMargins(.horizontal, hMargin)
        .scrollTargetBehavior(.viewAligned)
        .scrollPosition(id: $mainID)
        .scrollIndicators(.never)
    }

    var hMargin: CGFloat {
        20.0
    }

    var hSpacing: CGFloat {
        10.0
    }
}

struct GalleryHeroView: View {
    var palette: Palette

    @Environment(\.horizontalSizeClass) private var sizeClass

    var body: some View {
        colorStack
            .aspectRatio(heroRatio, contentMode: .fit)
            .containerRelativeFrame(
                [.horizontal], count: columns, spacing: hSpacing
            )
            .clipShape(.rect(cornerRadius: 20.0))
    }

    private var columns: Int {
        sizeClass == .compact ? 1 : regularCount
    }

    @ViewBuilder
    private var colorStack: some View {
        let offsetValue = stackPadding
        ZStack {
            Color.red
                .offset(x: offsetValue, y: offsetValue)
            Color.blue
            Color.green
                .offset(x: -offsetValue, y: -offsetValue)
        }
        .padding(stackPadding)
        .background()
    }

    var stackPadding: CGFloat {
        20.0
    }

    var heroRatio: CGFloat {
        16.0 / 9.0
    }

    var regularCount: Int {
        2
    }

    var hSpacing: CGFloat {
        10.0
    }
}

struct GalleryHeroHeader: View {
    var palettes: [Palette]
    @Binding var mainID: Palette.ID?

    var body: some View {
        VStack(alignment: .leading, spacing: 2.0) {
            Text("Featured")
            Spacer().frame(maxWidth: .infinity)
        }
        .padding(.horizontal, hMargin)
        #if os(macOS)
        .overlay {
            HStack(spacing: 0.0) {
                GalleryPaddle(edge: .leading) {
                    scrollToPreviousID()
                }
                Spacer().frame(maxWidth: .infinity)
                GalleryPaddle(edge: .trailing) {
                    scrollToNextID()
                }
            }
        }
        #endif
    }

    private func scrollToNextID() {
        guard let id = mainID, id != palettes.last?.id,
              let index = palettes.firstIndex(where: { $0.id == id })
        else { return }

        withAnimation {
            mainID = palettes[index + 1].id
        }
    }

    private func scrollToPreviousID() {
        guard let id = mainID, id != palettes.first?.id,
              let index = palettes.firstIndex(where: { $0.id == id })
        else { return }

        withAnimation {
            mainID = palettes[index - 1].id
        }
    }

    var hMargin: CGFloat {
        20.0
    }
}

struct GalleryPaddle: View {
    var edge: HorizontalEdge
    var action: () -> Void

    var body: some View {
        Button {
            action()
        } label: {
            Label(labelText, systemImage: labelIcon)
        }
        .buttonStyle(.paddle)
        .font(nil)
    }

    var labelText: String {
        switch edge {
        case .leading:
            return "Backwards"
        case .trailing:
            return "Forwards"
        }
    }

    var labelIcon: String {
        switch edge {
        case .leading:
            return "chevron.backward"
        case .trailing:
            return "chevron.forward"
        }
    }
}

private struct PaddleButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .imageScale(.large)
            .labelStyle(.iconOnly)
    }
}

extension ButtonStyle where Self == PaddleButtonStyle {
    static var paddle: Self { .init() }
}

12:34 - Featured Section + Scroll Transition

struct ContentView: View {
    @State var palettes: [Palette] = [
        .init(id: UUID(), name: "Example One"),
        .init(id: UUID(), name: "Example Two"),
        .init(id: UUID(), name: "Example Three"),
    ]

    var body: some View {
        ScrollView {
            GalleryHeroSection(palettes: palettes)
        }
    }
}

struct Palette: Identifiable {
    var id: UUID
    var name: String
}

struct GalleryHeroSection: View {
    var palettes: [Palette]
    @State var mainID: Palette.ID? = nil

    var body: some View {
        GallerySection(edge: .top) {
            GalleryHeroContent(palettes: palettes, mainID: $mainID)
        } label: {
            GalleryHeroHeader(palettes: palettes, mainID: $mainID)
        }
    }
}

struct GallerySection<Content: View, Label: View>: View {
    var edge: Edge? = nil
    @ViewBuilder var content: Content
    @ViewBuilder var label: Label

    var body: some View {
        VStack(alignment: .leading) {
            label
                .font(.title2.bold())
            content
        }
        .padding(.top, halfSpacing)
        .padding(.bottom, sectionSpacing)
        .overlay(alignment: .bottom) {
            if edge != .bottom {
                Divider().padding(.horizontal, hMargin)
            }
        }
    }

    var halfSpacing: CGFloat {
        sectionSpacing / 2.0
    }

    var sectionSpacing: CGFloat {
        20.0
    }

    var hMargin: CGFloat {
        #if os(macOS)
        40.0
        #else
        20.0
        #endif
    }
}

struct GalleryHeroContent: View {
    var palettes: [Palette]
    @Binding var mainID: Palette.ID?

    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: hSpacing) {
                ForEach(palettes) { palette in
                    GalleryHeroView(palette: palette)
                }
            }
            .scrollTargetLayout()
        }
        .contentMargins(.horizontal, hMargin)
        .scrollTargetBehavior(.viewAligned)
        .scrollPosition(id: $mainID)
        .scrollIndicators(.never)
    }

    var hMargin: CGFloat {
        20.0
    }

    var hSpacing: CGFloat {
        10.0
    }
}

struct GalleryHeroView: View {
    var palette: Palette

    @Environment(\.horizontalSizeClass) private var sizeClass

    var body: some View {
        colorStack
            .aspectRatio(heroRatio, contentMode: .fit)
            .containerRelativeFrame(
                [.horizontal], count: columns, spacing: hSpacing
            )
            .clipShape(.rect(cornerRadius: 20.0))
            .scrollTransition(axis: .horizontal) { content, phase in
                content
                    .scaleEffect(
                        x: phase.isIdentity ? 1.0 : 0.80,
                        y: phase.isIdentity ? 1.0 : 0.80)
            }
    }

    private var columns: Int {
        sizeClass == .compact ? 1 : regularCount
    }

    @ViewBuilder
    private var colorStack: some View {
        let offsetValue = stackPadding
        ZStack {
            Color.red
                .offset(x: offsetValue, y: offsetValue)
            Color.blue
            Color.green
                .offset(x: -offsetValue, y: -offsetValue)
        }
        .padding(stackPadding)
        .background()
    }

    var stackPadding: CGFloat {
        20.0
    }

    var heroRatio: CGFloat {
        16.0 / 9.0
    }

    var regularCount: Int {
        2
    }

    var hSpacing: CGFloat {
        10.0
    }
}

struct GalleryHeroHeader: View {
    var palettes: [Palette]
    @Binding var mainID: Palette.ID?

    var body: some View {
        VStack(alignment: .leading, spacing: 2.0) {
            Text("Featured")
            Spacer().frame(maxWidth: .infinity)
        }
        .padding(.horizontal, hMargin)
        #if os(macOS)
        .overlay {
            HStack(spacing: 0.0) {
                GalleryPaddle(edge: .leading) {
                    scrollToPreviousID()
                }
                Spacer().frame(maxWidth: .infinity)
                GalleryPaddle(edge: .trailing) {
                    scrollToNextID()
                }
            }
        }
        #endif
    }

    private func scrollToNextID() {
        guard let id = mainID, id != palettes.last?.id,
              let index = palettes.firstIndex(where: { $0.id == id })
        else { return }

        withAnimation {
            mainID = palettes[index + 1].id
        }
    }

    private func scrollToPreviousID() {
        guard let id = mainID, id != palettes.first?.id,
              let index = palettes.firstIndex(where: { $0.id == id })
        else { return }

        withAnimation {
            mainID = palettes[index - 1].id
        }
    }

    var hMargin: CGFloat {
        20.0
    }
}

struct GalleryPaddle: View {
    var edge: HorizontalEdge
    var action: () -> Void

    var body: some View {
        Button {
            action()
        } label: {
            Label(labelText, systemImage: labelIcon)
        }
        .buttonStyle(.paddle)
        .font(nil)
    }

    var labelText: String {
        switch edge {
        case .leading:
            return "Backwards"
        case .trailing:
            return "Forwards"
        }
    }

    var labelIcon: String {
        switch edge {
        case .leading:
            return "chevron.backward"
        case .trailing:
            return "chevron.forward"
        }
    }
}

private struct PaddleButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .imageScale(.large)
            .labelStyle(.iconOnly)
    }
}

extension ButtonStyle where Self == PaddleButtonStyle {
    static var paddle: Self { .init() }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

章节

资源

相关视频

WWDC23