【SwiftUI基础篇】2 布局视图：ScrollView（可滚动视图）与ScrollViewReader跳转

上一章介绍H/VStack的时候已使用到了ScrollView可滚动的视图，其主要功能是在可滚动内容区域中显示其内容。比如要展示的内容比较多。一屏显示不了。就需要用户滑动显示内容。

 虽然我们可以使用List和Form我们让创建数据的滚动，但有时候我们需要更灵活的去处理这些滚动数据，这时ScrollView就派上用场了。

ScrollView滚动视图可以水平，垂直或双向滚动，并且您还可以控制是否在其旁边显示滚动条（让用户感知其内容的大小）。当我们将视图放置在滚动视图中时，它们会自动确定内容的大小，以便用户可以拖动滚动条找到其想要的内容。

一、ScrollView 可滚动视图

struct ScrollView where Content : View

常用初始化：init([.horizontal（水平）|.vertical(垂直)], [showsIndicators: true是否显示滚动条]){ 返回一个 Content：View的闭包}

下面代码使用循环创建一个包含100个文本视图的滚动列表：

ScrollView(.vertical) {
    VStack(spacing: 10) {
        ForEach(0..<100) {
            Text("列表项:" + String($0))
                .font(.title)
        }
    }
}
.frame(maxWidth: .infinity)//正无穷宽。

ScrollView与List有很多共同的特性，但它们最大的区别应该是ScrollView是立即渲染视图，而List是惰性渲染，也就是说List其实更节约资源。因为是用户滚动视图时才会按需要渲染。

小提示：如果想ScrollView也实现惰性加载可以配合上一章里提到的：LazyVstack、LazyHstack。

二、ScrollViewReader 定位滚动位置

ScrollViewReader的子视图被定义为ScrollViewProxy的函数，用于快速跳转到子视图中的可滚动视图锚点位置。它的回调函数会提供一个 ScrollViewProxy 类型的参数，这个参数有一个 scrollTo 函数，可以通过锚点的值跳转到对应的位置。

scrollView.scrollTo(i * 10, anchor: .center)第一个输入就是锚点的 id，第二个（anchor）则是表明跳转后对应视图的位置ScrollView里使用的.id修饰，.center 表示跳转后视图在界面中央，如果第二个参数anchor使用默认的 nil 的话，就会进行最少的移动使视图出现，例如需要向下滑动的话，视图最终会在最下面，向上滑动的话，视图最终会在最上面。

ScrollViewReader { scrollProxy in
    //显示可点击的跳转按钮
    HStack {
        Text("跳转到：")
        ForEach(0..<10) { i in
            Button("(i * 10)") {
                //点击后跳转到锚点位置(配合动画不那么僵硬)
                withAnimation {
                    scrollProxy.scrollTo(i * 10, anchor: .center)
                }
            }
        }
    }
    //滚动视图显示
    ScrollView {
        LazyVStack {
            ForEach(0..<100) { i in
                Text("(i)").font(.title).id(i)//使用最后的id标记跳转位置
            }
        }
    }
}

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/116