Swift Practice # 173 SwiftUI ScrollViewReader 跳至 Foreach 指定位置

Swift Practice # 173 SwiftUI ScrollViewReader 跳至 Foreach 指定位置

上一篇完成了可以拿到指定的ID开启相对的中央气象局乡镇市区的JSON,让自己的side Project可以多一个快速功能。

[

Swift Practice # 172 Swift 取得网页资料并制作台湾乡镇气象连结JSON

上一篇解决了使用Google Admob套件所产生的Link问题,让广告可以顺利显示。

媒体网

](https://medium.com/彼得潘的-swift-ios-app-開發教室/swift-practice-172-swift-取得網頁資料並製作台灣鄉鎮氣象連結json-d8b748cf7db7)

而这篇则要来优化一个自己写ScrollView+Foreach的页面遇到的一个小状况。

有在使用SwiftUI的人多少有透过Foreach+NavigationView制作列表,简单的状况应该回如同下面的程式码与Gif档案演示一样。

接着尝试将上面的程式码内的List换成ScrollView

可以直接把上面的some view替换成以下内容

不管是List还是ScrollView,在NavigationView与NavigationLink的状态下,只要我们点击返回到NavigationView时,原本ContentView的List或是ScrollView会停在原本点击前的页面,不会因为更新了View就把List或ScrollView拉回到最初第一个值的位置。

但因为自己的需要我在side project内没有使用到NavigationView去建立父页与子页的关联,尝试透过一个Bool值进行页面切换,来达成客制化自己的页面样貌。

可以看到上面的方法也能实现不同页面的切换并将前一页的资料传给下一页。而这种作法带来最主要的问题,可以看到上面的Gif的只要返回显示Foreach的页面,因为重新渲染画面,所以Foreach都会从第一个开始,不会像前两个透过NavitgationLink返回会停在原本点的位置。所以要解决的问题是在不透过NavigationLink与NavigationView使Foreach返回页面时至少能够「看到」当初点击的项目在View内。而这个时候就需要ScrollViewReader的协助。

从上面的Gif可以看到透过

 .onAppear { **如果** (numStrArray.count - userClickIndex) > 4 { index.scrollTo(userClickIndex,锚点:.center) } **别的** { index.scrollTo(userClickIndex,锚点:.bottom) } }

上面的程式码透过scrollTo的方法跳到指定的位置,至于为什么要先判断与实际Array的数量差距,原因在于如果是整个Array最后几个的话,如果是在Center的话会发现下面会有留白(如下图)

不过这样子在显示有点奇怪,所以在最后几个会直接显示在最下面。

以上就是在透过客制的View需要到跳到指定的位置的话,可以透过这个方法来跳到大致的位置。持续加油! ! !

参考来源:

[

利用ScrollViewReader 轻松让滚动视图滚动到特定位置

在新版SwiftUI 中,其中一个我最喜欢的新功能就是ScrollViewReader。在iOS 14 推出之前,要控制内置ScrollView 的滚动位置并不容易。如果想要滚动视图滚动到特定位置,就需要自己想出解决方案。有了…

www.appcoda.com.tw

](https://www.appcoda.com.tw/scrollviewreader/)

[

苹果开发者文档

编辑描述

developer.apple.com

](https://developer.apple.com/documentation/swiftui/scrollviewreader)

[

如何使用 ScrollViewReader 使滚动视图移动到某个位置

Paul Hudson @twostraws 为 Xcode 14.0 beta 1 更新 iOS 14 中的新功能 如果你想以编程方式制作 SwiftUI 的...

www.hackingwithswift.com

](https://www.hackingwithswift.com/quick-start/swiftui/how-to-make-a-scroll-view-move-to-a-location-using-scrollviewreader)

[

Swift-Practice-173-ScrollViewReader,下载Swift-Practice-173-ScrollViewReader的源码_GitHub_帮酷

您目前无法执行该操作。您使用另一个选项卡或窗口登录。您在另一个选项卡中退出或...

github.com

](https://github.com/dogpa/Swift-Practice-173-ScrollViewReader)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/20626/58310623

posted @ 2022-09-07 00:00  哈哈哈来了啊啊啊  阅读(152)  评论(0编辑  收藏  举报