SwiftUI 精通之路10: 关于 ScrollView 的简单应用

zyosasa
877 阅读5分钟

前言

今日还是没有鸡汤！

我们在创建视图的时候难免会出现超出当前屏幕能显示区域的内容，但是这时候我们想让他们显示出来，那么就要用到我们的 ScrollView 这个滚动视图容器。帮助我们创建可滚动区域视图。

另一种话术就是说通过它，能允许用户滚动查看超出屏幕访问的内容或者你指定区域内未显示的内容。无论水平还是垂直。

正文

首先我们创建我们的项目文件，虽然比较繁琐，但是这样我觉得可以帮助我们更加系统的归纳我们学习的过程；我们进入我们的工程项目点击Xcode顶部导航的 File > New > File from Template 选择 iOS > SwiftUI 模版创建新的SwiftUI文件。

快捷键 Command + N，我们新建文件名为 ScrollViewBootcamp.swift。

CleanShot 2024-10-15 at 20.11.35@2x.png

还是跟上一章节一样，我们先了解下当前这个视图的基础的结构，然后我们通过几个简单的案例熟悉它的使用。

ScrollView([Axis.Set], content: @escaping () -> Content)

Axis.Set: 主要是定义滚动方向，如.vertical (垂直方向), .horizontal ( 水平方向)。

content: 通过传递闭包，提供需要展示的视图内容。

基本结构我们介绍结束，让我们开始我们的案例主要案例：

  1. 垂直滚动案例
  2. 水平滚动案例
  3. 双方滚动案例
  4. ScrollView 滚动优化

垂直滚动案例

  1. 首先我们创建我们的垂直布局，通过我们的 VStack 堆栈建立视图垂直方向的排列。通过 ForEach 视图迭代遍历重复创建我们的文本视图 Text, 创建文本：
CleanShot 2024-10-15 at 20.41.19@2x.png

你可以在预览中看到目前 Item1...Item3 目前是被遮挡住，没有完全的显示在可视区域内。现在我们添加我们 ScrollView 视图构造器到我们文件中。传递第一个参数为.vertical, 设置当前滚动条滚动方向为垂直方向。

 ScrollView {
    VStack(spacing: 10) {
        ForEach(1..<20) { index in
            Text("Item \(index)")
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.blue.opacity(0.1))
                .cornerRadius(10)
        }
    }
    .padding()
}
CleanShot 2024-10-15 at 20.45.17.gif

水平滚动案例

我们实现了垂直滚动其实实现水平滚动也就简单了，我们将 axis 参数修改为 .horizontal, 其次我们将 VStack 修改为水平方向 HStack 就 OK!

ScrollView(.horizontal) {
    HStack(spacing: 10) {
        ForEach(1..<20) { index in
            Text("Item \(index)")
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.blue.opacity(0.1))
                .cornerRadius(10)
        }
    }
    .padding()
}
CleanShot 2024-10-15 at 21.06.56.gif

双方向滚动

我们想要实现双向的滚动，我们需要多添加一些数据行，那么我们借助 ForEach 视图构造器去进行多次创建。

ForEach(0..<100, id: \.self) { fatherIndex in
    // 行
    Text("\(fatherIndex)")
    HStack(spacing: 10) {
        ForEach(1..<20) { index in
            Text("Item \(index)")
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.blue.opacity(0.1))
                .cornerRadius(10)
        }
    }
    .padding()
}
CleanShot 2024-10-15 at 21.23.33@2x.png

我们这时候创建了静态的视图两层ForEach，我们这时候给最外层ForEach添加垂直滚动，最里面的 ForEach添加水平滚动

ScrollView(.vertical){
    ForEach(0..<10, id: \.self) { fatherIndex in
        ScrollView(.horizontal) {
            HStack(spacing: 10) {
                Text("\(fatherIndex)")
                ForEach(1..<20) { index in
                    Text("Item \(index)")
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.blue.opacity(0.1))
                        .cornerRadius(10)
                }
            }
        }
        .padding()
    }
}
CleanShot 2024-10-15 at 21.32.31.gif 你可能会说这个怎么就是双向滚动，这不就是垂直垂直滚动以及水平滚动结合嘛？

其实你说的没错，下面我们说下双向滚动是什么样？

我们可以创建下面视图进行演示，然后我们 ScrollView 第一个参数我们传递为数组[.vertical, horizontal]，然后我们看看效果：

ScrollView([.vertical, .horizontal]){
    VStack {
        Rectangle()
            .fill(Color.red)
            .frame(width: 1200, height: 220, alignment: .center)
        Rectangle()
            .fill(Color.blue)
            .frame(width: 1200, height: 220, alignment: .center)
       Text("双向滚动")
            .font(.title)
            .padding()
    }
}
CleanShot 2024-10-15 at 21.43.54.gif

滚动优化

我们现在知道如何进行创建水平滚动以及垂直滚动，但是有没有想过，当我们 ForEach 创建多个视图的时候，数量有些大时我们加载时候就会有些卡顿，数量越多我们的视图越卡顿！

这时候我们可以有的思路就是我们可以进行懒加载，在视图没有呈现或者没有显示在我们屏幕的时候我们不进行加载，在 SwiftUI 中我们可以通过 LazyVStack 或者 LazyHStack 去创建我们懒加载视图，我这边给没有添加前以及添加后效果的演示！

ForEach(0..<100, id: \.self) { fatherIndex in
    ScrollView(.horizontal) {
        HStack(spacing: 10) {
            Text("\(fatherIndex)")
            ForEach(1..<200) { index in
                Text("Item \(index)")
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.blue.opacity(0.1))
                    .cornerRadius(10)
            }
        }
    }
    .padding()
}
CleanShot 2024-10-15 at 21.50.11.gif

我们这边使用我们之前创建的示例代码，我们将渲染的数量增加到百位数，你可以看到我们视图的预览里面直接加载不出来，有可能是 Xcode 预览这个BUG，你可以直接打开模拟器运行查看！

我们再看看我们将 VStack 更换为 LazyVStack 以及 HStack 更换为 LazyHStack 后的效果！

CleanShot 2024-10-15 at 21.55.20.gif

我们明显可以看到加载更加顺畅了！哈哈哈，到此关于 ScrollView基础就讲解到这，本来还想说下关于动态偏移制作视差滚动效果的滚动，来日方长！

补充 知识点

如果想要隐藏滚动条那个滚动标识，我们可以添加这个修饰器.scrollIndicators(.hidden), 其值默认为.scrollIndicators(.visible)

CleanShot 2024-10-15 at 22.02.49.gif

其实这个也会遇到很多坑，但是也很好用！希望本章对你有帮助，目前还更新在 SwiftUI 基础，不断更新，向资深进军！

再见👋

avatar
文章
阅读
粉丝