iOS开发 SwiftUI 14：ScrollView 滚动视图

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

ScrollView

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

Swift 复制代码

Text("Hello, World!aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA")

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

放入ScrollView里面：

Swift 复制代码

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

效果：

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

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

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

Swift 复制代码

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

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

上下左右滑动找找：

滚动条

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

Swift 复制代码

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

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

Swift 复制代码

    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：

Swift 复制代码

    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才合适）。