当前位置：首页 > news >正文

iOS开发 SwiftUI 14：ScrollView 滚动视图

news 2026/7/6 15:24:25

很多时候内容确实比屏幕大，也不是什么都能用缩放来解决，此时能滚动查看就是非常理想的。

ScrollView

滚动条

ScrollView

我们先写一个超出屏幕宽度的文本：

Text("Hello, World!aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA")

效果是屏幕上下居中并自动换行：

放入ScrollView里面：

ScrollView(.horizontal){ Text("Hello, World!aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA") }

效果：

仍然上下居中但是没有自动换行。此时可以滚动屏幕来看到超出屏幕宽度的部分：

注意文本最后一个字符是“A”，说明确实看到全部了。

再加点超大图片，套个竖向ScrollView，实现上下左右都能滑动：

ScrollView(.vertical){ ScrollView(.horizontal){ Text("Hello, World!aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA") Image("pic1") Image("pic2") } }

因为图片非常大，会把文字顶到找不到：

上下左右滑动找找：

滚动条

仔细观察会发现上下滚动会出滚动条，左右滚动却不会出滚动条。关闭滚动条：

ScrollView(.vertical,showsIndicators: false){ ...... }

将上面的ScrollView套在Form里并给上下增加一个Text：

var body: some View { Form{ Text("a") ScrollView(.vertical,showsIndicators: false){ ScrollView(.horizontal){ Text("Hello, World!aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA") Image("pic1") Image("pic2") } } Text("b") } }

效果并不如我们预期，虽然确实显示了Form的框架，但仍然是整个屏幕滚动，而不是在Form里面滚动，而且，滚动时横竖滚动条都出现了（但是横向滚动条确实是显示在ScrollView里面的）。效果：

后一张横向滚动时并没有观察到横向滚动条。考虑到套了Form，我们去掉Form看看效果，下面的代码没有套Form并增加了一个独立的横向ScrollView：

var body: some View { Text("a") ScrollView(.horizontal) { Text("Hello, World!aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA") } ScrollView(.vertical, showsIndicators: false) { ScrollView(.horizontal) { Text( "Hello, World!aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA" ) Image("pic1") Image("pic2") } } Text("b") }

效果：

这下效果符合预期，两个ScrollView独立滚动，仔细观察滚动条发现，横向滚动条显示在ScrollView的底部，如果进行了纵向滚动，滚动条就被滚到下面看不见了，这应该是个BUG。至于前面套了Form的问题，大概是Form的处理造成的（局部小面积滚动也不合理，ScrollView之内放Form才合适）。

查看全文

http://www.jsqmd.com/news/1135484/