75142913在线留言
【SwiftUI基础篇】2 布局视图:ScrollView(可滚动视图)与ScrollViewReader跳转_IOS开发_网络人

【SwiftUI基础篇】2 布局视图:ScrollView(可滚动视图)与ScrollViewReader跳转

Kwok 发表于:2021-04-01 10:01:54 点击:5 评论: 0

上一章介绍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标记跳转位置
            }
        }
    }
}
除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/ios/116.html
标签:布局layoutKwok最后编辑于:2021-04-01 11:01:04
0
感谢打赏!

《【SwiftUI基础篇】2 布局视图:ScrollView(可滚动视图)与ScrollViewReader跳转》的网友评论(0)

本站推荐阅读

热门点击文章